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>
Controls
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"
data-src="https://metroui.org.ua/res/hotel_california.mp3"
data-show-loop="false"
data-show-stop="false"
data-show-volume="false"
data-show-info="false">
</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-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'>"
data-src="file.mp3">
</audio>
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>
Volume
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>
Events
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 |
Methods
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');
audio.play("https://metroui.org.ua/res/oceans.mp4");
audio.pause();
audio.resume();
Observe
You can change attributes data-src and data-volume at runtime.