登录 注册

vue-aplayer

去点 Star
图像、视频与音频 aplayerawesome-vuehtml5-music-playermusicmusic-playervue
1,331
Stars
194
Forks
16
Watchers
87
Open Issues
MIT
许可证
Vue
语言
2016-11-22
创建时间
2026-11-11
最近更新

项目能做什么

简单易用的 Vue 2.x 音乐播放器组件。
来源：AI 基于仓库事实生成 · 内容以仓库实际 README 为准

使用说明 查看原始 README 原仓库文档

中文使用说明暂未生成。下面保留原仓库 README 摘录，命令与配置均以原文为准。
原始 README 摘录（英文原文，节选前 3000 字符） 
<p align="center">
<img src="https://github.com/SevenOutman/vue-aplayer/blob/develop/src/assets/vue-aplayer-round.png" alt="Vue-APlayer" width="100">
</p>
<h1 align="center">Vue-APlayer</h1>

## Please refer to [**Future of vue-aplayer**](https://github.com/SevenOutman/vue-aplayer/discussions/236) before you continue.

Vue implementation of [APlayer](https://github.com/MoePlayer/APlayer) prototype.
[**Demo**](https://sevenoutman.github.io/vue-aplayer)


[![Travis](https://img.shields.io/travis/SevenOutman/vue-aplayer.svg?style=flat-square)](https://travis-ci.org/SevenOutman/vue-aplayer)
[![npm](https://img.shields.io/npm/v/vue-aplayer.svg?style=flat-square)](https://www.npmjs.com/package/vue-aplayer)
[![npm](https://img.shields.io/npm/dt/vue-aplayer.svg?style=flat-square)](https://www.npmjs.com/package/vue-aplayer)
[![devDependency Status](https://img.shields.io/david/dev/SevenOutman/vue-aplayer.svg?style=flat-square)](https://david-dm.org/SevenOutman/vue-aplayer#info=devDependencies)

[![Hubble](https://img.shields.io/badge/since-2016-409eff.svg?style=flat-square)](https://hubble.js.org/#/?owner=SevenOutman&repo=vue-aplayer&start)
[![GitHub commit activity the past year](https://img.shields.io/github/commit-activity/y/SevenOutman/vue-aplayer.svg?style=flat-square)](https://github.com/SevenOutman/vue-aplayer/commits/develop)
[![GitHub last commit](https://img.shields.io/github/last-commit/SevenOutman/vue-aplayer/develop.svg?style=flat-square)](https://github.com/SevenOutman/vue-aplayer/commits/develop)
[![Dependents on GitHub](https://img.shields.io/badge/Dependents-200+-FF53A1.svg?style=flat-square)](https://github.com/SevenOutman/vue-aplayer/network/dependents?dependent_type=REPOSITORY)
[![Discord](https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg?style=flat-square)](https://discord.gg/e3SeMJE)

![Screenshot](https://i.loli.net/2018/05/26/5b0912ce2e250.png)


### 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!](https://github.com/SevenOutman/vue-aplayer/issues/26)


## Usage

```HTML
<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**](https://github.com/SevenOutman/vue-aplayer/blob/develop/docs/README.md)

 [**中文文档**](https://github.com/SevenOutman/vue-aplayer/blob/develop/docs/README.zh-CN.md)


## Changelog

Detailed changes fro each release are documented in the [release notes](https://github.com/SevenOutman/vue-aplayer/releases).


## Contribution

Feel free to [open an issue](https://github.com/SevenOutman/vue-aplayer/issues) if you find a bu
阅读完整原文

项目深度分析 AI 生成

现代化升级与跨框架 Pro 版音频组件库

产品构想基于原 APlayer 美观 UI 理念，重构成支持 Vue 3、React 等现代框架的专业音频播放器组件，提供高级功能插件（音频波形可视化、空间音频模拟、AB复读等）。
核心功能Vue 3/TS 支持、波形图可视化（Waveform）、可交互歌词打点、HLS/加密流播放支持、高度主题化定制。
目标用户现代前端开发者、在线教育平台、播客网站开发者。
难度/周期中等 · 1 - 2 个月 · 成本：极低（主要为开发和文档站点维护成本）
收费模式双重许可协议（Dual-license）或基础版开源 + Pro 版商用授权（售卖高级插件包、商业许可）。
竞争风险开源替代品丰富（如 Howler.js、APlayer 其他分支），若无独特杀手级功能转化率极低。
依据 已验证事实（原项目仅限 Vue 2.x 且 README 引导至讨论区讨论未来）结合 AI推测

创作者音频嵌入与防盗链托管服务 (SaaS Widget)

产品构想将轻量播放器封装为无需复杂配置的 Embed Widget，面向 Notion 创作者、独立博客站长及数字作品卖家提供包含音频托管、防盗链、播放统计与打赏功能的一体化服务。
核心功能一行代码嵌入、音频流防盗防下载、访客听歌时长与行为分析面板、自定义品牌水印与赞赏按钮。
目标用户独立音乐人、播客主、网课讲师、个人博客作者。
难度/周期较高 · 2 - 3 个月 · 成本：中等（对象存储与 CDN 流量成本、服务器成本）
收费模式SaaS 订阅制（按存储量、流量及高级分析功能分级收费）。
竞争风险流量成本难以预估，若用户滥用盗版音源可能引发版权法律风险。
依据 AI推测

垂直领域（语言学习/播客复读）前端播放器定制插件

产品构想基于原项目核心的滚动歌词与播放控制逻辑，深度改造成语言教学或听力训练专用的复读播放器组件/工具。
核心功能双语歌词/字幕对照、单句循环播放（AB点）、变速不变调调节、点击单词查词交互集成、音素对齐波形展示。
目标用户在线教育开发商、语言学习类小程序/Web 应用开发者。
难度/周期中等 · 1 个月 · 成本：极低（代码开发与技术验证成本）
收费模式单一源码商用授权售卖，或作为独立微 SaaS 工具收取订阅费。
竞争风险细分市场受众较窄，对音频时间轴对齐精度要求高。
依据 尚需验证的假设
AI 基于仓库公开数据分析生成，含推测成分，不构成收益承诺。
报告会保存到 个人中心

竞品与相似项目 GitHub Search 真实检索

项目中文简介Stars语言
DIYgod/APlayer 中文介绍暂未生成
:lollipop: Wow, such a beautiful HTML5 music player
 7,693 JavaScript
rRemix/APlayer 中文介绍暂未生成
Android Music Player
 1,862 Kotlin
MoePlayer/hexo-tag-aplayer 中文介绍暂未生成
Embed aplayer in Hexo posts/pages
 749 JavaScript
MoePlayer/APlayer-Typecho 中文介绍暂未生成
在线音乐播放器插件 for typecho 1.0
 490 PHP
以上为通过 GitHub 官方 Search API 检索的相似项目，功能差异与优劣势需进一步人工确认，配置 AI 后可生成对比分析。

项目优势与风险

技术成熟度创建于 2016-11-22，近 30 天仍在推送，发布过 15 个 Release
社区活跃Star 1,331 / Fork 194 / Issue 87（数据支持，可自行核实）
许可证MIT
主要风险上游项目方向可能变化；同赛道竞争者较多（见竞品表）；热度与需求不完全等价

安装与使用

此项目未提供 Docker 镜像，安装步骤以原仓库 README 为准（涉及依赖安装与环境配置，对新手门槛较高）。