Configuration options
Here is a full list of configuration options. They must be used in <audio> tag as object properties.
- data-apmode
- possible values:
- playpause – play/pause player mode,
- playstop – play/stop player mode (default).
- possible values:
- data-apskinspath
- URL of skins directory:
- default build-in skins: https://strangecube.com/audioplay2/player/skins/
- URL of skins directory:
- data-apskin
- skin name:
- negative (default).
- skin name:
- data-apstarttime
- start at time (ms).
- default: 0.
- start at time (ms).
- data-apfadeintime
- volume fade in time (ms):
- default: 0.
- volume fade in time (ms):
- data-apwidth
- player’s width (pixels):
- sets players width, useful with custom skins, default 30px.
- player’s width (pixels):
- data-apheight
- player’s height (pixels):
- sets players height, useful with custom skins, default 30px.
- player’s height (pixels):
- data-apautoplay
- use this property to start music automatically when player loads:
- default: no autostart.
- Important: most mobile browsers doesn’t accept any kind of autostart mechanisms.
- use this property to start music automatically when player loads:
- data-aploop
- turns on/off music looping, possible values: yes, no
- default: no
- turns on/off music looping, possible values: yes, no
Here is an example with all possible options:
<div class="audioplay-object"> <div class="audioplay-button"></div> <audio class="audioplay-player" data-apmode="playpause" data-apskinspath="https://strangecube.com/audioplay2/player/skins" data-apskin="negative" data-apstarttime="0" data-apfadeintime="3000" data-apwidth="30px" data-apheight="30px" data-aploop="yes" data-apautoplay> <!-- AudioPlay2 player. Visit https://strangecube.com/audioplay2/ --> <source src="https://strangecube.com/audioplay2/player/music/music.ogg" /> <source src="https://strangecube.com/audioplay2/player/music/music.mp3" /> Your browser doesn't support <audio> element. </audio> </div> <script src="https://strangecube.com/audioplay2/player/js/audioplay-2.0.0.min.js"></script>
Music by Kevin MacLeod.
Custom skins
Let’s take a look on skins directory structure (default: http://strangecube.com/audioplay2/player/skins).
./skins/ ├── classic │ ├── pauseover.png │ ├── pauseup.png │ ├── playover.png │ ├── playup.png │ ├── stopover.png │ └── stopup.png └── negative ├── pauseover.png ├── pauseup.png ├── playover.png ├── playup.png ├── stopover.png └── stopup.png
You can see that each skin has its own directory with the same name as a skin name (data-apskin property). In this case we have two skins: classic and negative. Each skin contains 6 PNG files (with alpha channel), two files for each player state. Player supports 3 states:
- stop,
- pause,
- play.
Each state has 2 graphics files:
- for mouse button up (pauseup.png, playup.png, stopup.png),
- for “mouse over” event (pauseover.png, playover.png, stopover.png).
“Negative” skin contains following images:
Remember to change data-apwidth and data-apheight properties if size of your images is different than 30×30 pixels.
Now you are ready to prepare your own skin :). Good luck!
Bugs/suggestions
Feel free to contact me: audioplay2 @ strangecube.com