Wow, such a beautiful HTML5 music player

Overview

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

Comments
  • Properly handle the Promise returned by <audio>.play()

    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.

    enhancement 
    opened by ericdrobinson 32
  • 无法解析只精确到秒的歌词

    无法解析只精确到秒的歌词

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

    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?
    opened by RoromoriYuzu 11
  • 手机浏览器中不自动播放

    手机浏览器中不自动播放

    即便是在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~!

    opened by starock 11
  • It should allow playlist could be a empty array,and the insert way should be append rather than innerHTML

    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.

    opened by NE-SmallTown 10
  • [建议]未包含换行符的LRC格式兼容

    [建议]未包含换行符的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.歌词允许异步添加,通常获取歌词接口是单独的(现在必须等待歌词接口返回再初始化播放器,若歌词获取失败或时间过长会同时影响到播放音乐功能)

    contribution welcome feature 
    opened by u3u 8
  • 建议增加一个全局缩略显示的播放总开关(Recommending to add a global playpause master switch)

    建议增加一个全局缩略显示的播放总开关(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?

    opened by guihangchen 7
  • Player crashed when switching between musics within playlist

    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.

    opened by rgconxol 7
  • Add's Feature Request #147, Remove Song From Playlist

    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

    opened by MPierre9 6
  • The play() request was interrupted by a call to pause()

    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首就开始报错了

    opened by luojianet 6
  • All demo sounds on the website return a 403

    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)

    opened by Haroenv 5
  • chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    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.

    dependencies 
    opened by dependabot[bot] 0
  • need help TypeError: Cannot read property 'classList' of null

    need help TypeError: Cannot read property 'classList' of null

    中文用户请注意:请尽量用英文描述你的 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?
    opened by Rakbow 1
  • Adding offset to lyrics dynamically / 动态调整LRC歌词偏移延迟

    Adding offset to lyrics dynamically / 动态调整LRC歌词偏移延迟

    I know I can preprocess the LRC file and adjust the timing before loading into APlayer, but I'm wondering if it's possible to change the lyrics offset on the fly without reloading the song.

    For example, I'd like to do something like lrc.setOffset(1000) to +1000ms for each line.

    opened by leranjun 1
Releases(v1.10.1)
  • v1.10.1(Mar 29, 2018)

    Improvements

    • better text-shadow for fixed lrc (398c8be87af19f513dfc8e6d199f97d4501e513c)

    Bug fixes

    • fix list.remove (55039bbc3b91c592b3e711f7c34013f583185914)
    • fix changeable height (af84efb05c05a825732b28df2388b4487bcbfa4c)
    Source code(tar.gz)
    Source code(zip)
  • v1.10.0(Mar 22, 2018)

    New

    • fixed mode (https://aplayer.js.org/#/home?id=fixed-mode)

    • api

      • list.*
      • lrc.*
      • skipBack
      • skipForward
    • events

      • listshow
      • listhide
      • listadd
      • listremove
      • listswitch
      • listclear
      • lrcshow
      • lrchide

    Bug fixed

    • too many

    Improvements

    • revert play promise

    • some logic improvements

    Workflow

    • upgrade to webpack 4

    • update dependencies

    • remove useless devDependencies

    Source code(tar.gz)
    Source code(zip)
  • v1.9.1(Mar 14, 2018)

    Bug fixes

    • fix changeable template.listCurs (52388dd4c1b9c3e3ebf32e6f0bbb173cdc106a68)
    • remove loading when paused (bede0645ea82158d388447457b02e8f34836c19f)
    Source code(tar.gz)
    Source code(zip)
  • v1.9.0(Mar 13, 2018)

    New

    • api
      • theme (ba7692984a0a152bd6ab3e869cd2167e50d4f445)
      • setMode (1dc058c0c7d5f4353aeef3f50564d1bb84803d50)
      • notice (cf44440907f22d38d44e3e8b0c3b3ec119f093ca)
      • audio.type, customAudioType (97165f07ccd22ff9d9de8302a14e31157cb514f8)

    Adjustment

    • option: lrc -> lrcType (738613fffe0ee418016d16f9e1a3285890e86fca)

    Improvements

    • replace dirty checking with timeupdate (e10528397f99e803ffc38de64f55f6713c82fdee)

    Bug fixes

    • fix asynchronization conflict (454019fea04dd081dfd3021b27b20ac58148ab26)
    Source code(tar.gz)
    Source code(zip)
  • v1.8.0(Mar 12, 2018)

    New

    • API: APlayer.version
    • option: audio.theme

    Bug fixes

    • fix css conflict between mini mode and play list
    • fix unnecessary scroll bar when folding list
    Source code(tar.gz)
    Source code(zip)
  • v1.7.0(Mar 11, 2018)

    New

    • options

      • listFolded
      • volume
    • api

      • seek
      • removeAudio
    • more player events

    Adjustment

    • options

      • listmaxheight -> listMaxHeight
      • showlrc -> lrc
      • music -> audio
      • music.title -> audio.name
      • music.author -> audio.artist
      • music.pic -> audio.cover
      • narrow -> mini
      • mode -> loop and order
    • api

      • setAudio -> switchAudio
      • addMusic -> addAudio

    Improvements

    • better handling play promise

    • auto add class aplayer

    • supporting more lyric format

    • UI: lighter shadow, scalable thumb, smooth volume bar

    • better progress and volume drag

    Bug fixes

    • too many
    Source code(tar.gz)
    Source code(zip)
  • 1.6.0(Mar 26, 2017)

  • 1.5.7(Oct 24, 2016)

  • 1.5.6(Oct 14, 2016)

  • 1.5.4(Oct 11, 2016)

    • Make music title and lrc selectable
    • Click list to play next song in mobile
    • Display hh:mm:ss format when audio is over an hour long(Thanks @argvil19 )
    • Optimize the style of aplayer with lrc
    • Hide volume button in mobile
    Source code(tar.gz)
    Source code(zip)
  • 1.5.3(Sep 25, 2016)

  • 1.5.2(Sep 19, 2016)

  • 1.5.1(Sep 19, 2016)

  • 1.5.0(Jul 11, 2016)

  • 1.4.8(Jul 11, 2016)

  • 1.4.7(Jul 8, 2016)

  • 1.4.6(Jun 13, 2016)

  • 1.4.5(May 14, 2016)

  • 1.4.4(May 14, 2016)

  • 1.4.3(May 5, 2016)

  • 1.4.2(Apr 28, 2016)

Owner
DIYgod
写代码是热爱,写到世界充满爱!
DIYgod
🍰 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

MoePlayer 447 Nov 14, 2022
basic public music player, keeps contributors music. (collaborative playlist) 🎵

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

Davi Guimarães 75 Nov 23, 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

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

Less Player is a music player developed on Electron + Vue3

RIVE2012 16 Nov 26, 2022
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

Mashiro 35 Oct 30, 2022
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

FLB Music Player 76 Nov 23, 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 -

Mikhail Kuznetcov 172 Aug 25, 2022
A html5 video player component of vue

A html5 video player component of vue. Include video controller / video preview / power progress bar and so on

hhliu 0 Jul 16, 2020
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.

Robert Gjorgjioski 1 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

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

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

Tran Nguyen Thuong Truong 141 Nov 19, 2022
: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

Doma 1.3k Nov 21, 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

张啸 24 Nov 24, 2022
🎵 基于 Vue2、Vue-CLI3 的高仿网易云 mac 客户端播放器(PC) Online Music Player

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

ssh 2k Dec 3, 2022
Gokotta is a simple music player, built by electron and vue.

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

Zhuo Zhang 507 Oct 8, 2022
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

Hossein Taheri 3 Oct 18, 2022
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

An Tran 229 Nov 2, 2022
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

James Sinkala 55 Nov 14, 2022
A music player application written by vue

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

null 35 Mar 12, 2021