代码出处:http://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="http://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: "http://inlojv.u.qiniudn.com/music/zwier.z.-numb.mp3", title: "numb" }, { url: "http://inlojv.u.qiniudn.com/music/terran2.mp3", title: "terran2" }];
基本就OK了,剩下的就是CSS,可以自己调整,以上。
最后上个DEMO,无css:
演示地址
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4323.html