vue-aplayer

SevenOutmanMIT活跃维护

基于 Vue 2.x 的 HTML5 音乐播放器组件，封装 APlayer，几行代码就能在 Vue 项目里嵌入带播放列表和歌词的音乐播放界面。

:cake: Easy-to-use music player for Vue 2.x

1.6.1发布于 2018-06-25 07:18 UTC1,331star194fork同步于 2026-11-10 17:51 UTC

音乐播放器 Vue组件 HTML5音频播放列表歌词

对比 GitHub 官网 aplayer awesome-vue html5-music-player music music-player

怎么上手

由 README 提炼，执行前请确认

原文

npm install vue-aplayer

硬件要求按 README 说明

README 未说明，纯前端组件，无 GPU 或显存要求

下载：源码 zip·GitHub Releases（安装包）本站不镜像安装包

项目说明

由 README 自动翻译提炼

没人工点评？写下你的经验

Vue 2.x 的 APlayer 音乐播放器组件，几行 props 就能给页面加上带歌词和播放列表的播放条

基于 Vue 2.x 的 HTML5 音乐播放器组件，封装 APlayer，几行代码就能在 Vue 项目里嵌入带播放列表和歌词的音乐播放界面。

核心能力

用 props 传入 music 对象即可渲染播放器
支持歌词滚动显示
播放列表带循环与随机播放控制
支持自定义主题色与自适应主题色
支持 HLS 流播放，且无第三方依赖、gzip 后 16KB

容易踩的坑

仅支持 Vue 2.x，Vue 3 项目不适用；README 顶部提示先阅读 Future of vue-aplayer 讨论再决定是否使用；音频与封面需自备 URL，组件不内置曲库

内容由模型根据 README 生成，可能不完整或不准确，以官方文档为准。看原文 README

用户点评

登录用户的真实使用记录，可按版本和硬件筛选

共 0 条

还没有人点评。第一个说出真实体验的人最有价值。

README 原文

未翻译

在 GitHub 打开

Please refer to Future of vue-aplayer before you continue.

Vue implementation of APlayer prototype. Demo

Screenshot

Features

Beautiful clean UI
Lyrics scroll
Playlist with repeat & shuffle controls
Custom theme color / Self-adapting theme color
Drag and place anywhere
Mutex play
HLS support
Easy props and API
Dependency free and light-weight (gzipped 16KB)

Using Vue-APlayer in your project? Let me know!

Usage

<aplayer autoplay
  :music="{
    title: 'secret base~君がくれたもの~',
    artist: 'Silent Siren',
    src: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
    pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
  }"
/>

Full documentation

中文文档

Changelog

Detailed changes fro each release are documented in the release notes.

Contribution

Feel free to open an issue if you find a bug or have a nice idea.

PRs are welcome.

The name

When referring to Vue-APlayer, the name should be written in exactly the same case.
When referring to its versions, either [email protected] (GitHub) or [email protected] (npm) is fine.

Related projects

APlayer: Prior art
@moefe/vue-aplayer: Another Vue implementation of APlayer by @u3u

Thanks

@DIYgod, for creating APlayer and sharing cloud storage for hosting Vue-APlayer's demo page media resources.

License

Vue-APlayer is MIT Licensed.

vue-aplayer

怎么上手

项目说明