欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  技术分享

HTML5复古音乐播放器代码_jQuery音乐播放器插件

程序员文章站 2022-03-01 12:57:38
...

分享一个html5复古风格音乐播放器、Demo代码非常简单、可以很容易的集成到自己的项目、本Demo是一款简单使用的jQuery HTML5实现的MP3音乐播放器、在点击播放的时候由于歌曲下载时间的问题、要等一会才会有声音、多等一会就好咯、下面是Demo运行效果图、供大家参考、有需要的哥们可以下载看看、以前也有分享过类似的Demo、在右上方搜索一下就好咯

HTML5复古音乐播放器代码_jQuery音乐播放器插件


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">&#xe85e;</i>&nbsp;</div>
        <div id="listMode" class="mode" title="顺序播放"><i class="iconfontPlayMode">&#xe7ec;</i>&nbsp;</div>
        <div id="loopMode" class="mode" title="单曲循环"><i class="iconfontPlayMode">&#xe7df;</i>&nbsp;</div>
    </div>
    <div id="controllerButton">
        <div id="playBtn" class="button" title="播放"><i class="iconfont">&#xe830;</i>&nbsp;</div>
        <div id="pauseBtn" class="button" title="暂停"><i class="iconfont">&#xe81f;</i>&nbsp;</div>
        <div id="nextBtn" class="button" title="下一曲"><i class="iconfont">&#xe811;</i>&nbsp;</div>
        <div id="preBtn" class="button" title="上一曲"><i class="iconfont">&#xe826;</i>&nbsp;</div>
        <div id="stopBtn" class="button" title="停止"><i class="iconfont">&#xe875;</i>&nbsp;</div>
        <div id="muteBtn" class="button" title="静音"><i class="iconfont">&#xe8b1;</i>&nbsp;</div>
        <div id="firstBtn" class="button" title="首曲"><i class="iconfont">&#xe787;</i>&nbsp;</div>
        <div id="lastBtn" class="button" title="末曲"><i class="iconfont">&#xe7cc;</i>&nbsp;</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