Wow, such a beautiful HTML5 music player

Last update: Jul 4, 2022

ADPlayer

APlayer

Wow, such a lovely HTML5 music player

npm npm npm size Travis devDependency Status donate

Introduction

image

APlayer is a lovely HTML5 music player.

APlayer supports:

  • Media formats - MP4 H.264 (AAC or MP3) - WAVE PCM - Ogg Theora Vorbis
  • Features - Playlist - Lyrics

Using APlayer on your project? Let me know!

Docs

中文文档

Join the Discussion

Related Projects

Plugins

Tooling

Who use APlayer?

  • bilibili: 国内知名的视频弹幕网站
  • 黑客派: 程序员和设计师的聚集地,一个活跃的小众社区
  • 浙江大学 CC98 论坛: 浙江大学校网内规模最大的论坛,中国各大学中较活跃的 BBS 之一
  • Jelly Rue: Jelly Rue, an indie pop-rock band from Tartu.
  • Opus: An artist-exploration data visualization application
  • 站长之家: 针对中文站点提供资讯、技术、资源、服务
  • LLSupport: This site provides a lot of information about LoveLive
  • 歌词千寻: 每日更新的 LRC 歌词网站
  • iSearch: 一个提供 iTunes 搜索,试听,高清专辑封面获取,查看最新音乐动态等综合性平台
  • LRC 歌词编辑器: 一款非常实用的在线 LRC 歌词编辑器
  • Аэростатика
  • HealthDig: 每天只需两分钟的重点新闻资讯
  • Feel free to submit yours in Let me know!

Current Premium Sponsors

Special Sponsors

OpenCollective backers

Contributors

This project exists thanks to all the people who contribute.

Donate

APlayer is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

One-time Donations

We accept donations through these channels:

Recurring Pledges

Recurring pledges come with exclusive perks, e.g. having your name or your company logo listed in the APlayer GitHub repository and this website.

  • Become a backer or sponsor via OpenCollective
  • E-mail us: i#html.love

Author

APlayer © DIYgod, Released under the MIT License.
Authored and maintained by DIYgod with help from contributors (list).

Blog · GitHub @DIYgod · Twitter @DIYgod · Telegram Channel @awesomeDIYgod

GitHub

https://github.com/DIYgod/APlayer
Comments
  • 1. Properly handle the Promise returned by

    Background

    In modern browsers, the HTMLMediaElement.play() method is not always synchronous. According to MDN:

    The HTMLMediaElement.play() method attempts to begin playback of the media and returns a Promise which is fulfilled when the playback has been successfully started, and which is rejected if playback fails to begin for any reason (such as permission issues or other problems).

    It seems that "permission issues" cover mobile/recent desktop browser decisions to ignore autoplay. Google has published an article about this here which points to this example page. Running that example on an iPhone indeed reports a permissions issue in the output.

    In fact, the "permissions" issue for autoplay is no longer limited to mobile contexts. Safari now disables autoplay functionality on the Desktop by default as well. Opening Google's example page in Safari shows this error:

    Attempting to play automatically... The play() Promise rejected! Use the Play button instead. {"code":35,"name":"NotAllowedError","message":"The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.","line":124,"column":47,"sourceURL":"https://googlechrome.github.io/samples/play-return-promise/"}

    Google has also published a document that goes into greater detail about the causes of this. Of particular interest is this note:

    Note: Calling video.pause() isn't the only way to interrupt a video. You can entirely reset the video playback state, including the buffer, with video.load() and video.src = ''.

    (Note that the same applies for audio.)

    In APlayer

    Currently, APlayer does not attempt to capture the returned Promise. This is the latest from time of writing: https://github.com/MoePlayer/APlayer/blob/81002c0bf93425884bd565147ad3c2b85762ca44/src/APlayer.js#L738-L745

    Proper handling of the <audio> element requires handling the Promise. It is exceptionally simple to cause exceptions with the <audio> API (see: #155).

    In fact, the basic Demo Page shows this in the console directly after the APlayer version report:

    [Error] Unhandled Promise Rejection: NotAllowedError (DOM Exception 35): The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

    I have created a JSFiddle that shows a range of ways to deal with the HTMLMediaElement API. Try each of the four buttons and check the JavaScript console and output block. Please also take a look at the implementation of the best() function. It shows a unified way to handle the API in environments that return Promises and undefined.

    I would highly recommend that the APlayer codebase be updated to properly handle Promises. This may also require holding a reference to the most recent Promise returned by the HTMLMediaElement.play() function (as well as a "playPending" boolean?) so that you can chain other calls (pause(), load(), etc.) off of it.

    Reviewed by ericdrobinson at 2017-12-31 19:12
  • 2. 无法解析只精确到秒的歌词

    [00:59]上路 巩州遇虎熊 (熊山君,寅将军)
    [01:01]五百年前一场疯 腾宵又是孙悟空 (孙悟空)
    [01:05]失马 鹰愁涧飞白龙 (白龙马)
    [01:07]沙河阻断路难通 福陵山中收天蓬 (沙和尚,猪八戒)
    [01:11]岭上 前行逆黄风 (黄风怪)
    [01:14]七星不照波月洞 千年白骨化阴风 (奎木狼,白骨精)
    [01:18]鱼篮 网通天一尾红 (灵感大王)
    [01:20]紫金葫芦二道童 九尾老狐敢压龙 (金、银角大王,压龙大仙)
    [01:24]白虹坠 雪浪击石碎
    [01:27]思归 难归 堕回 轮回
    
    Reviewed by hycinth22 at 2016-04-30 01:30
  • 3. Failed to parse SourceMap: http://www.ysblog.xyz/wp-content/plugins/Hermit-X-master/assets/js/APlayer.min.js.map 控制台报错(ノ´д`)

    中文用户请注意:请尽量用英文描述你的 issue,这样能够让尽可能多的人帮到你。

    If you want to report a bug, please provide the following information:

    • The steps to reproduce.
    • A minimal demo of the problem via https://jsfiddle.net or http://codepen.io/pen if possible.
    • Which versions of APlayer, and which browser / OS are affected by this issue?
    Reviewed by newtool at 2018-02-09 05:56
  • 4. 手机浏览器中不自动播放

    即便是在init参数中将autoplay设置为true也不能自动播放;甚至在init()后再次调用play()方法也不行。

    上述问题在PC浏览器不存在,在手机上会发生(安卓和iOS局势如此)。

    求解决办法,多谢!

    The player can't auto play in mobile bowser. Even set init param(autoplay is ture) , it still can't auto start.

    help, thx~!

    Reviewed by starock at 2016-04-06 17:34
  • 5. It should allow playlist could be a empty array,and the insert way should be append rather than innerHTML

    In most cases,we will initialize the aPlayer but dont' provide data to it because users don't click the play button on the song.After they click the play button,we will fetch the song data.But if the music property of aPlayer is an empty array,it will cause error,I check the src code,it seems that aPlayer don't consider this situation and just take data from the array.

    On the other hand,aPlayer use innerHTML on the element property,but IMO,this is not appropriate because we have to create a container for aPlayer,if we use appendChild not innerHTML ,it would be better.

    Reviewed by NE-SmallTown at 2017-03-06 06:43
  • 6. [建议]未包含换行符的LRC格式兼容

    如果压缩了换行符 \n 会导致同步错误

    let lrc = '[ti:白石溪][ar:洛天依/乐正绫][al:][by:][offset:0][00:00.10]白石溪 - 洛天依/乐正绫[00:00.20]词:果汁凉菜[00:00.30]曲:纯白[00:00.40]...'
    lrc = lrc.replace(/\[/g, '\n[').trim()
    

    用了一段时间,很喜欢 APlayer 简洁的UI,提一些其他可改进的建议: 1.我认为有必要提供动态管理播放列表的 API,如果没有,在需要动态添加歌曲到列表时只能重新 new 2.应该提供一个销毁播放器的 API 3.歌词允许异步添加,通常获取歌词接口是单独的(现在必须等待歌词接口返回再初始化播放器,若歌词获取失败或时间过长会同时影响到播放音乐功能)

    Reviewed by u3u at 2016-12-22 15:55
  • 7. 建议增加一个全局缩略显示的播放总开关(Recommending to add a global playpause master switch)

    只要不刷新页面(只是继续点击打开或浏览其他页面)的话音乐都会一直播放着,能不能增加一个全局缩略显示的播放总开关?

    As long as the page is not refreshed (just clicking on opening or browsing other pages), the music will be played all the time. Can you add a global playpause total switch?

    Reviewed by guihangchen at 2018-04-25 16:03
  • 8. Player crashed when switching between musics within playlist

    I can't switch between musics within a playlist without crashing the player.

    Your player is very beautiful and pretty mobile-friend. I really appreciate your work. Thanks to fix the bug related to the playlist. Thanks.

    Reviewed by rgconxol at 2016-10-26 06:53
  • 9. Add's Feature Request #147, Remove Song From Playlist

    This adds the feature of removing a song from a playlist requested in issue #147.

    The code allows you to remove any song from the playlist until you reach the last index. Feedback is welcome!

    aplayer-removesong

    Reviewed by MPierre9 at 2017-12-05 03:09
  • 10. The play() request was interrupted by a call to pause()

    Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). (index):1 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). (index):1 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). (index):1 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). link:http://www.xuliehaonet.com/index.php/music/ 音乐顺序播放5-6首就开始报错了

    Reviewed by luojianet at 2017-09-04 02:44
  • 11. All demo sounds on the website return a 403

    中文用户请注意:请尽量用英文描述你的 issue,这样能够让尽可能多的人帮到你。

    If you want to report a bug, please provide the following information:

    • The steps to reproduce.
    • A minimal demo of the problem via https://jsfiddle.net or http://codepen.io/pen if possible.
    • Which versions of APlayer, and which browser / OS are affected by this issue?

    I can replicate this on any network on both my Mac and phone (from France)

    Reviewed by Haroenv at 2018-01-09 08:39
  • 12. It apperas "an audio error has occurred"

    • The steps to reproduce. There is a problem when playing the song " 夢灯籠" and "夢をかなえてドラえもん", but no problem when playing "君の知らない物語" and "おもかげ (produced by Vaundy)" When playing the first two songs, it appears: 图片 and: 图片

    • A minimal demo of the problem via https://jsfiddle.net or http://codepen.io/pen if possible. https://www.acerola.icu/archives/music/yourname1

    • Which versions of APlayer, and which browser / OS are affected by this issue? APlayer version: 1.10.1 browser: firefox 101.0.1

    Reviewed by YotsugiO at 2022-06-26 12:40
  • 13. Can't build SCSS files in production environment

    When building the project in production environment, only .min.js and .min.js.map are created. It seems that SCSS files hasn't been built.

    Reproduce:

    • Clone the repo and change directory into it.
    • Install dependencies.
    • Run npm run build.
    • Check dist/ folder, and there are no new .css and .css.map files.

    OS and versions:

    • OS: Manjaro
    • APlayer: 1.10.1
    Reviewed by LittleYe233 at 2022-06-23 09:13
  • 14. chore(deps): bump eventsource from 1.0.7 to 1.1.1

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 Stéphane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-01 01:33
  • 15. chore(deps): bump async from 2.6.3 to 2.6.4

    Bumps async from 2.6.3 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-28 19:45
  • 16. I think I found a BUG, Lyrics disappear😭

    Recently I add APlayer into my vue project and I put a list with 7 songs altogether I'd like to change the song I would hear when opening the site according to today's date I used api ap.list.switch(new Date().getDay()); to make it come true But here is the thing, if the api switch were used, lyrics of the first song would disappear I have figure out a temporary solution. Add an extra song to the list and use api to delete the first one ap.pause(); ap.list.switch(new Date().getDay()); ap.list.remove(0); ap.list.switch(new Date().getDay()); ap.play(); But I think it isn't how it should be. I would appreciate it if anyone helps me to solve this problem

    Reviewed by CheeseburgerIM at 2022-04-16 06:39
  • 17. chore(deps): bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-10 07:18
🍰 A beautiful HTML5 music player for Vue.js
🍰 A beautiful HTML5 music player for Vue.js

This is the branch for @moefe/vue-aplayer 2.0. Status: Beta Most of the planned features are in place but there may still be bugs. Documentation Docs

Jun 30, 2022
basic public music player, keeps contributors music. (collaborative playlist) 🎵
basic public music player, keeps contributors music. (collaborative playlist) 🎵

basic public music player, keeps contributors music. (collaborative playlist) ??

Jun 20, 2022
🦊 MusicFox is a light-weight, no ads and bloat-free, Vue music player, that can pulls music from YouTube easily

?? MusicFox A light-weight, no ads and bloat-free, Vue music player, that can pulls music from YouTube easily MusicFox is a small project that allows

Jan 5, 2022
Less Player is a music player developed on Electron + Vue3
Less Player is a music player developed on Electron + Vue3

Less Player is a music player developed on Electron + Vue3

Jun 14, 2022
AlicePlayer - A beautiful H5 music player built with Vue3. 🍉
 AlicePlayer - A beautiful H5 music player built with Vue3. 🍉

AlicePlayer A beautiful H5 music player built with Vue3. ?? This project is under heavy development, APIs might be changed in the feature. Preview The

May 14, 2022
A beautiful cross platform music player
A beautiful cross platform music player

FLB Music A Beautiful ?? and Feature Rich ?? Cross Platform Music Player and Downloader. Visit ?? https://fellthebeat.xyz to download ⬇ Features ?? Mu

Jun 2, 2022
▶️ 🎹 🎵 HTML5 audio tag sound player UI for Vue.js - supports single, loop, pause/stop modes etc

Vue.js sound player Vue.js sound audio player UI. Covers audio-tag API and adds more. Demo See DEMO here Installation Use npm: npm install vue-audio -

May 2, 2022
Music application that you can upload, manage and listen to music without interruption.

Music application that you can upload, manage and listen to music without interruption. I use TailwindCSS to help me with designing a beautiful modern application. It's the new kid on the block that's being embraced by the front-end dev community.

Nov 22, 2021
Music score editor for Early Music Sources Serenissima font

vue-serenissima-editor Project setup yarn install Compiles and hot-reloads for development yarn run serve Compiles and minifies for production yarn

Jun 12, 2020
Bee-music - Bee music app developing with Vue 3 in Vite
Bee-music - Bee music app developing with Vue 3 in Vite

This template should help get you started developing with Vue 3 in Vite.

Jun 27, 2022
:cake: Easy-to-use music player for Vue 2.x
:cake: Easy-to-use music player for Vue 2.x

Vue-APlayer Vue implementation of APlayer prototype. Demo Features Beautiful clean UI Lyrics scroll Playlist with repeat & shuffle controls Custom the

Jun 20, 2022
Web pages based on HTML 5 audio music player

Web pages based on HTML 5 < audio > music player demo // demo已停止 Requirements vue ^2.3.3 vue-resource ^1.3.4 v-click-outside ^0.0.8 Installation npm i

Dec 5, 2020
🎵 基于 Vue2、Vue-CLI3 的高仿网易云 mac 客户端播放器(PC) Online Music Player
🎵 基于 Vue2、Vue-CLI3 的高仿网易云 mac 客户端播放器(PC) Online Music Player

?? 基于 Vue2、Vue-CLI3 的高仿网易云 mac 客户端播放器(PC) Online Music Player

Jul 6, 2022
Gokotta is a simple music player, built by electron and vue.
Gokotta is a simple music player, built by electron and vue.

Gokotta is a simple music player, built by electron and vue.

Jun 5, 2022
A frontend-side Music Player written in Vue.js
A frontend-side Music Player written in Vue.js

Music-Player a frontend-side Music Player written in Vue.js (Quasar framework) Backend Repository backend repository of this app is available on https

Mar 24, 2022
Maeve, a PWA Apple Music web player with Last.fm support. Built with Vue & Typescript
Maeve, a PWA Apple Music web player with Last.fm support. Built with Vue & Typescript

Maeve - A customizable Apple Music web player with Last.fm support https://maevemusic.app Run locally Create a MusicKit developer token Create a local

Jun 14, 2022
A simple customizable web music player powered by vue & HTMLAudioElement
A simple customizable web music player powered by vue & HTMLAudioElement

xns-audio-player A persistent audio player powered by vue and some visuals from tailwindcss, v-tooltip, v-progress, vue-ionicons & xns-seek-bar Demo A

Apr 12, 2022
A music player application written by vue

Vue Mango Music This repository is no longer maintained. Some interfaces may be invalid.

Mar 12, 2021
Music player website with Vue.js And Web3 login
Music player website with Vue.js And Web3 login

sound9 Music player site with Web3 login Demo Demo here with some sample music f

Dec 21, 2021