@vanduo-oss/music-player

Standalone HTML5 audio player for the Vanduo design system.

Transport controls, volume, optional shuffle and repeat, seek bar, playlist, frosted-glass surface, and a detachable floating mode. Framework-agnostic, with an optional Vue 3 component.

Install

pnpm add @vanduo-oss/music-player

Quick start

import VanduoMusicPlayer from "@vanduo-oss/music-player";
import "@vanduo-oss/music-player/css";

VanduoMusicPlayer.initPlayer(document.getElementById("player"), {
  tracks: [
    { name: "Track 1", url: "/audio/track-1.mp3" },
    { name: "Track 2", url: "/audio/track-2.mp3" },
  ],
  showProgress: true,
  showPlaylist: true,
});

Auto-init: add data-music-player and call Vanduo.init(). Vue 3 (optional peer):

<VdMusicPlayer :tracks="tracks" :options="{ glass: true }" @trackchange="onTrack" />

Documentation

• Docs & live demos — https://vanduo.dev
• Agent / LLM reference (full API, options, events) — SKILL.md
• Changelog — CHANGELOG.md

License

MIT © Vanduo