Audio player

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

Create player

It is often necessary to play files to the user. Use the Metro UI 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-player" 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-player"

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-player"
                           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-player" data-src="hotel_california.mp3"></audio>

Light scheme

                    <audio data-role="audio-player" 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-player" data-loop="true"></audio>

Auto play audio

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

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


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

                    <audio data-role="audio-player" 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 = Metro.getPlugin(el, 'audio-player');


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