A complete and Unique HTML5 Audio Player with playlist that enables websites to play embedded audio files on webpages with totally customized interface and ability of playing files dynamically. Just click on the title of audio file and it will be dynamically played in a customized HTML5 audio element player, with unique looks and features.
If you are up to publish Music or Audio Files over your website, Then you must be looking for a comfortable HTML5 player with playlist that comes fit to your needs. This player will make you feel awesome and you don't have to look up for players on internet anymore, often using available players based on flash players, that are not compatible with some of the devices like IPhone/Android.
For Now I am gonna tell you the right solution for creating your own customized HTML5 audio player with custom controls and looks, this player is supported by all kinds of devices and tested on latest devices and found it working well.
Before HTML5, websites were not able to play audio files with in a browser using plugins. The HTML5 audio element now enables websites to add files into web pages and play and control them with in a browser. HTML5 specifies a standard method of adding audio files on web pages. By default, HTML5 gives basic player with some basic controls and options.
Although, we could customize the basic HTML5 audio player with JavaScript, JQuery and some CSS to make it look completely different and awesome.
Lets discuss in some steps how to create your customized HTML5 player with playlist working dynamically.
The HTMl5 media player is designed using the top class mediaelementjs Javacsrip and Jquery Media player library. Before customizing the default Audio Element Player,first you are required to add mediaelementjs in your web page. Follow the given below steps:
1. Include Mediaelementjs
To Get default Installation there are following different ways
- Download the package from https://github.com/mediaelement/mediaelement
- Use a CDN reference; the most popular ones are jsDelivr and cdnjs.
- Or Read Tutorial on: How to add MediaElement.JS in your web page?
If you are not comfortable with the above steps, skip it and just include the following CSS and JavaScript Code to add the HTML5 Audio Element player Library.
<link rel='stylesheet prefetch' href='https://mymediaelements.github.io/mejs-player/build/mediaelementplayer.css'>
<script src='https://mymediaelements.github.io/mejs-player/build/mediaelement-and-player.js'></script>
Customization was made to player using FontAwesome icons for better looks and design.You must need to include FontAwesome on your we web pages. For this add the following CSS CDN link in your web page <head> section.
<link rel="stylesheet prefetch" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
>
You may find latest version of FontAwesome Icons there: Get Started with FontAwesome Icons
you have to setup default HTML5 Audio Element tag to load with the mediaelementjs library. To setup default audio Element player work with mediaelement.js library you need to add class="mejs__player"(imortant) to HTML5 audio element tag.
Setup a Custom HTML5 Audio Player with dynamic Playlist
Now you have done with all of important pre required steps before creating custom HTML5 audio player with playlist.
The HTML
For creating audio playlist on your pages you are required to below HTML code. That is basic structure of the custom player and playlist
<div class="player-wrapper">
<ul class="playlist custom-counter" id="list">
<li>
<div class="track-info">
<a href="#" data-value="https://mymediaelements.github.io/mejs-player/audio/Rain.mp3">Rain</a>
<span class="artist">Akcent</span>
</div>
</li>
<li>
<div class="track-info">
<a href="#" data-value="https://mymediaelements.github.io/mejs-player/audio/Incomplete.mp3">Incomplete</a>
<span class="artist">Backstreet boys </span>
</div>
</li>
<li>
<div class="track-info">
<a href="#" data-value="https://mymediaelements.github.io//mejs-player/audio/Despacito.mp3">Daspacito</a>
<span class="artist"> Luis Fonsi - Daddy Yankee</span>
</div>
</li>
</ul>
<audio id="audio" class="mejs__player" controls="controls" src="">
Your browser does not support the audio format.
</audio>
</div>
Above markup will create playlist along with custom HTML5 audio element player, To call the mediaelement'js and playlist javacsript you must need to add class="mejs_player" id="audio" (Important) to default audio element tag.
Setup single custom HTML5 Audio Player
We would use audio Element tag for creating audio files on your web page. Add the following code in to your HTML5 document:
<div class="player-wrapper">
<audio id="audio" class="mejs__player" controls="controls">
<source src="track.ogg" type="audio/ogg"></source>
<source src="track.mp3" type="audio/mpeg"></source>
Your browser does not support the audio element.
</audio>
</div>
The above Audio elements enables web pages to add audio files. It is only shown if your browser is supported and compatible with HTML5 audio element. put your source url in default audioelement tag.
The CSS
Put the the below CSS code into your web page head section.
.player-wrapper {
border-radius: 5px;
box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.25);
background-image: -webkit-linear-gradient(315deg, #FF5572, #FF7555);
background-image: linear-gradient(135deg, #FF5572, #FF7555);
overflow: hidden;
margin: 0 auto;
max-width: 100%;
width: 100%;
padding: 0;
border-radius: 0;
}
ul.playlist {
margin: 0;
padding: 15px 15px 0 15px;
}
ul.playlist a {
color: #fff;
text-decoration: none;
}
ul.playlist li {
overflow: hidden;
line-height: 20px;
display: flex;
padding: 10px 0;
border-bottom: 1px solid rgba(230, 211, 211, 0.31);
}
ul.playlist li::before {
content: "\f001";
margin-right: 10px;
font-size: 120%;
background-color: #02020266;
font-family: Fontawesome;
color: white;
padding: 6px 8px;
text-align: center;
border-radius: 3px;
}
.track-info {
display: inline-block;
position: relative;
line-height: 1.3em;
width: 100%;
font-weight: 500;
}
.track-info .artist {
display: block;
font-size: 13px;
font-style: normal;
line-height: 15px;
color: #fff;
text-decoration: none;
}
.track-info .title {
display: block;
color: #fff;
}
ul.playlist .download {
float: right;
}
.mejs__controls {
height: 60px;
}
.mejs__button.mejs__playpause-button.mejs__replay,
.mejs__button.mejs__playpause-button.mejs__pause {
background: #FFB00E;
width: 40px;
padding: 0 5px;
border-radius: 50%;
}
.mejs__button.mejs__playpause-button.mejs__replay {
background: #29cf54;
}
.mejs__button.mejs__playpause-button.mejs__play {
background: #29cf54;
width: 40px;
padding: 0 5px;
border-radius: 50%;
}
.mejs__time {
box-sizing: content-box;
color: #444;
font-size: 15px;
font-weight: bold;
height: 24px;
overflow: hidden;
width: 50px;
padding: 16px 0;
}
.mejs__button > button {
display: block;
padding: 0;
border: 0;
font-family: FontAwesome;
font-size: 20px;
color: #444;
background: transparent!important;
}
.mejs__button.mejs__playpause-button.mejs__play button:before {
content: "\f04b";
color: #fff;
}
.mejs__button.mejs__playpause-button.mejs__pause button:before {
content: "\f04c";
color: #fff;
}
.mejs__button.mejs__playpause-button.mejs__replay button:before {
content: "\f01e";
color: #fff;
}
.mejs__button.mejs__volume-button.mejs__mute button:before {
content: "\f028";
}
.mejs__button.mejs__volume-button.mejs__unmute button:before {
content: "\f026";
}
.mejs__container {
font-family: Segui Ui, Arial, serif;
background-size: cover;
position: relative;
background: #fff;
text-align: left;
text-indent: 0;
vertical-align: top;
height: 80px!important;
width: 100%!important;
}
.mejs__controls:not([style*="display: none"]) {
background: none;
}
.mejs__time-total {
background: rgb(212, 245, 221);
margin: 5px 0 0;
width: 100%;
}
span.mejs__time-current {
background: #dedede;
}
span.mejs__time-loaded {
background: #29cf54;
}
.mejs__time-handle-content {
border: 4px solid rgba(255, 255, 255, 0.9);
border-radius: 0;
height: 10px;
left: -5px;
top: -4px;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
width: 1px;
}
.mejs__horizontal-volume-total {
background: rgb(41, 207, 84);
height: 10px;
top: 14px;
border-radius: 0;
}
The Jquery
Add below Javascript code to your web page to change the source URL in default audio element tag automatically.
// Dynamic URL change
list.onclick = function(e) {
e.preventDefault();
var elm = e.target;
var audio = document.getElementById('audio');
var source = document.getElementById('audio');
source.src = elm.getAttribute('data-value');
audio.load(); //call this to just preload the audio without playing
audio.play(); //call this to play the song right away
};
No more codes. You are absolutely done with all steps. I hope you found it working, if not please don't forget to ask your issue in comments. We would love to let it fix for you.
