HTML5复古音乐播放器代码_jQuery音乐播放器插件
程序员文章站
2022-03-01 12:57:38
...
分享一个html5复古风格音乐播放器、Demo代码非常简单、可以很容易的集成到自己的项目、本Demo是一款简单使用的jQuery HTML5实现的MP3音乐播放器、在点击播放的时候由于歌曲下载时间的问题、要等一会才会有声音、多等一会就好咯、下面是Demo运行效果图、供大家参考、有需要的哥们可以下载看看、以前也有分享过类似的Demo、在右上方搜索一下就好咯
html代码
<div id="cdPlayer"> <div id="myConsole">曲名</div> <div id="CD"> <div id="cdDisk"></div> <div id="cdCover"></div> </div> <div id="cdControllerArm"></div> <div id="playMode"> <div id="shuffleMode" class="mode" title="随机播放"><i class="iconfontPlayMode"></i> </div> <div id="listMode" class="mode" title="顺序播放"><i class="iconfontPlayMode"></i> </div> <div id="loopMode" class="mode" title="单曲循环"><i class="iconfontPlayMode"></i> </div> </div> <div id="controllerButton"> <div id="playBtn" class="button" title="播放"><i class="iconfont"></i> </div> <div id="pauseBtn" class="button" title="暂停"><i class="iconfont"></i> </div> <div id="nextBtn" class="button" title="下一曲"><i class="iconfont"></i> </div> <div id="preBtn" class="button" title="上一曲"><i class="iconfont"></i> </div> <div id="stopBtn" class="button" title="停止"><i class="iconfont"></i> </div> <div id="muteBtn" class="button" title="静音"><i class="iconfont"></i> </div> <div id="firstBtn" class="button" title="首曲"><i class="iconfont"></i> </div> <div id="lastBtn" class="button" title="末曲"><i class="iconfont"></i> </div> </div> </div>
jQuery代码
$().ready(function () { init(); for(var i = 0; i < songsList.length; i ) { songsList[i].musicURL = encodeURI(songsList[i].musicURL); } myAudio.src = decodeURI(songsList[songsListIndex].musicURL); /*^_^------------------some event listeners-------------------^_^*/ myAudio.addEventListener(´ended´, function () { controllArm.style.transform="rotate(-130deg)" if(playMode == "list") { songsListIndex ; if (songsListIndex >= songsList.length 1) songsListIndex = 0; } else if(playMode == "shuffle") { songsListIndex = shuffle(); } else { songsListIndex = songsListIndex; } myAudio.src = decodeURI(songsList[songsListIndex].musicURL); myAudio.load(); iStartDeg = -95; iEndDeg = -120; myAudio.play(); }, false); myAudio.addEventListener("timeupdate", function () { var $myCon = $("#myConsole"); if (!isNaN(myAudio.duration)) { var progressValue = myAudio.currentTime/myAudio.duration; if(myAudio.paused) return;//confrim the controllerArm can be rotated immediately iStartDeg = -95 - 25 * progressValue; controllArm.style.transform = "rotate(" iStartDeg "deg)"; $myCon.text(songsList[songsListIndex % songsList.length].title "-" songsList[songsListIndex % songsList.length].artist); } else $myCon.text("error"); }, false); });
源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1kT728gn 密码: rsi3