这个是放在侧边的,事先隐藏,鼠标悬停则滑出播放器,并且滑出播放曲目名称和播放进度。下面是封装,搬过去即可直接使用。

HTML结构

按键都使用svg图标,不需要图片。

<div id="music_player" class="tra">
    <div id="sidebar-player"> 
        <audio class="aud"> 
        <p>Oops, looks like your browser doesn't support HTML 5 audio.</p> 
        </audio>                 
        <span class="css-loading"></span>
        <div id="sidebar-music"> 
            <div class="mprev" href="#1"><svg class="icon-mprev" style="width:24px;height24px;fill:#111;opacity:0.4"><path d="M4 28v-24h4v11l10-10v10l10-10v22l-10-10v10l-10-10v11z"></path></svg></div>
            <div class="mplay" href="#1"><svg class="icon" viewBox="0 0 32 32" style="width:20px;height:20px;fill:#ddd;"><path d="M6 4l20 12-20 12z"></path></svg></div>  
            <div class="mpause" href="#1"><svg class="icon" viewBox="0 0 32 32" style="width:20px;height:20px;fill:#ddd;"><path d="M4 4h10v24h-10zM18 4h10v24h-10z"></path></svg></div>
            <div class="mnext" href="#1"><svg class="icon" style="width:24px;height:24px;fill:#111;opacity:0.4"><path d="M28 4v24h-4v-11l-10 10v-10l-10 10v-22l10 10v-10l10 10v-11z"></path></svg></div>
            <div class="clear"></div>
        </div> 
        <div class="clear"></div>
    </div>
</div>
<div id="musictitle" class="tra">
    <div id="musicload"></div> 
    <div class="info"></div> 
</div>

CSS样式

/*播放器动画*/
.css-loading{position:relative;top:7px;left: 1px;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:#333;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)}}
/*侧边播放器*/
#music_player{font-family:"Microsoft YaHei";position:fixed;top:auto;left:-46px;bottom:80px;z-index:999;width:55px;height:50px;cursor:pointer;padding:4px;box-sizing:border-box;text-align:center;font-size:14px;background:#333;color:#fff;}
#music_player:hover{left:-4px}
	#sidebar-player{width:50px;height:50px;position:absolute;left:50%;top:50%;margin-left:-25px;margin-top:-25px;}
	#sidebar-music{position: relative;z-index:9}
	#sidebar-music div{font-size:28px!important;cursor:pointer;color:#3D4450}
	#sidebar-music .mplay{width: 50px;height: 50px;border-radius: 60px;position: absolute;left:9px;top:-34px;opacity: 0.7;}
	#sidebar-music .mpause{width: 50px;height: 50px;border-radius: 60px;position: absolute;left:7px;top:-34px;opacity:0.5;display:none}
	#sidebar-music .mprev{width: 50px;height: 50px;position: absolute;left: -80px;top:-39px;opacity: 0;display:none}
	#sidebar-music .mnext{width: 50px;height: 50px;position: absolute;right: -80px;top:-39px;opacity: 0;display:none}
	#sidebar-music svg{left: 50%;position: absolute;top: 50%;margin: -16px 0px 0px -16px;}
	
	#musictitle{position:fixed;bottom:-40px;z-index:999;width:100%;height:40px;background:rgba(0,0,0,0.4);color:#eee;text-align:center}
	#musictitle:hover{background:rgba(0,0,0,0.7)}
	#musictitle .info{font-size:13px;line-height:40px;position: relative;}
	#musicload{background:rgba(30,144,255,0.5);height:40px;position: absolute;}

JS控制

//——————————————————————侧边播放器
jQuery(document).ready(function() {
    var aud = $(".aud").get(0);
    aud.pos = -1;

    // 播放按钮
    $("#sidebar-music .mplay").bind("click", function(b) {
        b.preventDefault();
        0 > aud.pos ? $("#sidebar-music .mnext").trigger("click") : (aud.play(), $(this).fadeOut(200, function() {
            $(".mpause").fadeIn(100);
            $(".info").slideDown(200, function() { // 播放列表下滑出
                $("#musicload").show();
            });
        }));
    });
    // 暂停按钮
    $("#sidebar-music .mpause").bind("click", function(b) {
        b.preventDefault();
        aud.pause();
        $(this).fadeOut(200, function() {
            $(".mplay").fadeIn(100);
            $("#musicload").hide();
            $(".info").slideUp(200);
        });
    });
    // 下一首按钮
    $("#sidebar-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();
    });
    // 上一首按钮
    $("#sidebar-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) {
        $("#sidebar-music .mplay").trigger("click"); // 触发点击事件
    });
    aud.addEventListener("ended", function(a) {
        $("#sidebar-music .mnext").trigger("click"); // 触发点击事件
    });
    // 进度条计算长度
    aud.addEventListener("progress", function(a) {
        var c = parseInt($("#musictitle").css("width"));
        a = Math.round(aud.loaded / aud.total * 1000);
        c = Math.ceil(c / 1000 * a);
        $("#musicload").css("width", c);
    });
    aud.addEventListener("timeupdate", function(b) {
        b = parseInt($("#musictitle").css("width"));
        var c = Math.round(aud.currentTime / aud.duration * 1000);
        b = Math.ceil(b / 1000 * c);
        $("#musicload").css("width", b);
    });
    $(".info").html(playlist[0].title);
    
    // 自动播放,这个必须放在最后
    if(autoplay == 'true'){
        $("#sidebar-music .mnext").trigger("click");
    }
    // 悬停播放器时弹出进度条和曲目名称
    $('#music_player').mouseenter(function(){$('#musictitle').animate({bottom:"0px"},310);});
    $('#music_player').mouseleave(function(){$('#musictitle').delay(1500).animate({bottom:"-40px"},110);});
});
var playlist = [{
    url: m_url1,
    title: m_title1
}, {
    url: "http://www.inlojv.com/music/UniverseMood.mp3",
    title: "UniverseMood - 机战OL"
}, {
    url: "http://www.inlojv.com/music/letitgo.mp3",
    title: "Let It Go - Shinhwa"
}, {
    url: "http://www.inlojv.com/music/TriumphV2.mp3",
    title: "TriumphV2 - Frozen Synapse"
}, {
    url: "http://www.inlojv.com/music/youlechang.mp3",
    title: "游乐场 - 谢霆锋"
}, {
    url: "http://www.inlojv.com/music/DeathNote.mp3",
    title: "DeathNote - 死亡笔记"
}];

js里面有一个条件判断是否要自动播放,通过php进行传值,自行修改。That's all.