html5+css3 制作音乐播放器

//css//

body , html{
    margin:0;
    padding:0;
    font:12px Arial, Helvetica, sans-serif;
    }
 .MusicBox
   {  
        background-color: #212121;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#1B1B1B), to(#212121));
        background-image: -webkit-linear-gradient(top, #1B1B1B, #212121);
        background-image: -moz-linear-gradient(top, #1B1B1B, #212121);
        background-image: -ms-linear-gradient(top, #1B1B1B, #212121);
        background-image: -o-linear-gradient(top, #1B1B1B, #212121);
        background-image: linear-gradient(top, #1B1B1B, #212121);
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        -webkit-box-shadow: 10px 10px 25px #ccc;
        -moz-box-shadow: 10px 10px 25px #ccc;
        box-shadow: 10px 10px 25px #ccc;
        opacity:0.9;
           padding:2px 5px;
        position:absolute;
        z-index:9;
        border-width: 1px;
        border-style: solid;
        border-color: #488BF0 #488BF0 #488BF0 #488BF0;
        width:810px;
        height:40px;
   }

   .LeftControl
   {
      width:0px;
      padding: 10px 10px 10px 10px;
      float:left;
      height:20px;
      background:url(sk-dark.png) left 2px no-repeat;
      margin-right:8px;
      margin-left:10px;
   }
   
   .LeftControl:hover
   {
      background:url(sk-dark.png) left -30px no-repeat;
   }

   
   
   
   .RightControl
   {
      width:0px;
      padding: 10px 10px 10px 10px;
      float:left;
      height:20px;
      background:url(sk-dark.png) left -62px no-repeat;
      margin-right:8px;
   }
   
   .RightControl:hover
   {
      background:url(sk-dark.png) left -93px no-repeat;
   }
   
   
   .ProcessControl
   {
      width:500px;
      padding: 5px 10px 10px 10px;
      float:left;
      height:20px;
      margin-right:12px;
      color:#ffffff;
   }
   
   .ProcessControl .SongName
   {
      float:left;
   }

   .ProcessControl .SongTime
   {
      float:right;      
   }
   
   .ProcessControl .Process
   {
     width: 500px;
     float: left;
     height: 2px;
     cursor: pointer;
     background-color:#000000;   
     margin-top:7px;
   }
   
   .ProcessControl .ProcessYet
   {
     width: 0px;
     position:absolute;     
     height: 2px;
     left:131px;
     top:30px;
     cursor: pointer;
     background-color:#7A8093;
   }
   
   .VoiceEmp
   {
      width:0px;
      padding: 10px 10px 10px 10px;
      float:left;
      height:17px;
      background:url(sk-dark.png) -28px -180px no-repeat;  
      margin-right:2px;  
   }
   
   .VoiceEmp:hover
   {
      background:url(sk-dark.png) -28px -212px no-repeat;
   }
   
   .VoidProcess
   {
     width: 66px;
     height: 2px;
     cursor: pointer;
     background-color:#000;      
     float:left;
     margin-top:19px;
     margin-right:6px;   
   }
   
   .VoidProcessYet
   {
     width: 66px;
     position:absolute;     
     height: 2px;
     left:675px;
     top:21px;
     cursor: pointer;
     background-color:#7A8093;
   }
   
   
   .VoiceFull
   {      
      width:0px;
      padding: 10px 10px 10px 10px;
      float:left;
      height:17px;
      background:url(sk-dark.png) -28px -116px no-repeat;    
   }
   
   .VoiceFull:hover
   {
      background:url(sk-dark.png) -28px -148px no-repeat;    
   }
   
   
   
   .MainControl
   {
      width:25px;
      padding: 10px 15px 5px 10px;
      float:left;
      height:20px;
      background:url(sk-dark.png) -80px -130px no-repeat;    
   }
   
   
   .MainControl:hover
   {
      background:url(sk-dark.png) -80px -166px no-repeat;
   }
   
   
   .StopControl
   {
      width:14px;
      padding: 10px 10px 5px 10px;
      float:left;
      height:20px;
      background:url(sk-dark.png) -50px -130px no-repeat;
      margin-right:16px;   
   }
   
   
   .StopControl:hover
   {
      background:url(sk-dark.png) -50px -165px no-repeat;
   }
   
   
   .MusicList
   {
        background-color:#0FF;
        border-width: 1px;
        border-style: solid;
        border-color: #488BF0 #488BF0 #488BF0 #488BF0;
        width:600px;
        height:200px;
       opacity:0.9;
       padding:2px 5px;
       position:absolute;
       z-index:1000;
       display:none;
   }
   
   .MusicList .url
   {
        background-color:#FFF;
        font:14px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    
        width:158px;
        height:200px;
        float:left;
   }
   
   .MusicList .List
   {
       background-color: #212121;    
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       border-radius: 3px;
       
       width:410px;
       height:180px;
       float:right;
       overflow:hidden;
       padding:10px 13px;
       color:#fff;       
   }
   
     .MusicList .List .Single
    {
        width:100%;
        float:left;
        overflow:hidden;
        height:15px;
        font-size:13px;
        cursor:pointer;
        margin-bottom:8px;
    }
   
     .MusicList .List .Single .SongName
     {
       width:90%;
       float:left;
     }
     
     
     .ShowMusicList
     {        
      width:10px;
      padding: 10px 10px 5px 10px;
      float:left;
      height:10px;
      background:#039;
      margin:5px 0 0 12px;
      cursor:pointer;
     }
     
     .ShowMusicList:hover
     {        
      background:red;
     }

 

//js//

$(document).ready(function () {
    //获取音频工具
    var audio = document.getElementById("myMusic");
    //alert("aaa");
    //开始，暂停按钮
    $("#MainControl")._toggle(function () {
        $(this).removeClass("MainControl").addClass("StopControl");
        if (audio.src == "") {
            var Defaultsong = $(".Single .SongName").eq(0).attr("KV");
            $(".MusicBox .ProcessControl .SongName").text(Defaultsong);
            $(".Single .SongName").eq(0).css("color", "#7A8093");
            audio.src = "Media/" + Defaultsong + ".mp3";
        }
        audio.play();
        TimeSpan();
    }, function () {
        $(this).removeClass("StopControl").addClass("MainControl");
        audio.pause();
    });


    //歌曲列表的选择操作
    $(".MusicList .List .Single .SongName").click(function () {
        $(".MusicList .List .Single .SongName").css("color", "#fff");
        $("#MainControl").removeClass("MainControl").addClass("StopControl");
        $(this).css("color", "#7A8093");
        var SongName = $(this).attr("KV");
        $(".MusicBox .ProcessControl .SongName").text(SongName);
        audio.src = "Media/" + SongName + ".mp3";
        audio.play();
        TimeSpan();
    });

    //左前进按钮
    $(".LeftControl").click(function () {
        $(".MusicList .List .Single .SongName").each(function () {
            if ($(this).css("color") == "rgb(122, 128, 147)") {
                var IsTop = $(this).parent(".Single").prev(".Single").length == 0 ? true : false;  //检查是否是最顶端的歌曲
                var PrevSong;
                if (IsTop) {
                    PrevSong = $(".Single").last().children(".SongName").attr("KV");
                    $(".Single").last().children(".SongName").css("color", "#7A8093");
                }
                else {
                    PrevSong = $(this).parent(".Single").prev(".Single").children(".SongName").attr("KV");
                    $(this).parent(".Single").prev(".Single").children(".SongName").css("color", "#7A8093");
                }

                audio.src = "Media/" + PrevSong + ".mp3";
                $(".MusicBox .ProcessControl .SongName").text(PrevSong);
                $(this).css("color", "#fff");
                audio.play();
                return false; //代表break
            }
        })
    });

    //右前进按钮
    $(".RightControl").click(function () {
        $(".MusicList .List .Single .SongName").each(function () {
            if ($(this).css("color") == "rgb(122, 128, 147)") {
                var IsBottom = $(this).parent(".Single").next(".Single").length == 0 ? true : false;  //检查是否是最尾端的歌曲
                var NextSong;
                if (IsBottom) {
                    NextSong = $(".Single").first().children(".SongName").attr("KV");
                    $(".Single").first().children(".SongName").css("color", "#7A8093");
                }
                else {
                    NextSong = $(this).parent(".Single").next(".Single").children(".SongName").attr("KV");
                    $(this).parent(".Single").next(".Single").children(".SongName").css("color", "#7A8093");
                }

                audio.src = "Media/" + NextSong + ".mp3";
                $(".MusicBox .ProcessControl .SongName").text(NextSong);
                $(this).css("color", "#fff");
                audio.play();
                return false; //代表break
            }
        })
    });

    //静音按钮
    $(".VoiceEmp").click(function () {
        $(".VoidProcessYet").css("width", "0");
        audio.volume = 0;
    });

    //满音量按钮
    $(".VoiceFull").click(function () {
        $(".VoidProcessYet").css("width", "66px");
        audio.volume = 1;
    });

    /*
    之前一直考虑进度条的原理，这边进度条的做法启发自腾讯一款播放器的做法，采用两个2px高度的div，重叠，
    上面那个与下面那个div的颜色不一样，用于区分进度,顶层div的width是根据播放的长度来调整的，width越长，说明播放越长，
    知道上层的div完全覆盖下面的div，达到长度的一致，说明播放完毕。我们的播放进度条和音量进度条都是这样做的
    */

    // 音频进度条事件（进度增加）
    $(".Process").click(function (e) {

        //播放进度条的基准参数
        var Process = $(".Process").offset();
        var ProcessStart = Process.left;
        var ProcessLength = $(".Process").width();


        var CurrentProces = e.clientX - ProcessStart;
        DurationProcessRange(CurrentProces / ProcessLength);
        $(".ProcessYet").css("width", CurrentProces);
    });

    //音频进度条事件（进度减少）
    $(".ProcessYet").click(function (e) {

        //播放进度条的基准参数
        var Process = $(".Process").offset();
        var ProcessStart = Process.left;
        var ProcessLength = $(".Process").width();

        var CurrentProces = e.clientX - ProcessStart;
        DurationProcessRange(CurrentProces / ProcessLength);
        $(".ProcessYet").css("width", CurrentProces);
    });

    //音量进度条事件（进度增加）
    $(".VoidProcess").click(function (e) {
        //音量进度条的基准参数
        var VoidProcess = $(".VoidProcess").offset();
        var VoidProcessStart = VoidProcess.left;
        var VoidProcessLength = $(".VoidProcess").width();

        var CurrentProces = e.clientX - VoidProcessStart;
        VolumeProcessRange(CurrentProces / VoidProcessLength);
        $(".VoidProcessYet").css("width", CurrentProces);
    });

    //音量进度条时间（进度减少）
    $(".VoidProcessYet").click(function (e) {
        //音量进度条的基准参数
        var VoidProcess = $(".VoidProcess").offset();
        var VoidProcessStart = VoidProcess.left;
        var VoidProcessLength = $(".VoidProcess").width();

        var CurrentProces = e.clientX - VoidProcessStart;
        VolumeProcessRange(CurrentProces / VoidProcessLength);
        $(".VoidProcessYet").css("width", CurrentProces);
    });

    //显示音乐列表事件
    $(".ShowMusicList").toggle(function () {
        $(".MusicList").show();

        var MusicBoxRight = $(".MusicBox").offset().left + $(".MusicBox").width();
        var MusicBoxBottom = $(".MusicBox").offset().top + $(".MusicBox").height();
        $(".MusicList").css("left", MusicBoxRight - $(".MusicList").width());
        $(".MusicList").css("top", MusicBoxBottom + 15);
    }, function () {
        $(".MusicList").hide();
    });


    //监听媒体文件结束的事件（ended），这边一首歌曲结束就读取下一首歌曲，实现播放上的循环播放
    audio.addEventListener('ended', function () {
        $(".MusicList .List .Single .SongName").each(function () {
            if ($(this).css("color") == "rgb(122, 128, 147)") {
                var IsBottom = $(this).parent(".Single").next(".Single").length == 0 ? true : false;  //检查是否是最尾端的歌曲
                var NextSong;
                if (IsBottom) {
                    NextSong = $(".Single").first().children(".SongName").attr("KV");
                    $(".Single").first().children(".SongName").css("color", "#7A8093");
                }
                else {
                    NextSong = $(this).parent(".Single").next(".Single").children(".SongName").attr("KV");
                    $(this).parent(".Single").next(".Single").children(".SongName").css("color", "#7A8093");
                }

                audio.src = "Media/"+ NextSong + ".mp3";
                $(".MusicBox .ProcessControl .SongName").text(NextSong);
                $(this).css("color", "#fff");
                audio.play();
                return false; //代表break
            }
        });
    }, false);


});

//音量进度条的转变事件
function VolumeProcessRange(rangeVal) {
    var audio = document.getElementById("myMusic");
    audio.volume = parseFloat(rangeVal);
}

//播放进度条的转变事件
function DurationProcessRange(rangeVal) {
    var audio = document.getElementById("myMusic");
    audio.currentTime = rangeVal * audio.duration;
    audio.play();
}

//播放事件
function Play(obj) {
    var SongUrl = obj.getAttribute("SongUrl");
    var audio = document.getElementById("myMusic");
    audio.src = "Media/" + SongUrl + ".mp3";
    audio.play();
    TimeSpan();
}

//暂停事件
function Pause() {
    var audio = document.getElementById("myMusic");
    $("#PauseTime").val(audio.currentTime);
    audio.pause();
}

//继续播放事件
function Continue() {
    var audio = document.getElementById("myMusic");
    audio.startTime = $("PauseTime").val();
    audio.play();
}

//时间进度处理程序
function TimeSpan() {
    var audio = document.getElementById("myMusic");
    var ProcessYet = 0;
    setInterval(function () {
        var ProcessYet = (audio.currentTime / audio.duration) * 500;
        $(".ProcessYet").css("width", ProcessYet);
        var currentTime = timeDispose(audio.currentTime);
        var timeAll = timeDispose(TimeAll());
        $(".SongTime").html(currentTime + " | " + timeAll);
    }, 1000);
}

//时间处理，因为时间是以为单位算的，所以这边执行格式处理一下
function timeDispose(number) {
    var minute = parseInt(number / 60);
    var second = parseInt(number % 60);
    minute = minute >= 10 ? minute : "0" + minute;
    second = second >= 10 ? second : "0" + second;
    return minute + ":" + second;
}

//当前歌曲的总时间
function TimeAll() {
    var audio = document.getElementById("myMusic");
    return audio.duration;
}

 

//html//

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>music</title>
    <script src="jquery-1.4.1.min.js" type="text/javascript" ></script>
    <script src="music.js" type="text/javascript" ></script>
    <link type="text/css" href="music.css" rel="Stylesheet" />
</head>
<body>

  <audio id="myMusic" > </audio>
  <input id="PauseTime"  type="hidden" />

  <div class="MusicBox" >
                    <div class="LeftControl" ></div>
                   <div id="MainControl" class="MainControl" ></div>
                    <div class="RightControl" ></div>
                 <div class="ProcessControl">
                             <div class="SongName">Blockly Music!</div>  <div class="SongTime">00:00&nbsp;|&nbsp;00:00</div>
                              <div class="Process" ></div>
                           <div class="ProcessYet"></div>
                 </div>

                <div class="VoiceEmp"></div>
                <div class="VoidProcess" ></div>
                 <div class="VoidProcessYet" ></div>
                <div class="VoiceFull" ></div>
                <div class="ShowMusicList" >▽</div>
  </div>

  <div class="MusicList">
              <div class="url" >也可以输入音乐url</div>
               <div class="List" >
                                <div class="Single" ><span class="SongName"   KV="情歌" >01.情歌</span> </div>
                                <div class="Single" ><span class="SongName"  KV="因为爱情">02.因为爱情</span> </div>
                                <div class="Single" ><span class="SongName"  KV="李克勤月半小夜曲">03.李克勤月半小夜曲</span> </div>
                                <div class="Single" ><span class="SongName"  KV="Beyond、黄家驹 - 喜欢你">04.Beyond、黄家驹 - 喜欢你</span> </div>
                                <div class="Single" ><span class="SongName"  KV="德国第一装甲师进行曲">05.德国第一装甲师进行曲</span> </div>
               </div>
  </div>

</body>
</html>
申明：本人小白  文章参考别人 并整合 经测试无问题  用于自勉学习 ！