How to Add An Audio Player to Your Website

Today’s tutorial we will learn how to add audio music player into websites or blogger. This audio player coded with jQuery, HTML5 & CSS3. you'll be able to simply use this easy player to your website . You can also download & coustomize the css, and js files and also upload to your own hosting. This audio player also works for older browsers using Flash and Silverlight . there is varying support for different file formats.

Click Here for DEMO

The following code should play audio files in a web pages:

1. Sign into Blogger Dashboard 
2. Now go to Template >> Edit HTML
3. Ctrl +F  and search for the ending </head> tag and just above it paste the following code.

<!-- Audio Player CSS & Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/o0dn83pzj8s8cpk/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/gzlhi56sfn3tn3i/style.css" media="screen">
<!-- end Audio Player CSS & Scripts -->

4. After past the above code just press the “Save Template” button

Now go to next step.
The next thing is to add the HTML5 music player either in your sidebar or into specific page/posts  or anywhere else. It would work perfectly well everywhere. Just copy and paste the following code where you want to display HTML5 Audio player.

<!-- Audio Player HTML -->
<div class="audio-player">
<div id="autocolor"></div>
<h1>Demo - Preview Song</h1>
<img class="cover" src="cover.jpg" alt="cover">
<audio id="audio-player" src="demo.mp3" type="audio/mp3" controls="controls"></audio>
</div>
<script>
$(document).ready(function() {
$('#audio-player').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause','volume','progress'],
audioVolume: 'horizontal',
audioWidth: 200,
audioHeight: 100
});
});
</script><!-- end Audio Player HTML --> 

You can easily change the value in secound code.

• Change the value with song name: <h1>Demo - Preview Song</h1>
• Change the value with song name: <img class="cover" src="cover.jpg" alt="cover">
• Change the value with song name:  <audio id="audio-player" src="demo.mp3" type="audio/mp3" controls="controls"></audio>

Add Following tag to change the code.

Tag to play music again and again (Looping) : autoload="true"

Code to play Automatically : autoplay="true"

If you have any question let me know in the comments. Also don’t forget to leave some feedback and share it with your friends. Follow us if you want to be the first to know about the latest tutorials and articles.