Weebly Tricks #94 - Free HTML5 Audio Player with Playlists

Want an audio player with your Free Weebly Account? Or even better put a playlists for your favorite musics? Now you can! Thanks to one of our Weeblers for referring us this code. It has been simplified and should work on every template. Give it a try!!!

CLICK HERE FOR LIVE DEMO

---

FOOTER CODE
Where to place these codes? Click Here!

---

<script type="text/javascript">
var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    audio[0].volume = .10;
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];  
        }
        run($(link),audio[0]);
    });
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
}
    </script>

There is nothing to change here.

---

HEADER CODE
Where to place these codes? Click Here!

---

<style>
#playlist,audio{background:#666;width:400px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
ul a{color:#eeeedd;padding:5px;display:block;}
li a:hover{text-decoration:none;}
</style>

Notes:
Red text - The color of your Audio Player.
Green text - Its width.

---

BODY CODE
Where to place these codes? Click Here!

---

    <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
        <source type="audio/mp3" src="http://mwtdatabase.weebly.com/files/theme/Sample1.mp3">
        Sorry, your browser does not support HTML5 audio.
    </audio>
    <ul id="playlist">
        <li class="active" style="background: #333"><a href="http://mwtdatabase.weebly.com/files/theme/Sample1.mp3">Sample Music 1</a></li>
        <li style="background: #333"><a href="http://mwtdatabase.weebly.com/files/theme/Sample2.mp3">Sample Music 2</a></li>
        <li style="background: #333"><a href="http://mwtdatabase.weebly.com/files/theme/Sample3.mp3">Sample Music 3</a></li>
        <li style="background: #333"><a href="http://mwtdatabase.weebly.com/files/theme/Sample4.mp3">Sample Music 4</a></li>

    </ul>

Notes:
Red text - This is the default music link which is ready to play on the player.
Green text - You music links.
Yellow text - The title of your song.

---

CONCLUSION

---

You can actually separate the playlist from the player and set their own sizes. I really need to use inline CSS because the list styles, if not inline, will affect your navigation menus. I tested the player on my phone and seems working fine.

This tutorial uses the 10 Capsulated Tips and for questions, please use the forum.

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!