waveframe 0.1.1 → 0.1.3
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 +54 -16
- package/package.json +18 -4
package/README.md
CHANGED
|
@@ -1,40 +1,78 @@
|
|
|
1
1
|
# Waveframe
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
A high-performance, professional React audio player featuring SoundCloud-style waveforms, built-in audio analysis, and deep customization.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/waveframe)
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
[](https://github.com/gradippp/waveframe)
|
|
4
8
|
|
|
5
9
|
## Features
|
|
6
10
|
|
|
7
|
-
- **
|
|
8
|
-
- **
|
|
9
|
-
- **
|
|
10
|
-
- **
|
|
11
|
+
- **Ultra-Efficient Rendering**: Uses a dual-layer CSS-clipped canvas engine. No 60fps re-draws during playback, saving CPU and battery.
|
|
12
|
+
- **Auto-Analysis**: Don't have peak data? Just provide a URL. Waveframe uses the Web Audio API to analyze and generate waveforms on-the-fly.
|
|
13
|
+
- **Modern Theming**: Fully customizable with a single theme object. Supports deep navy dark modes and crisp light themes.
|
|
14
|
+
- **Responsive & Fluid**: Proportional scaling ensures your waveform looks perfect on any screen size, from mobile to ultra-wide.
|
|
15
|
+
- **Developer First**: Built with TypeScript, fully memoized, and includes a live [Configuration Playground](https://gradippp.github.io/waveframe).
|
|
11
16
|
|
|
12
17
|
## Installation
|
|
13
18
|
|
|
14
19
|
```bash
|
|
15
20
|
pnpm add waveframe
|
|
21
|
+
# or
|
|
22
|
+
npm install waveframe
|
|
16
23
|
```
|
|
17
24
|
|
|
18
|
-
|
|
25
|
+
> **Note**: Waveframe requires **React 19+**.
|
|
26
|
+
|
|
27
|
+
## Quick Start
|
|
19
28
|
|
|
20
29
|
```tsx
|
|
21
30
|
import { WaveframePlayer } from 'waveframe';
|
|
31
|
+
import 'waveframe/style.css'; // Essential styles
|
|
22
32
|
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
function App() {
|
|
33
|
+
const App = () => {
|
|
26
34
|
return (
|
|
27
35
|
<WaveframePlayer
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
artist="Artist Name"
|
|
36
|
+
title="Electronic Sunset"
|
|
37
|
+
artist="Digital Nomad"
|
|
38
|
+
audioUrl="https://example.com/audio.mp3"
|
|
39
|
+
artworkUrl="https://example.com/cover.jpg"
|
|
33
40
|
/>
|
|
34
41
|
);
|
|
35
|
-
}
|
|
42
|
+
};
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## API Reference
|
|
46
|
+
|
|
47
|
+
### Props
|
|
48
|
+
|
|
49
|
+
| Prop | Type | Default | Description |
|
|
50
|
+
| :--- | :--- | :--- | :--- |
|
|
51
|
+
| `audioUrl` | `string` | **Required** | Direct link to your audio file. |
|
|
52
|
+
| `peaks` | `number[]` | `undefined` | Optional array of normalized peaks (0-1). Triggers **Auto-Analysis** if omitted. |
|
|
53
|
+
| `title` | `string` | `undefined` | Track title. |
|
|
54
|
+
| `artist` | `string` | `undefined` | Artist name. |
|
|
55
|
+
| `artworkUrl` | `string` | `undefined` | Cover art image URL. |
|
|
56
|
+
| `theme` | `WaveframeTheme` | `Light` | Object to customize colors (see below). |
|
|
57
|
+
| `resolution` | `number \| 'auto'`| `'auto'` | Target number of waveform bars. |
|
|
58
|
+
| `barWidth` | `number` | `2` | Width of waveform bars in pixels. |
|
|
59
|
+
| `barGap` | `number` | `1` | Space between bars in pixels. |
|
|
60
|
+
| `height` | `number` | `80` | Height of the waveform in pixels. |
|
|
61
|
+
| `autoAnalyze`| `boolean` | `true` | Automatically generate peaks if missing. |
|
|
62
|
+
|
|
63
|
+
### Theme Object
|
|
64
|
+
|
|
65
|
+
Customizing the player's palette is straightforward:
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
theme={{
|
|
69
|
+
bg: "#111827", // Main card background
|
|
70
|
+
primary: "#3b82f6", // Accent (progress & play button)
|
|
71
|
+
text: "#f9fafb", // Text color
|
|
72
|
+
border: "#1f2937" // Border and divider lines
|
|
73
|
+
}}
|
|
36
74
|
```
|
|
37
75
|
|
|
38
76
|
## License
|
|
39
77
|
|
|
40
|
-
MIT
|
|
78
|
+
MIT © [Agradip](mailto:me@agradip.fyi)
|
package/package.json
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "waveframe",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "A customizable React audio player
|
|
3
|
+
"version": "0.1.3",
|
|
4
|
+
"description": "A high-performance, customizable React audio player with SoundCloud-style waveforms and built-in audio analysis.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/waveframe.umd.js",
|
|
7
7
|
"module": "./dist/waveframe.es.js",
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
|
+
"homepage": "https://gradippp.github.io/waveframe",
|
|
10
|
+
"bugs": {
|
|
11
|
+
"url": "https://github.com/gradippp/waveframe/issues"
|
|
12
|
+
},
|
|
9
13
|
"exports": {
|
|
10
14
|
".": {
|
|
11
15
|
"types": "./dist/index.d.ts",
|
|
@@ -17,8 +21,18 @@
|
|
|
17
21
|
"files": [
|
|
18
22
|
"dist"
|
|
19
23
|
],
|
|
20
|
-
"keywords": [
|
|
21
|
-
|
|
24
|
+
"keywords": [
|
|
25
|
+
"react",
|
|
26
|
+
"audio-player",
|
|
27
|
+
"waveform",
|
|
28
|
+
"soundcloud-style",
|
|
29
|
+
"audio-visualizer",
|
|
30
|
+
"web-audio-api",
|
|
31
|
+
"component-library",
|
|
32
|
+
"typescript",
|
|
33
|
+
"tailwind-css"
|
|
34
|
+
],
|
|
35
|
+
"author": "Agradip <me@agradip.fyi>",
|
|
22
36
|
"license": "MIT",
|
|
23
37
|
"repository": {
|
|
24
38
|
"type": "git",
|