Audio player

Create cool styled audio player in one command with Metro 4 audio role.

Create player

It is often necessary to play files to the user. Use the Metro 4 audio player to play audio the same in all systems.

To create audio player add attribute data-role="audio" to audio element. To define audio file add attribute data-src="...".

                    <audio data-role="audio" data-src="file.mp3"></audio>


You can define what controls will be shown and what image contained in it.

Show controls

To define controls shown use attributes: data-show-loop, data-show-play, data-show-stop, data-show-stream, data-show-volume. All this attributes has ben one of two values: true or false.

                    <audio data-role="audio"

Define controls images

To define controls images use next attributes: data-loop-icon, data-play-icon, data-pause-icon, data-stop-icon, data-mute-icon, data-volume-low-icon, data-volume-medium-icon, data-volume-high-icon, Values for these attributes must be valid html tag for icon from font or image.

                    <audio data-role="audio"
                           data-loop-icon="<span class='mif-loop2 fg-orange'></span>"
                           data-mute-icon="<span class='mif-volume-mute2 fg-red'></span>"
                           data-volume-low-icon="<span class='mif-volume-low fg-yellow'></span>"
                           data-volume-medium-icon="<span class='mif-volume-medium fg-green'></span>"
                           data-volume-high-icon="<span class='mif-volume-high fg-red'></span>"
                           data-play-icon="<img src='images/play-icon.png'>"
                           data-stop-icon="<img src='images/player_stop.png'>"

Predefined colors

The audio player styled to two color schemes: dark (default) and light.

Dark scheme

                    <audio data-role="audio" data-src="hotel_california.mp3"></audio>

Light scheme

                    <audio data-role="audio" data-src="hotel_california.mp3" class="light"></audio>

Audio options

Use additional options to interact with component.

Looping audio

You can set looping audio with attribute data-loop="true".

                    <audio data-role="audio" data-loop="true"></audio>

Auto play audio

To auto-play audio, you can use attribute data-autoplay="true".

                    <audio data-role="audio" data-autoplay="true"></audio>


You can setup volume with attribute data-volume. This value must be between 0 and 1.

                    <audio data-role="audio" data-volume=".5"></audio>


When audio player works, it generated the numbers of events. You can use callback for this event to behavior with audio player.

Event Data-* Desc
onPlay(audio, player) data-on-play Fired when audio playing started
onPause(audio, player) data-on-pause Fired when audio paused
onStop(audio, player) data-on-stop Fired when audio stopped
onEnd(audio, player) data-on-end Fired when audio ended
onMetadata(audio, player) data-on-metadata Fired when player get metadata
onTime(currTime, duration, audio, player) data-on-time Fired when player play audio
onAudioCreate(audio, player) data-on-audio-create Fired when player created


You can use audio player methods to interact with the component.

  • play() - play current video
  • play(src) - play video from src
  • pause() - pause playing
  • resume() - resume playing
  • stop() - stop playing
  • volume() - get current volume
  • volume(vol) - set volume
  • loop() - toggle looping video
  • mute() - mute video

                    var player = $(el).data('audio');


You can change attributes data-src and data-volume at runtime.