A simple implementation of a Play/Pause action for a double-version music samples buttons (raw and mixed, or flat and mix). The main purpose is to let the web client easily play samples and toggle between listening the different versions while the two tracks stay in sync (and stop playing other groups).
Supports multiple track groups out of the box.
Depends on 3rd-party Howler JS library.
Here you find a live working demo web page with two different title tracks and relative flat/mix versions.
Add:
<script defer src="js/howler.core.min-v2.2.0.js"></script>
<script defer src="js/player.js"></script>
at the end of the HTML <body> tag, your media files in samples/ folder and the js/ folder to your web server (or CDN service).
All the JavaScript files under js/ are transpiled with Babel for better browser support. If you want you can generate new ones with Babel too:
npm install # installs Babel dependencies
npm run build
The main JS file when executed will:
- search the DOM for HTML
<button>tags with ids named like${track-title}-flatand${track-title}-mix, the titles should match media file names in samples/ - load
/samples/${track-title}-flat.webmand/samples/${track-title}-mix.webmplus/samples/${track-title}-flat.mp3and${track-title}-mix.mp3if available (it will fall back tomp3for Safari and old browsers like IE that don't supportwebmformat) - attach play/pause behavior to
onclickevents of every<button>tag with id${track-title}-flatand${track-title}-mix
Refer to index.html, player.js and samples/ folder for the current demo values.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent