February 26, 2015

Weebly Tricks #94 - Free HTML5 Audio Player with Playlists

Posted by Domingo Tambasacan at 2/26/2015

Free HTML5 Audio Player for Free Weebly Accounts


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!!!







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

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



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!

...

4 comments:

  1. Thanks Domz! I finally figured out that I needed to put the jquery.js in the footer, and then it worked for me! Now I am frustrusted trying to get another player--that I would prefer to use--to work: http://jsfiddle.net/xt8mxex0/ I have it working on jsfiddle, but can't get it to work on Weebly. Can you tell me what I need to do to make it work on Weebly?

    ReplyDelete
    Replies
    1. Ross.. If you have not read the most essential tips.. well you need to. Just go to http://www.myweeblytricks.com/2014/08/authors-pick-4-10-capsulated-tips-that.html.

      Delete
  2. Hi,

    I've just subscribed to become a "member" so I can post my questions to your support forum, but it requires the password to enter the forum. I've confirmed my email but how/where do I set up the password???

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top