It appears that the "pause" event is never triggered if you call `audio.pause()` on a playing audio element and then immediately set `audio.src`. The "abort" event, however, _is_ called in this case. Because the "pause" event isn't raised, the APlayer code that resets the pause button state doesn't trigger. This leaves the APlayer in a state where the pause button is still showing but the audio element _isn't_ actually playing. Because `APlayer.toggle()` (which is called by the Play/Pause button) does not check the state of the audio element, and instead checks the state of the UI, we end up in a situation where the pause button is visible but we're not playing. The call to Toggle, then, calls `APlayer.pause()` which checks to see if it's already paused or not. Because the audio element is already paused, the call is ignored and the event never triggers (which would reset the button UI). This [temporary] "fix" resolves the issue by intercepting the "abort" event that is triggered when the "pause" event is aborted. It then runs the same logic as the "pause" event, checking to see if the playback button is in a "paused" state and, if so, resetting it to a "play" button state. _In theory_, the checks at the beginning of the `pauseHandler` arrow function should be enough to safeguard any other unrelated calls to "abort". |
||
|---|---|---|
| .github | ||
| demo | ||
| dist | ||
| src | ||
| .gitignore | ||
| .travis.yml | ||
| LICENSE | ||
| README.md | ||
| package.json | ||
| postcss.config.js | ||
| webpack.config.js | ||
| yarn.lock | ||
README.md
APlayer
Wow, such a lovely HTML5 music player
Introduction
APlayer is a lovely HTML5 music player to help people build audio easily.
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!
Install
$ npm install aplayer --save
Quick Start
<div id="aplayer1" class="aplayer"></div>
<script src="dist/APlayer.min.js"></script>
var ap = new APlayer({
element: document.getElementById('aplayer1'),
music: {
title: 'Preparation',
author: 'Hans Zimmer/Richard Harvey',
url: 'Preparation.mp3',
}
});
Usage
Join the Discussion
- Telegram Group
- QQ Group: 415835947
Related Projects
- APlayer-Typecho-Plugin
- hexo-tag-aplayer
- 163music-APlayer-you-get-docker
- Hermit-X(APlayer for WordPress)
- vue-aplayer
- APlayer_for_Z-BlogPHP
- php-aplayer
- react-aplayer
- vue-aplayer
- APlayer-Controler
- APlayerHandle
- Feel free to submit yours in
Let me know!
Who use APlayer?
- Anotherhome
- 站长之家
- TheFatRat
- Jelly Rue
- LWL的自由天空
- 萨摩公园
- ZGQ's Blog
- FGHRSH 的博客
- Blessing Studio
- 暮光博客
- Justice_Eternal吧曲谱资源站
- Justice_Eternal吧曲谱资源站(移动端)
- 歌词千寻
- SORA
- iSearch
- LRC歌词编辑器
- kn007的个人博客
- LLSupport
- Аэростатика
- Feel free to submit yours in
Let me know!
CDN
Donate
- Donate via Paypal
- Donate via WeChat Pay
- Donate via Alipay
- Donate via Bitcoin: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1
Sponsor
- The CDN service is sponsored by 又拍云
Author
APlayer © DIYgod, Released under the MIT License.
Authored and maintained by DIYgod with help from contributors (list).
Blog @Anotherhome · GitHub @DIYgod · Twitter @DIYgod · Weibo @DIYgod酱 · Telegram Channel @awesomeDIYgod
