[jQuery]超简单的Html5音乐播放器

代码出处：https://soz.im/jqueryhtml5-to-create-super-simple-music-player.html

这是soz里面的一篇教程，不过我直接用里面的代码搞不定，根据评论里的一些bug反馈纠正后也不行，索性自己发一篇代码无误的教程，再次重申：以下代码出自soz.im，链接参照上方。
首先html5播放器按我个人的理解是采用了audio这样一个html5标签，然后使用js将音乐链接插入该标签内，并且控制其播放 更换链接等操作。下面是具体步骤

html结构，包括css3圆形动画（这个可以自己从网上找）、播放、暂停、上一首、下一首等按钮

<div id="headwapper"> 
 <div id="head"> 
  <div id="musictitle"> 
   <div id="musicload"></div> 
   <div class="info"></div> 
  </div> 
  <span class="titleone"><a href="https://soz.im/" title="" rel="home"></a> 
   <div id="yuan"> 
    <div class="circle"></div> 
    <div class="circle1"></div> 
    <audio class="aud"> 
     <p>Oops, looks like your browser doesn't support HTML 5 audio.</p> 
    </audio> 
    <div id="music"> 
     <a class="mprev" href="#1">◀‖</a> 
     <a class="mnext" href="#1">‖▶</a> 
     <a class="mplay" href="#1">▶</a> 
     <a class="mpause" href="#1">■</a> 
    </div> 
   </div> </span> 
 </div> 
</div>

js控制部分，需要加载jquery库，后半部分是音乐地址，可以自己依样画葫芦添加更多

jQuery(document).ready(function() {
    var aud = $(".aud").get(0);
    aud.pos = -1;
    $("#music .mplay").bind("click", function(b) {
        b.preventDefault();
        0 > aud.pos ? $("#music .mnext").trigger("click") : (aud.play(), $(this).fadeOut(200, function() {
            $(".mpause").fadeIn(100);
            $(".info").slideDown(200, function() {
                $("#musicload").show()
            })
        }))
    });
    $("#music .mpause").bind("click", function(b) {
        b.preventDefault();
        aud.pause();
        $(this).fadeOut(200, function() {
            $(".mplay").fadeIn(100);
            $("#musicload").hide();
            $(".info").slideUp(200)
        })
    });
    $("#music .mnext").bind("click", function(b) {
        b.preventDefault();
        aud.pause();
        aud.pos++;
        aud.pos == playlist.length && (aud.pos = 0);
        aud.setAttribute("src", playlist[aud.pos].url);
        $(".info").html(playlist[aud.pos].title);
        aud.load()
    });
    $("#music .mprev").bind("click", function(b) {
        b.preventDefault();
        aud.pause();
        aud.pos--;
        0 > aud.pos && (aud.pos = playlist.length - 1);
        aud.setAttribute("src", playlist[aud.pos].url);
        $(".info").html(playlist[aud.pos].title);
        aud.load()
    });
    aud.addEventListener("canplay", function(a) {
        $("#music .mplay").trigger("click")
    });
    aud.addEventListener("ended", function(a) {
        $("#music .mnext").trigger("click")
    });
    aud.addEventListener("progress", function(a) {
        var c = parseInt($("#musictitle").css("width"));
        a = Math.round(aud.loaded / aud.total * 100);
        c = Math.ceil(c / 100 * a);
        $("#musicload").css("width", c)
    });
    aud.addEventListener("timeupdate", function(b) {
        b = parseInt($("#musictitle").css("width"));
        var c = Math.round(aud.currentTime / aud.duration * 100);
        b = Math.ceil(b / 100 * c);
        $("#musicload").css("width", b)
    });
    $(".info").html(playlist[0].title)
});

var playlist = [{
    url: "https://inlojv.u.qiniudn.com/music/zwier.z.-numb.mp3",
    title: "numb"
}, {
    url: "https://inlojv.u.qiniudn.com/music/terran2.mp3",
    title: "terran2"
}];

基本就OK了，剩下的就是CSS，可以自己调整，以上。
最后上个DEMO，无css：
演示地址