{"_id":"@codeniu/vue3-audio-player","_rev":"2-6045dbbe64aeba44270456f1dce5363e","name":"@codeniu/vue3-audio-player","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@codeniu/vue3-audio-player","version":"1.0.0","keywords":["vue3","audio","player","vue-audio","vue-music","audio-player","component","vue3-audio-player","音频","音乐","播放器","codeniu","mp3"],"author":"","license":"MIT","_id":"@codeniu/vue3-audio-player@1.0.0","maintainers":[{"name":"codeniu","email":"codeniu@163.com"}],"dist":{"shasum":"60cb4b5ae28ea90ad1bca903687902f8d9228c97","tarball":"https://registry.npmjs.org/@codeniu/vue3-audio-player/-/vue3-audio-player-1.0.0.tgz","fileCount":5,"integrity":"sha512-montWWWnCaP6MeUFGo5LcmIpGAhKWbwdXHOTj2NtichyX+0JeJLgAKGOxbZ/BwMh3lc6p7xoIFD+zDOK4riIMw==","signatures":[{"sig":"MEYCIQCK5ztJ5ePYsQzsSvGZ2ccd1kGi6FBbyCKF1R7Nw4IvlAIhALAQHEkQh4zx/N3GZaaGPd9493y79R/e90LibSBdIDDn","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":55333},"main":"dist/vue3-audio-player.umd.js","type":"module","types":"dist/index.d.ts","module":"dist/vue3-audio-player.es.js","gitHead":"037a6a38d08ff638891947ed8c4f13165268114f","scripts":{"dev":"cross-env BUILD_MODE=dev vite","lint":"eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix","build":"vite build","format":"prettier --write .","preview":"vite preview","build:docs":"cross-env BUILD_MODE=dev vite build"},"_npmUser":{"name":"codeniu","email":"codeniu@163.com"},"_npmVersion":"10.2.3","description":"A Vue 3 audio player component","directories":{},"_nodeVersion":"18.19.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","vite":"^6.2.4","eslint":"^9.23.0","vue-tsc":"^2.2.8","prettier":"^3.5.3","cross-env":"^7.0.3","typescript":"^5.8.2","@types/node":"^22.14.0","eslint-plugin-vue":"^10.0.0","@vitejs/plugin-vue":"^5.2.3","eslint-config-prettier":"^10.1.1","eslint-plugin-prettier":"^5.2.5","@typescript-eslint/parser":"^8.29.0","@typescript-eslint/eslint-plugin":"^8.29.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-audio-player_1.0.0_1743646897070_0.13055692864117519","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@codeniu/vue3-audio-player","version":"1.1.0","type":"module","description":"A Vue 3 audio player component","main":"dist/vue3-audio-player.umd.js","module":"dist/vue3-audio-player.es.js","types":"dist/index.d.ts","scripts":{"dev":"cross-env BUILD_MODE=dev vite","build":"vite build","build:docs":"cross-env BUILD_MODE=dev vite build","preview":"vite preview","lint":"eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix","format":"prettier --write ."},"keywords":["vue3","audio","player","vue-audio","vue-music","audio-player","component","vue3-audio-player","音频","音乐","播放器","codeniu","mp3"],"author":{"name":"https://github.com/Codeniu"},"repository":{"type":"git","url":"git+https://github.com/Codeniu/vue3-audio-player.git"},"license":"MIT","devDependencies":{"@types/node":"^22.14.0","@typescript-eslint/eslint-plugin":"^8.29.0","@typescript-eslint/parser":"^8.29.0","@vitejs/plugin-vue":"^5.2.3","cross-env":"^7.0.3","eslint":"^9.23.0","eslint-config-prettier":"^10.1.1","eslint-plugin-prettier":"^5.2.5","eslint-plugin-vue":"^10.0.0","prettier":"^3.5.3","typescript":"^5.8.2","vite":"^6.2.4","vue":"^3.5.13","vue-tsc":"^2.2.8"},"_id":"@codeniu/vue3-audio-player@1.1.0","gitHead":"7245e85dd80602be1783d4736218ee12517f0270","bugs":{"url":"https://github.com/Codeniu/vue3-audio-player/issues"},"homepage":"https://github.com/Codeniu/vue3-audio-player#readme","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-CkptHgU1zYqkEdMsB+Xz7fN7u7HrbnIZAx6kyDXtD/OyybUxI//ZjdbxicOJ3YpZnJjQOatWz1LAg/SAMGRs1A==","shasum":"a041690d73268350bbd13c1baecfcb59d201937b","tarball":"https://registry.npmjs.org/@codeniu/vue3-audio-player/-/vue3-audio-player-1.1.0.tgz","fileCount":5,"unpackedSize":119285,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEQORW/yV/I7bPfTQ4s5s2EJsP7z7Sh/8IK5ZCIEFrNYAiEAoTWO/Df+D8ZYnIMp/oabYPDRQnvdXhv1ctyq+mIHi5w="}]},"_npmUser":{"name":"codeniu","email":"codeniu@163.com"},"directories":{},"maintainers":[{"name":"codeniu","email":"codeniu@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue3-audio-player_1.1.0_1743665091818_0.1358932352828881"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-03T02:21:36.957Z","modified":"2025-04-03T07:24:52.180Z","1.0.0":"2025-04-03T02:21:37.259Z","1.1.0":"2025-04-03T07:24:52.008Z"},"license":"MIT","keywords":["vue3","audio","player","vue-audio","vue-music","audio-player","component","vue3-audio-player","音频","音乐","播放器","codeniu","mp3"],"description":"A Vue 3 audio player component","maintainers":[{"name":"codeniu","email":"codeniu@163.com"}],"readme":"# Vue3 Audio Player API 文档\n\nVue3 Audio Player 是一个基于 Vue3 的音频播放器组件，提供了丰富的功能和自定义选项。\n\n[Try the demo](https://codeniu.github.io/vue3-audio-player/)\n\n![](https://codeniu-picbed.oss-cn-hangzhou.aliyuncs.com/picbed/Snipaste_2025-04-03_11-05-22.jpg)\n\n\n\n\n\n## 安装\n使用 npm 安装 Vue3 Audio Player：\n```bash\nnpm install @codeniu/vue3-audio-player\n```\n## 引入\n在你的 Vue 项目中引入 Vue3 Audio Player：\n```js\nimport { Vue3AudioPlayer } from '@codeniu/vue3-audio-player'\nimport '@codeniu/vue3-audio-player/dist/vue3-audio-player.css'\n```\n## 使用\n\n\n在你的组件中使用 Vue3 Audio Player：\n\n```vue\n<template>\n  <vue3-audio-player\n    :audioList=\"audioList\"\n    themeColor=\"#EC4141\"\n    @play=\"handlePlay\"\n    @pause=\"handlePause\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nconst audioList = [\n  {\n    src: 'path/to/audio1.mp3',\n    title: '歌曲1',\n    artist: '艺术家1',\n    album: '专辑1'\n  },\n  'path/to/audio2.mp3'\n]\n\nconst handlePlay = () => {\n  console.log('开始播放')\n}\n\nconst handlePause = () => {\n  console.log('暂停播放')\n}\n</script>\n```\n\n## 属性 (Props)\n\n| 属性名 | 类型 | 默认值 | 说明 |\n|--------|------|--------|------|\n| audioList | `Array<AudioItem \\| string>` | `[]` | 音频列表，支持对象数组或字符串数组 |\n| showPlayButton | `boolean` | `true` | 是否显示播放/暂停按钮 |\n| showPrevButton | `boolean` | `true` | 是否显示上一曲按钮 |\n| showNextButton | `boolean` | `true` | 是否显示下一曲按钮 |\n| showVolumeButton | `boolean` | `true` | 是否显示音量控制按钮 |\n| showProgressBar | `boolean` | `true` | 是否显示进度条 |\n| beforePlay | `(callback: (state: boolean) => void) => void` | `undefined` | 播放前的钩子函数 |\n| beforePrev | `(callback: (state: boolean) => void) => void` | `undefined` | 切换上一曲前的钩子函数 |\n| beforeNext | `(callback: (state: boolean) => void) => void` | `undefined` | 切换下一曲前的钩子函数 |\n| isLoop | `boolean` | `true` | 是否循环播放列表 |\n| isAutoPlayNext | `boolean` | `true` | 播放结束后是否自动播放下一曲 |\n| progressInterval | `number` | `500` | 进度更新间隔时间（毫秒） |\n| showPlaybackRate | `boolean` | `true` | 是否显示播放速率控制 |\n| showPlayLoading | `boolean` | `true` | 是否显示加载动画 |\n| playbackRates | `number[]` | `[0.5, 1, 1.5, 2]` | 可选的播放速率列表 |\n| themeColor | `string` | `'#EC4141'` | 主题色 |\n| disabledProgressDrag | `boolean` | `false` | 是否禁用进度条拖拽 |\n| disabledProgressClick | `boolean` | `false` | 是否禁用进度条点击 |\n\n## 事件 (Events)\n\n| 事件名 | 参数 | 说明 |\n|--------|------|------|\n| pause | - | 音频暂停时触发 |\n| play-prev | - | 切换到上一曲时触发 |\n| play-next | - | 切换到下一曲时触发 |\n| timeupdate | - | 播放时间更新时触发 |\n| durationchange | `event: Event` | 音频时长变化时触发 |\n| ended | `event: Event` | 音频播放结束时触发 |\n| progress-start | `event: Event` | 开始拖动进度条时触发 |\n| progress-end | `event: Event` | 结束拖动进度条时触发 |\n| progress-move | `event: Event` | 拖动进度条过程中触发 |\n| progress-click | `event: Event` | 点击进度条时触发 |\n| playing | - | 音频正在播放时触发 |\n| play | - | 音频开始播放时触发 |\n| play-error | `error: any` | 播放出错时触发 |\n\n## 插槽 (Slots)\n\n| 插槽名 | 说明 |\n|--------|------|\n| play-start | 自定义播放按钮 |\n| play-pause | 自定义暂停按钮 |\n| play-prev | 自定义上一曲按钮 |\n| play-next | 自定义下一曲按钮 |\n\n\n## 方法\n\n| 方法名 | 说明 | 参数 |\n|--------|------|------|\n| play | 播放音频 | `opts?: { currentTime?: number }` 可选的开始播放时间（秒） |\n| pause | 暂停播放 | - |\n| playNext | 播放下一曲 | - |\n| playPrev | 播放上一曲 | - |\n| handleSetPlaybackRate | 设置播放速率 | `rate: number` 播放速率值 |\n| handleVolumeIconTouchstart | 显示/隐藏音量控制条 | - |\n| handleVolumePanmove | 调节音量大小 | `event: MouseEvent \\| TouchEvent` 鼠标或触摸事件 |\n| handleClickProgressWrap | 点击进度条跳转播放 | `event: MouseEvent \\| TouchEvent` 鼠标或触摸事件 |\n\n\n## 类型定义\n\n```typescript\ninterface AudioItem {\n  src: string;      // 音频源地址\n  title?: string;   // 音频标题\n  artist?: string;  // 艺术家\n  album?: string;   // 专辑名\n  artwork?: {       // 封面图片\n    src: string;\n    sizes: string;\n    type: string;\n  }[];\n}\n```\n\n\n## 注意事项\n1. audioList 支持两种格式：\n   - 字符串数组：直接传入音频文件地址\n   - 对象数组：包含更多音频信息，支持媒体会话 API\n2. 钩子函数 ( beforePlay 、 beforePrev 、 beforeNext ) 可用于拦截相应操作，需要调用回调函数并传入 true 或 false 来决定是否继续操作\n3. 主题色 themeColor 会影响播放器的按钮、进度条等元素的颜色\n4. 播放速率控制支持自定义速率列表，通过 playbackRates 属性配置\n5. 组件支持移动端触摸操作，包括进度条拖拽和音量调节","readmeFilename":"README.md","homepage":"https://github.com/Codeniu/vue3-audio-player#readme","repository":{"type":"git","url":"git+https://github.com/Codeniu/vue3-audio-player.git"},"author":{"name":"https://github.com/Codeniu"},"bugs":{"url":"https://github.com/Codeniu/vue3-audio-player/issues"}}