Audio player
Create cool styled audio player in one command with Metro 4 video 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>
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"
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"
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" 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>
Volume
You can setup volume with attribute data-volume. This value must be between 0 and 1.
<audio data-role="audio" 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 = $(el).data('audio');
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.