[Demo] (http://andrewberezovsky.ru/demo/backgroundaudio7/)
Usage:
1 - Download [MediaElement.js] (http://mediaelementjs.com/)
2 - Download [mep-feature-playlist] (https://github.com/duozersk/mep-feature-playlist/archive/master.zip)
3 - Include
- mediaelement-and-player.js
- mediaelementplayer.min.css
- mep-feature-playlist.js
- mep-feature-playlist.css
4 - Add this code to your page:
<script>
$(function(){
$('audio,video').mediaelementplayer({
loop: true,
shuffle: true,
playlist: true,
audioHeight: 30,
playlistposition: 'bottom',
features: ['playlistfeature', 'prevtrack', 'playpause', 'nexttrack', 'loop', 'shuffle', 'playlist', 'current', 'progress', 'duration', 'volume'],
});
});
</script>
Options:
- loop - loop through the playlist; defaults to 'false'
- shuffle - shuffle playlist; defaults to 'false'
- playlist - controls either to show playlist by default or not; defaults to 'false'
- playlistposition - can be either 'top' or 'bottom' to show playlist on top of the player or under it; defaults to 'top'
Features:
- playlistfeature - general feature to enable playlist functionality; it just builds the internal playlist layer, it should be present if you want to use playlist
- prevtrack - button to play the previous track in the playlist
- nexttrack - button to play the next track in the playlist
- loop - toggle to turn repeat on or off
- shuffle - toggle to turn shuffle on or off
- playlist - playlist button to show/hide playlist
5 - Add the audio tag and your tracks:
<audio controls="controls" autoplay="autoplay">
<source src="media/AirReview-Landmarks-02-ChasingCorporate.mp3" title="Chasing Corporate" type="audio/mpeg"/>
<source src="media/framing.mp3" title="Framing" type="audio/mpeg"/>
</audio>
It will use title attribute as track name, falls back to file name if no title is specified.
Playlist Collapsed
Playlist Expanded
- Yellow - playing track
- Green - track to play on click
More options and installation instructions related to MediaElement.js can be found [here] (http://mediaelementjs.com/#installation).