spectrogram-js 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +113 -1
- package/package.json +10 -3
package/README.md
CHANGED
|
@@ -1,3 +1,115 @@
|
|
|
1
1
|
# spectrogram-js
|
|
2
2
|
|
|
3
|
-
🎶 A
|
|
3
|
+
🎶 **A lightweight TypeScript library for real-time spectrogram (waterfall) rendering.**
|
|
4
|
+
|
|
5
|
+
**Live Demo:** https://anyshake.github.io/spectrogram-js/
|
|
6
|
+
|
|
7
|
+
`spectrogram-js` provides a simple, dependency-light way to generate FFT-based spectrograms and render them onto a `<canvas>`, suitable for **signal processing**, **audio**, **sensor data**, and **scientific visualization** use cases.
|
|
8
|
+
|
|
9
|
+
<div align="center">
|
|
10
|
+
<img
|
|
11
|
+
src="https://github.com/anyshake/spectrogram-js/blob/master/images/preview.webp?raw=true"
|
|
12
|
+
style="max-width: 800px; width: 100%;"
|
|
13
|
+
/>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
## Features
|
|
17
|
+
|
|
18
|
+
- Real-time spectrogram / waterfall rendering
|
|
19
|
+
- Configurable FFT window, overlap, and window functions
|
|
20
|
+
- Built-in colormaps (`jet`, `viridis`, etc.)
|
|
21
|
+
- Optional shared FFT executor for performance
|
|
22
|
+
- Designed for streaming / incremental data
|
|
23
|
+
- Zero framework dependency (plain Canvas API)
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
$ npm install spectrogram-js
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
or
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
$ pnpm add spectrogram-js
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Basic Usage
|
|
38
|
+
|
|
39
|
+
```ts
|
|
40
|
+
import { Spectrogram } from 'spectrogram-js';
|
|
41
|
+
|
|
42
|
+
const windowSize = 768;
|
|
43
|
+
|
|
44
|
+
const spectrogram = new Spectrogram({
|
|
45
|
+
windowType: 'hann', // hann, hamming, blackman, rectangular
|
|
46
|
+
overlap: Math.floor(windowSize * 0.86),
|
|
47
|
+
sampleRate: 250,
|
|
48
|
+
minDb: 110,
|
|
49
|
+
maxDb: 160,
|
|
50
|
+
windowSize
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
spectrogram.setColormap('jet');
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Rendering
|
|
57
|
+
|
|
58
|
+
```ts
|
|
59
|
+
const canvas = document.querySelector('canvas')!;
|
|
60
|
+
|
|
61
|
+
spectrogram.render({
|
|
62
|
+
canvas,
|
|
63
|
+
width: 768,
|
|
64
|
+
height: 256,
|
|
65
|
+
timeRange: [0, 120], // seconds
|
|
66
|
+
freqRange: [0, 25] // Hz
|
|
67
|
+
});
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Call `render()` in a loop (`requestAnimationFrame`) for real-time updates.
|
|
71
|
+
|
|
72
|
+
## Feeding Data
|
|
73
|
+
|
|
74
|
+
Input data format:
|
|
75
|
+
|
|
76
|
+
```ts
|
|
77
|
+
Array<[timestamp_in_ms, value]>;
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
For example:
|
|
81
|
+
|
|
82
|
+
```ts
|
|
83
|
+
spectrogram.setData([
|
|
84
|
+
[1765945224240, 80001],
|
|
85
|
+
[1765945224244, 27639],
|
|
86
|
+
[1765945224248, 57144],
|
|
87
|
+
[1765945224252, 29916],
|
|
88
|
+
[1765945224256, 66871],
|
|
89
|
+
// ...
|
|
90
|
+
]);
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
You’re expected to manage buffering yourself (e.g. ring buffer).
|
|
94
|
+
|
|
95
|
+
## Colormaps
|
|
96
|
+
|
|
97
|
+
Built-in colormaps include:
|
|
98
|
+
|
|
99
|
+
- viridis
|
|
100
|
+
- inferno
|
|
101
|
+
- grayscale
|
|
102
|
+
- jet
|
|
103
|
+
- hot
|
|
104
|
+
- cool
|
|
105
|
+
- spring
|
|
106
|
+
- summer
|
|
107
|
+
- autumn
|
|
108
|
+
- winter
|
|
109
|
+
- bone
|
|
110
|
+
|
|
111
|
+
See `src/render/ColorMap.ts` for the color definitions.
|
|
112
|
+
|
|
113
|
+
## License
|
|
114
|
+
|
|
115
|
+
MIT License © 2025 AnyShake Project
|
package/package.json
CHANGED
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spectrogram-js",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "🎶 A simple and intuitive TypeScript library for generating spectrogram waterfall plots.",
|
|
5
|
-
"main": "dist/
|
|
6
|
-
"module": "dist/
|
|
5
|
+
"main": "dist/spectrogram-js.cjs.js",
|
|
6
|
+
"module": "dist/spectrogram-js.es.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/spectrogram-js.es.js",
|
|
12
|
+
"require": "./dist/spectrogram-js.cjs.js"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
8
15
|
"repository": {
|
|
9
16
|
"type": "git",
|
|
10
17
|
"url": "https://github.com/anyshake/spectrogram-js"
|