Home HTML5 Audio Player A Complete HTML5 Audio Player for your website

Friday, 24 February 2017

A Complete HTML5 Audio Player for your website

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 ).

Preview

Demo

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">
    <p>
        <audio id="yourAudio">
            <source src='http://178.219.160.126:8000/stream.mp3' type='audio/mpeg' preload="auto" />
        </audio>
        <a id="audioControl" href="#">
            <img src="https://mymediaelements.github.io/html5audioplayer/images/play-flat.png" id="play"/>
            <img src="https://mymediaelements.github.io/html5audioplayer/images/pause-flat.png" id="pause"/>
        </a>
    </p>
  Designed by <a href="mediaelements.com">mediaelements.com</a>
</div>
Change the Audio File source path in a default Audio Media elements. 


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

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. 

<style>
#audioControl img {
    width: 50px;
    height: 50px;
    
}

#pause {
    display: none;
}

</style>
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. 

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

function toggleButton() {
    if (playButton.style.display === 'none') {
        playButton.style.display = 'block';
        pauseButton.style.display = 'none';
    } else {
        playButton.style.display = 'none';
        pauseButton.style.display = 'block';
    }
}

ctrl.onclick = function () {

    if (yourAudio.paused) {
        yourAudio.play();
    } else {
        yourAudio.pause();
    }
    
    toggleButton();

    // Prevent Default Action
    return false;
};


</script>
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.
Share

Related HTML5 Elements