{"_id":"@awesome-web-projects/music-player","name":"@awesome-web-projects/music-player","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@awesome-web-projects/music-player","version":"1.0.0","description":"Framework-agnostic audio player Web Components with multiple skins. Powered by @awesome-web-projects/audio-engine.","author":{"name":"Daniel Barion","url":"https://github.com/danielbarion"},"license":"MIT","publishConfig":{"access":"public"},"type":"module","main":"./dist/music-player.cjs","module":"./dist/music-player.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/music-player.js","require":"./dist/music-player.cjs"}},"repository":{"type":"git","url":"git+https://github.com/danielbarion/music-player.git"},"keywords":["audio","player","web-components","custom-elements","shadow-dom","visualizer","web-audio-api","typescript"],"dependencies":{"@awesome-web-projects/audio-engine":"^1.0.0","lit":"^3.3.3"},"devDependencies":{"@types/node":"^25.9.1","typescript":"^5.5.0","vite":"^6.3.0","vite-plugin-dts":"^4.5.0"},"scripts":{"dev":"vite --open","build":"vite build --mode lib","build:demo":"vite build","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_id":"@awesome-web-projects/music-player@1.0.0","gitHead":"999378fcc917f96310f33175cf20976161a16b2d","bugs":{"url":"https://github.com/danielbarion/music-player/issues"},"homepage":"https://github.com/danielbarion/music-player#readme","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-svZGjrdHFt3ybbUV5o8M5CXlgsSA7HES2eALs7tPy3A4ZQ+1yLGVfRY9w7kAZcLf31DAQUlt7F1KlqmWdCsbaw==","shasum":"b92caa1f829b7a112ce2a41448d3a25a5a745ae9","tarball":"https://registry.npmjs.org/@awesome-web-projects/music-player/-/music-player-1.0.0.tgz","fileCount":5,"unpackedSize":181012,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGKEplTo/4ML0n39kJNZRLjtfeAV3aBsTH/AB3nOmJorAiEA8aun2vyjXuyLg+jAkVANZI/KZuG2j2vQwBsBLydnn/8="}]},"_npmUser":{"name":"danielbarion","email":"danielbarionn@gmail.com"},"directories":{},"maintainers":[{"name":"danielbarion","email":"danielbarionn@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/music-player_1.0.0_1780926419715_0.6951917369048279"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-08T13:46:59.511Z","1.0.0":"2026-06-08T13:46:59.858Z","modified":"2026-06-08T13:47:00.072Z"},"maintainers":[{"name":"danielbarion","email":"danielbarionn@gmail.com"}],"description":"Framework-agnostic audio player Web Components with multiple skins. Powered by @awesome-web-projects/audio-engine.","homepage":"https://github.com/danielbarion/music-player#readme","keywords":["audio","player","web-components","custom-elements","shadow-dom","visualizer","web-audio-api","typescript"],"repository":{"type":"git","url":"git+https://github.com/danielbarion/music-player.git"},"author":{"name":"Daniel Barion","url":"https://github.com/danielbarion"},"bugs":{"url":"https://github.com/danielbarion/music-player/issues"},"license":"MIT","readme":"# @awesome-web-projects/music-player\n\nFramework-agnostic audio player Web Components with multiple skins. Drop-in custom elements with Shadow DOM encapsulation — works in any framework or plain HTML. Powered by [`@awesome-web-projects/audio-engine`](https://github.com/AwesomeWebProjects/audio-engine).\n\n## Features\n\n- 5 player skins: Circular, Minimal, Waveform, Vinyl, and Glass\n- Standard Web Components (`customElements.define`) — no framework lock-in\n- Shadow DOM for full style encapsulation\n- Canvas-based audio visualizers (circular, waveform, glass)\n- Streaming audio loading via Web Workers\n- Partial loading — starts playing in seconds, preloads the full song in the background\n- Keyboard shortcuts (Space, N, B)\n- Configurable colors and volume\n- Full TypeScript support with exported types\n\n## Installation\n\n```bash\nnpm install @awesome-web-projects/music-player\n```\n\n## Usage\n\n### HTML\n\n```html\n<script type=\"module\">\n  import '@awesome-web-projects/music-player';\n</script>\n\n<music-player-circular color=\"rgba(97, 218, 251, 0.8)\"></music-player-circular>\n\n<script>\n  const player = document.querySelector('music-player-circular');\n  player.tracks = [\n    { name: 'Song One', artist: 'Artist A', url: '/songs/one.mp3' },\n    { name: 'Song Two', artist: 'Artist B', url: '/songs/two.mp3' },\n  ];\n</script>\n```\n\n### JavaScript / TypeScript\n\n```typescript\nimport { defineCircularPlayer, CircularPlayerElement } from '@awesome-web-projects/music-player';\n\n// Elements are auto-registered on import, but you can also register individually:\n// defineCircularPlayer();\n\nconst player = document.createElement('music-player-circular') as CircularPlayerElement;\nplayer.tracks = [\n  { name: 'Song One', artist: 'Artist A', url: '/songs/one.mp3' },\n  { name: 'Song Two', artist: 'Artist B', url: '/songs/two.mp3' },\n];\nplayer.setAttribute('color', 'rgba(97, 218, 251, 0.8)');\ndocument.body.appendChild(player);\n```\n\n### Framework Integration\n\nWorks in React, Vue, Svelte, Angular, or any framework that supports custom elements:\n\n```tsx\n// React example\nfunction App() {\n  const playerRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    if (playerRef.current) {\n      (playerRef.current as any).tracks = [\n        { name: 'Song', artist: 'Artist', url: '/song.mp3' },\n      ];\n    }\n  }, []);\n\n  return <music-player-minimal ref={playerRef} color=\"rgba(97, 218, 251, 0.8)\" />;\n}\n```\n\n## Available Elements\n\n| Element | Tag | Description |\n|---------|-----|-------------|\n| `CircularPlayerElement` | `<music-player-circular>` | Circular visualizer with frequency bars around a disc |\n| `MinimalPlayerElement` | `<music-player-minimal>` | Clean, compact player with progress bar |\n| `WaveformPlayerElement` | `<music-player-waveform>` | Waveform bar visualizer |\n| `VinylPlayerElement` | `<music-player-vinyl>` | Spinning vinyl disc animation |\n| `GlassPlayerElement` | `<music-player-glass>` | Frosted glass effect with frequency bars |\n\n## Attributes\n\n| Attribute | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `color` | `string` | `'rgba(97, 218, 251, 0.8)'` | Primary color for the player UI |\n| `initial-volume` | `string` | `'0.5'` | Initial volume (0-1) |\n| `thread` | `'main' \\| 'worker'` | `'worker'` | Audio fetching strategy |\n| `enable-keyboard` | `'true' \\| 'false'` | `'true'` | Enable keyboard shortcuts |\n\n## Properties\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `tracks` | `Track[]` | Array of tracks (set via JavaScript, not attribute) |\n\n### Track\n\n```typescript\ninterface Track {\n  name: string;\n  artist: string;\n  url: string;\n}\n```\n\n## Keyboard Shortcuts\n\n| Key | Action |\n|-----|--------|\n| Space | Play / Pause |\n| N | Next track |\n| B | Previous track |\n\n## Selective Registration\n\nBy default, all elements are registered on import. To register only specific elements:\n\n```typescript\nimport { defineCircularPlayer } from '@awesome-web-projects/music-player';\n\ndefineCircularPlayer(); // Only registers <music-player-circular>\n```\n\nAvailable registration functions: `defineCircularPlayer`, `defineMinimalPlayer`, `defineWaveformPlayer`, `defineVinylPlayer`, `defineGlassPlayer`, `defineAllPlayers`.\n\n## Related Packages\n\n- [`@awesome-web-projects/audio-engine`](https://github.com/AwesomeWebProjects/audio-engine) — The core audio engine this package is built on\n- [`@awesome-web-projects/react-player`](https://github.com/AwesomeWebProjects/react-player) — React components using the same engine\n\n## Development\n\n```bash\nnpm install\nnpm run dev          # Start demo dev server\nnpm run build        # Build library\nnpm run build:demo   # Build demo page\nnpm run typecheck    # Type check\n```\n\n## License\n\nMIT","readmeFilename":"README.md","_rev":"1-d83dd96cd1b26d0007f88232fe4fd8fb"}