html5 简单音乐播放器

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

  <title></title>

  <style type="text/css">

    body{font-family:微软雅黑;}

    #container{width:500px;margin:10px auto;border:1px solid #ccc;background:#999999;border-radius:5px;padding:10px;}

    #mName{float:left;width:250px;}

    #mTime{float:left;width:250px;text-align:right;}

    #player{margin-top:20px;}

    #media{width:450px;}

    ul{list-style:none;padding-left:5px;}

    ul li{margin-top:5px;}

    #mList{height:200px;}

    #changeMusic{text-align:right;}

    a{text-decoration:none;color:black;}

    a:hover{color:red;}

  </style>

  <script>

    //声明两个数组，用来存储歌曲名称和文件地址

    var musicNames=[],musicSrcs=[],randomNums=[];

    var RANDOMNUM=5;//随机的歌曲数量

    function $(id){

        return document.getElementById(id);

    }

    function initial(){

        //为数组赋值

        musicNames[0]="Blood Money.mp3";

        musicNames[1]="California Hotel.mp3";

        musicNames[2]="Loving You.mp3";

        musicNames[3]="Miracle.mp3";

        musicNames[4]="SantaFe.mp3";

        musicNames[5]="Wonderful Tonight.mp3";

        musicSrcs[0]="music/Blood Money.mp3";

        musicSrcs[1]="music/CalifoniaHotel.mp3";

        musicSrcs[2]="music/Loving You.mp3";

        musicSrcs[3]="music/Miracle.mp3";

        musicSrcs[4]="music/SantaFe.mp3";

        musicSrcs[5]="music/Wonderful Tonight.mp3";

        //获取元素

        media = $("media");

        //绑定事件

        media.addEventListener("canplay",media_canplay,false);

        media.addEventListener("play",media_play,false);

        //获取歌曲

        loadMusic();

    }

    /**

     * 判断r在randomNums中是否已经存在

     * return true : 已经存在

     * return false : 不存在

     */

    function checkRExists(r){

        for(var i=0;i<randomNums.length;i++){

            if(randomNums[i] == r){

                //存在

                return true;

            }

        }

        return false;

    }

    /**

     * 方法：用于生成指定个数随机数

     * 如果碰到重复的数字，则重新生成

     */

    function generateRandom(){

        var i=0;

        for(;;){

            var r = parseInt(Math.random() * musicNames.length);

            //判断r是否已经生成过

            if(checkRExists(r)){

                //数字已经存在，不能存进数组中

                continue;

            }

            //将r保存进randomNums中，并且i++

            randomNums[i] = r;

            i++;

            //循环退出条件

            if(i == RANDOMNUM){

                return;

            }

        }

    }

    /**

     * 方法：加载&更换歌曲的方法

     * 随机读取3首歌曲

     */

    function loadMusic(){

        $("uMusic").innerHTML = "";

        //借助randomNums数组 获取指定的歌曲

        //生成三个不重复的数字并且存进randomNums中

        generateRandom();

        //console.log(randomNums);

        for(var i=0;i<randomNums.length;i++){

            //获取 歌曲名称、文件路径

            //生成 <li><a href="javascript:;">歌曲名称</a></li>

            //1、获取歌曲名称以及文件路径

            var mName=musicNames[randomNums[i]];

            var mSrc=musicSrcs[randomNums[i]];

            //2、构建a标签

            var aTar = document.createElement("a");

            aTar.innerHTML=mName;

            aTar.setAttribute("href","javascript:play('"+mName+"','"+mSrc+"');");

            //3、构建li，并且将a添加到li中

            var liTar=document.createElement("li");

            liTar.appendChild(aTar);

            //4、将li 添加到 ul中

            $("uMusic").appendChild(liTar);

        }

    }

    /**

     * 播放音乐

     * name:播放的音乐名称,用于显示

     * src:音乐路径，用于指定给"audio.src"

     */

    function play(name,src){

        //1、更新歌曲名称

        $("mName").innerHTML=name;

        //2、更新audio.src

        media.src=src;

    }

    /**

     * 当媒体下载可放帧时激发的事件

     */

    function media_canplay(e){

        var duration = Math.ceil(e.target.duration);

        //1、更新时长

        //duration : 媒体总时长(以秒为单位)

        var fTime=formatTime(duration);

        $("mTime").innerHTML = fTime;

        e.target.play();

    }

    /**

     * 媒体播放时触发的事件

     * 1、更新媒体播放时长

     */

    function media_play(e){

        loop = setInterval(function(){

            var left = Math.ceil(e.target.duration - e.target.currentTime);

            var fTime = formatTime(left);

            $("mTime").innerHTML = fTime;

        },1000);

    }

    /**

     * 格式化时间

     * seconds : 要格式化的 秒数

     * 格式化后返回: 00:00 格式的时间

     */

    function formatTime(seconds){

        var mm = parseInt(seconds / 60);

        var ss = parseInt(seconds % 60);

        if(mm < 10){

            mm = "0" + mm;

        }

        if(ss < 10){

            ss = "0" + ss;

        }

        return mm + ":" + ss;

    }

    window.addEventListener("load",initial,false);

  </script>

 </head>

 <body>

  <section id="container">

    <nav id="menu">

        <div id="mName">歌曲名称</div>

        <div id="mTime">00:00</div>

        <div style="clear:both;"></div>

    </nav>

    <nav id="player">

        <audio id="media" controls>

        </audio>

    </nav>

    <nav id="mList">

        <div>

            <ul id="uMusic">

            </ul>

        </div>

    </nav>

    <nav>

        <div id="changeMusic">

            <a href="javascript:loadMusic();">换歌</a>

        </div>

    </nav>

  </section>

 </body>

</html>
秒客网

html5 简单音乐播放器

相关文章
