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.