MyMediaElements offers stunning html5 video players, html5 audio players, web music players api, custom html5 players framework and all media Players libraries

Wednesday, 29 November 2017

A Custom HTML5 Audio Player with Dynamic Playlist


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

  1. Download the package from
  2. Use a CDN reference; the most popular ones are jsDelivr and cdnjs.
  3. 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=''>
<script src=''></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="//"

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.


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">
            <div class="track-info">
                <a href="#" data-value="">Rain</a>
                <span class="artist">Akcent</span>

            <div class="track-info">
                <a href="#" data-value="">Incomplete</a>
                <span class="artist">Backstreet boys </span>

            <div class="track-info">
                <a href="#" data-value="">Daspacito</a>
                <span class="artist"> Luis Fonsi - Daddy Yankee</span>


    <audio id="audio" class="mejs__player" controls="controls" src="">
        Your browser does not support the audio format.


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.

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.


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__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) {

  var elm =;
  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; //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.

Read more →

Wednesday, 8 March 2017

A Stunning Flat Responsive HTML5 player For Audio Streaming


A stunning Flat Responsive HTML5 Player for Audio Streaming with customized controls and skin. The jQuery Audio Player Plugin is basically customizes default HTML5 Audio Element using JavaScript and some CSS, that gives complete awesome look to your Audio player you always need.
Many Advance web developers are working with default HTML5 player and customizing it with different styles and skins. HTML5 Audio Element is one of the most popular feature of HTML5. It is now already supported in almost every modern browsers, even so for IE9. Hover each broswer provides default native HTML5 player skin.

How it works

The JQuery Plugin Works with default <audio> Element and replaces targeted element with litle HTML using JavaScript events attached to it. It is tiny lightweight HTML5 player  for Audio Streaming in web page to play a single audio file. The Player works with jQuery Library, The Jquery Plugin would be pretty much useless without the respective CSS which is responsible for the looks of HTMl5 audio Player and some of the features summarized below.


  • Responsive and Mobile ready
    The HTML5 Player for Audio streaming is completely responsive and feel good with every size of device, Either it is smart phone, Tablet or thirty inches of large display. It doesn't requires media queries or any CSS coding for making it responsive, It automatically adopts the fluid layout.
  • Touchable and User Friendly
    The player is really touchy and alive. This stunning HTML5 Audio Player for audio streaming can be used easily with touch-capable screens. All the controls are touchy you can control every thing with cursor and can also do with your finger. Every action is touch enabled and defined.
  • Adaptivity and support
    If JavaScript is disabled? No worries, the default browser’s player will do the job.The Volume button appears when you touch volume control icon. (bad for iOS). Some unknowns browsers does not support the
  • Image-less and Lightweight
    The looks and styles of HTML5 Audio Player are purely CSS designed no even single Image is used.The minified JQuery Audio Player Plugin is so light weight, it's size comprises total 4kb of space.
  • Usable.
    The essential Play / Pause and playback progress controls, Volume On / Off / Up / Down controls and indication of how much of the audio is preloaded (buffered).
  • Flash-less.
    No Flash are required here.


Get start with adding HTML5 player for Audio streaming into your web page. Adding html player into your website comprises some following steps. 

1# Add JavaScript and CSS

Add the following JavaScript Library files into to your body section to dynamically customize the default HTML5 Audio element into touchy and responsive audio streaming player.
There are two different ways of setting up HTML5 Audio player plugin in your website. You may use the following CDN files.
<script src=""></script>

<link href="" rel="stylesheet"/>
or download the package and upload the files into your website directory.
<script src="path/to/player.js"></script>

<link href="path/to/player.css" rel="stylesheet">

2# Include JQuery

To Call the plugin you must add the the following JQuery into the body section.
<script src=""></script>
$( function()
        $( 'audio' ).audioPlayer();

3# Setup the Player

Specify multiple audio formats, So that every user can easily listen to your audio, Because none of all browsers supports all kind of audio formats.  Add the following default HTML5 Audio Element tag into your desired location of the body section. This HTML5 Player supports multiple audio files on the same webpage, you may add multiple audios to single webpage using the same default HTML5 Media element audio tag.
<audio preload="auto" controls>
    <source src="audio.wav" />
    <source src="audio.mp3" />
    <source src="audio.ogg" />
No more coding are required, You are now completely done. Enjoy the responsive audio player.


The HTML5 player is tested and it is found good on the latest browsers like latest Safari, Chrome, Firefox, Opera both Mac and Windows versions for audio streaming. It also works perfect on Internet Explorer 9,10 and degrades  to single play/pause button on earlier versions. It is mainly works with touch screen devices many of them run iOS6, Windows Phone 7 and Andriod 4.2 default browsers, However, the earlier Andriod operating system does not support Audio elements, so the player may not work well. 

Read more →

Friday, 24 February 2017

A Complete HTML5 Audio Player for your website

A simple and complete HTML5 Audio Player purely designed with CSS and HTML for your media web pages. It gives awesome look to your audio play lists, In fact it is so simple, so that it could be added any where in your web page. It is almost a play button with JQuery that customizes the default HTML5 audio element  controls and skin to a simplest ever HTML5 Audio Player over the web. Many web developers are working with adding HTML5 media elements in web pages and they have been given us several examples of HTML5 Media Elements  frameworks that works with default HTML5 Media Elements using CSS and JavaScript and makes it more awesome and user-friendly.

Personally being a web-developer, I think all those things looks awesome on your web pages that gives better rank to your web pages over internet. Using complex and heavy media libraries is sometimes gives us delay in pages while they are crawled and results bad impression to your SEO Ranking.  This HTML5 Player is so light there is no external libraries and scripts are required to execute the player. It's is SEO friendly and smallest size of HTML5 player ever.

Adding HTML5 Audio Player in your website include some easy steps even it's so easy so that a school boy could go through it ( :-P ).


1.The HTML

Add the following HTML to your body section to place the HTML5 Audio player any where in your website.

<div class="mymediaelements">
        <audio id="yourAudio">
            <source src='' type='audio/mpeg' preload="auto" />
        <a id="audioControl" href="#">
            <img src="" id="play"/>
            <img src="" id="pause"/>
  Designed by <a href=""></a>
Change the Audio File source path in a default Audio Media elements.

        <audio id="yourAudio">
            <source src='' type='audio/mpeg' preload="auto" />
Your browser doesn't support Audio formats. Please upgrade your browser. 

2.The CSS

Include the following CSS to your <head> section. You may change it later on to setup the HTML5 Audio Player Size etc.

#audioControl img {
    width: 50px;
    height: 50px;

#pause {
    display: none;

If you are really sharing beautiful videos over your website and you want stunning HTML5 Video Player you must read this:

MediaElement.js - HTML5 Audio and Video player Framework

3.The JavaScript For HTML5 Audio Player

Add the following JavaScript to your body section. It will work with default HTML5 Audio Element to setup the new skin and controls.

  var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl'),
    playButton = document.getElementById('play'),
    pauseButton = document.getElementById('pause');

function toggleButton() {
    if ( === 'none') { = 'block'; = 'none';
    } else { = 'none'; = 'block';

ctrl.onclick = function () {

    if (yourAudio.paused) {;
    } else {

    // Prevent Default Action
    return false;

Oh yes No more steps your are all done. If you are getting trouble adding all these codes for HTML5 Audio Player to your website or have some issue let us know we will try our best to resolve it for you. If you liked the post please appreciate us and give us a social click or share.
Read more →

Wednesday, 22 February 2017

MediaElement.js - HTML5 Audio and Video player Framework

Mediaelements.js is a blazingly fast HTML5 Audio Player and Video player Framework, that enables web pages to play video and audio files with in custom player skin.
Before HTML5, audio and video files could only be played in a browser with a plug-in (like flash). The HTML5 Audio and Video element specifies a standard way to embed audio and video files in a web page. HTML5 Audio and Video elements enables Web pages to excute audio and video files with in a default player skin. Mediaelements.js makes working with audio in JavaScript easy and reliable across all platforms.
MediaElement.js is complete HTML/CSS audio/video player built on top MediaElement.js and jQuery. Many great HTML5 players have a completely separate Flash UI in fallback mode, but MediaElementPlayer.js uses the same HTML/CSS for all players. It is a HTML5 Audio and Video unification framework and a high-level JavaScript API for processing and synthesizing audio in web applications.

MediaElement.js HTML5 Video and Audio Player Can easily added to blogger websites.
Before getting starting with installing Mediaelement.js in Your web application You must view it live.

Live Preview:

1.Include JavaScript and CSS for the HTML5 Video/Audio Player Library

Add the following CDN files into your web page <head> section.

<link href="" rel="stylesheet"/>

<script src=""></script> 
Or download the package from, and add to your website directory

<script src="path/to/mediaelement-and-player.min.js"></script>

<link href="path/to/mediaelementplayer.css" rel="stylesheet">

2.Include Jquerry to load mediaelements.js as a default web media player

HTML5 audio and video elements are allowed to apply the customized framework by mediaelement.js by adding the following JQuery into your body section of your web page.

            if (mejs.Features.isiOS) {
                $('select').find('option[value^="rtmp"]').prop('disabled', true)
                    .find('option[value$="webm"]').prop('disabled', true)
                    .find('option[value$=".mpd"]').prop('disabled', true)
                    .find('option[value$=".ogg"]').prop('disabled', true)
                    .find('option[value*=".flv"]').prop('disabled', true);

            $('select').change(function () {
                    _this = $(this),
                    media = _this.closest('div').prev('div').children('div:first').attr('id');


            $(document).ready(function() {
                $('video, audio').mediaelementplayer({
                    pluginPath: 'dist/',
                    success: function () {
                        $('.player').css('visibility', 'visible');


3.Setup Player

Seting up the Player with Mediaelement.js Framework you will have to Add the class="mejs-player" to any <video>, <audio>, or <iframe> tags, Copy and paste the following code into your web page, replacing the source files with the path to your own media files. Use both OGG and MP3 to ensure cross-browser compatibility, since some browsers don’t support MP3.

HTML5 Video Player and Audio Player

<video class="mejs-player">
    <source src="/path/to/video.mp4" />

<audio src="/path/to/audio.mp4" class="mejs-player"></audio>

Setting Up with Embeddable players (YouTube, etc.)

<iframe class="mejs-player" width="640" height="360" src="" frameborder="0" allowfullscreen></iframe>


MediaElement.js HTML5 Video Player and Audio Player has been tested with the following browsers and assistive technologies.
  • Firefox 3.x and higher
  • Internet Explorer 10 and higher without fallback
  • Internet Explorer 8 and 9, dependent on JW Player as fallback.
  • Google Chrome 7.0 and higher
  • Opera 10.63 and higher
  • Safari 5.0 on Mac OS X
  • Safari on IOS 3.2.2 and higher (audio only, video plays in default IOS player)
  • Chrome on Android 4.2 and higher
As the player is extremely efficient and provides what must users will need. It is a powerful HTML5 audio and video library that creates a unified feel for for all media files (MP4, WebM, MP3, FLV), streaming content (HLS, M(PEG)-DASH, RTMP), and embeddable players like YouTube, Vimeo, DailyMotion, Facebook, and SoundCloud. If you are facing errors during installing MediaElement.js HTML5 Video and Audio Player, please submit them to the Issues queue.Or Comment there our media team will love to help you installing and applying MediaElement.js Framework for your media files over web.
Read more →