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 简单音乐播放器的更多相关文章

  1. html5版 音乐播放器

    html5版本音乐播放器,支持iOS设备,案例地址:http://www.xttblog.com/?p=1277 功能说明 支持iOS设备,但是iOS不支持自动下一曲,这是iOS本身限制,支持touc ...

  2. Android 实现简单音乐播放器（二）

    在Android 实现简单音乐播放器(一)中,我介绍了MusicPlayer的页面设计. 现在,我简单总结一些功能实现过程中的要点和有趣的细节,结合MainActivity.java代码进行说明(写出 ...

  3. Android 实现简单音乐播放器（一）

    今天掐指一算,学习Android长达近两个月了,今天开始,对过去一段时间的学习收获以及遇到的疑难杂症做一些总结. 简单音乐播放器是我自己完成的第一个功能较为完整的APP,可以说是我的Android学习 ...

  4. Android实现简单音乐播放器(MediaPlayer)

    Android实现简单音乐播放器(MediaPlayer) 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 工程内容 实现一个简单的音乐播放器,要求功能 ...

  5. Android——简单音乐播放器

    使用MediaPlayer做的简单音乐播放器,更多内容请到百度经验查看   http://jingyan.baidu.com/article/60ccbceb63452364cab197f1.html ...

  6. iOS之基于FreeStreamer的简单音乐播放器(模仿QQ音乐)

    代码地址如下:http://www.demodashi.com/demo/11944.html 天道酬勤 前言 作为一名iOS开发者,每当使用APP的时候,总难免会情不自禁的去想想,这个怎么做的?该怎 ...

  7. Android实现简单音乐播放器（startService和bindService后台运行程序）

    Android实现简单音乐播放器(MediaPlayer) 开发工具:Andorid Studio 1.3运行环境:Android 4.4 KitKat 工程内容 实现一个简单的音乐播放器,要求功能有 ...

  8. HTML5网页音乐播放器

    1功能介绍 HTML5中推出了音视频标签,可以让我们不借助其他插件就可以直接播放音视频.下面我们就利用H5的audio标签及其相关属性和方法来制作一个简单的音乐播放器.主要包括以下几个功能: 1.播放 ...

  9. Android开发6：Service的使用（简单音乐播放器的实现）

    前言 啦啦啦~各位好久不见啦~博主最近比较忙,而且最近一次实验也是刚刚结束~ 好了不废话了,直接进入我们这次的内容~ 在这篇博文里我们将学习Service(服务)的相关知识,学会使用 Service ...

随机推荐

  1. 1.2---翻转字符串（CC150）

    import java.util.*; public class Reverse { public String reverseString(String iniString) { // write ...

  2. Python 2.x闭包(enclosure)中的变量访问&修改

    http://stackoverflow.com/questions/3190706/nonlocal-keyword-in-python-2-x ---answer---- Python can r ...

  3. 升级centos内核到最新版本

    root权限执行: rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org rpm -Uvh http://www.elrepo.org/ ...

  4. css3 transition的各种ease效果

    http://www.w3school.com.cn/tiy/t.asp?f=css3_transition-timing-function2 linear 平均速度 ease 快启动,慢停止,物理原 ...

  5. Maven学习总结

    转载至:http://www.cnblogs.com/xdp-gacl/p/3498271.html 一 入门 一.Maven的基本概念 Maven(翻译为"专家","内 ...

  6. eclipse下使用git下载和上传项目

    简单配置,填入我们的用户名和邮箱 >>Preferences>Team>Git>Configuration 点击Add Entry,在弹出框里面输入key和value的值 ...

  7. HDU 5881 Tea -2016 ICPC 青岛赛区网络赛

    题目链接 题意:有一壶水, 体积在 L和 R之间, 有两个杯子, 你要把水倒到两个杯子里面, 使得杯子水体积几乎相同(体积的差值小于等于1), 并且使得壶里剩下水体积不大于1. 你无法测量壶里剩下水的 ...

  8. PDO（数据访问抽象层）

    自带事务功能,多条sql同时执行时,如果其中一条执行失败,那么所有的都执行失败.开启了事务,可以进行回滚操作,让程序变得更安全. 1.访问不同的数据库2.自带事务功能3.防止SQL注入:分两次发送 / ...

  9. 用jquery怎么实现点击显示，再一次点击隐藏

    html代码: <button>点击</button> <div class="div"></div> css代码: <sty ...

  10. [Android Pro] ActionBarDrawerToggle 使用小结

    reference to  : http://blog.csdn.net/chencehnggq/article/details/21492417 activity.java mToolbar = ( ...