Configuration

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).
  • data-apskinspath
    • URL of skins directory:
      • default build-in skins: https://strangecube.com/audioplay2/player/skins/
  • data-apskin
    • skin name:
      • negative (default).
  • data-apstarttime
    • start at time (ms).
      • default: 0.
  • data-apfadeintime
    • volume fade in time (ms):
      • default: 0.
  • data-apwidth
    • player’s width (pixels):
      • sets players width, useful with custom skins, default 30px.
  • data-apheight
    • player’s height (pixels):
      • sets players height, useful with custom skins, default 30px.
  • 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.
  • data-aploop
    • turns on/off music looping, possible values: yes, no
      • default: 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 &lt;audio&gt; 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