搞了一晚终于搞定了，html5音乐播放器，顾名思义，只有支持html5标签的浏览器才能播放，实际上就是用了一个简单的<audio>标签，然后通过js将链接插入该标签，并且控制播放、暂停等操作。下面是详细步骤（自动播放版）

html结构，这里主要包含了<audio>标签，和一些播放按钮a标签 以及播放列表盒子等等

<div id="html5player"> 
    <audio class="aud"> 
    <p>Oops, looks like your browser doesn't support HTML 5 audio.</p> 
    </audio>
    <span class="css-loading"></span>
    <div id="music"> 
        <a class="mprev" href="#1"><span class="fa fa-fast-backward"></span></a>  
        <a class="mnext" href="#1"><span class="fa fa-fast-forward"></span></a>  
        <a class="mplay" href="#1"><span class="fa fa-play"></span></a>  
        <a class="mpause" href="#1"><span class="fa fa-pause"></span></a> 
        <div class="clear"></div>
    </div> 
    <div class="clear"></div>
</div> 
<div id="musictitle"> 
    <div id="musicload"></div> 
    <div class="info"></div> 
</div>

其中用到fa图标字体作为按钮图标。

接着就是JS部分，用到jQuery，所以要加载jQuery库 1.11.1版无压力，之后使用下面的jq代码控制播放动作

// HTML5音乐播放器
jQuery(document).ready(function() {
    var aud = $(".aud").get(0);
    aud.pos = -1;
    
    // 自动播放开始
    aud.pos++;
    aud.pos == playlist.length && (aud.pos = 0);
    aud.setAttribute("src", playlist[aud.pos].url);
    $(".info").html(playlist[aud.pos].title);
    aud.load();
    aud.play();
    //自动播放结束
    
    // 上一首、下一首按钮滑出
    $("#html5player").hover(function() {
        $(".mprev").animate({left: "-35px",opacity:"1"}, 100);
        $(".mnext").animate({left: "19px",opacity:"1"}, 100)
    }, function() {
        $(".mprev").animate({left: "0px",opacity:"0"}, 100);
        $(".mnext").animate({left: "0px",opacity:"0"}, 100);
    });
    // 播放按钮
    $("#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.play(); // 如果是手动播放改为 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.play();
    });
    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);
});
// mp3列表
var playlist = [{
    url: "http://hrnl0l.u.qiniudn.com/music/BambooDance.mp3",
    title: "BambooDance"
}, {
    url: "http://hrnl0l.u.qiniudn.com/music/winterfall.mp3",
    title: "冬 雨"
}, {
    url: "http://hrnl0l.u.qiniudn.com/music/ibeleve.mp3",
    title: "I Beleve"
}, {
    url: "http://hrnl0l.u.qiniudn.com/music/xiexienidengwo.mp3",
    title: "谢谢你等我"
}, {
    url: "http://hrnl0l.u.qiniudn.com/music/zwier.z.-in_the_end.mp3",
    title: "In the ends"
}];

剩下就是css了，上面有一个css3圆圈转动的动画，其他就是按钮的位置而已。

.css-loading{position:relative;top:7px;display:inline-block;width:25px;height:25px;border:5px solid #e6eaed;border-radius:50%}
.css-loading:after{position:absolute;top:8px;left:-6px;width:37px;height:10px;background:#3d4450;content:'';animation:spin 1.2s infinite;-webkit-animation:spin 1.2s infinite;-moz-animation:spin 1.2s infinite;-o-animation:spin 1.2s infinite;-ms-animation:spin 1.2s infinite}
@keyframes spin{100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
@-webkit-keyframes spin{100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
.mplayer{position:relative;top:-5px;left:-29px;z-index:0;opacity:.3;cursor:pointer}
/*html5播放器*/
#html5player{float: right;width:50px;height:50px;position:relative;left:-10px;top: 1px;}
#music{position:relative;top:-34px;left:8px}
#music a{font-size:15px!important;position:relative;color:#bbb}
#music a.mplay{top:8px;left:-33px}
#music a.mpause{display:none;top:8px;left:-34px;font-size:13px!important;}
#music a.mprev{opacity:0;top: 8px;}
#music a.mnext{opacity:0;top: 8px;}
#musictitle{position:relative;width:184px;height:50px;float: right;top:-52px;left:200px;}
#musicload{width:0px;height:50px;position:absolute;background:#428bca;}
#musicload,.info{display:none;}
.info{position:relative;height:50px;line-height:50px;padding:0 10px;text-align:center;color:#fff;width:184px;background:#333;opacity:0.5}

大功告成，其实蛮简单的，最后是演示地址（样式和上面的不同，这个是直接扒下来的样子）：
演示地址