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. 2.1---删除链表中重复元素（CC150）

    分成两种,1种开了额外空间,临时缓冲区,一种没有开 import java.util.HashSet; import java.util.Set; class ListNode{ int data; ...

  2. ubuntu 16.04 挂起后WiFi链接不上

    在笔记本上安装ubuntu 16.04后,使用挂起系统功能后发现WIFI链接不上去,然后使用以下指令多WIFI服务进行重启,发觉可以了. sudo service network-manager re ...

  3. centos 设置永久dns

    最近在折腾一个问题. 由于服务器的带宽是联通5M, 不稳定.而且所处的网络的dns解析貌似老出问题,每隔一定周期解析时间特别长. 于是乎,想在本地做一个dns,这样可以减少dns解析时间,并做些静态配 ...

  4. JQuery知识点链接

    1.深入理解jQuery插件开发                      http://learn.jquery.com/plugins/basic-plugin-creation/ 2.jQuer ...

  5. 方法重写和方法重载;this关键字和super关键字

    1:方法重写和方法重载的区别?方法重载能改变返回值类型吗? 方法重写: 在子类中,出现和父类中一模一样的方法声明的现象. 方法重载: 同一个类中,出现的方法名相同,参数列表不同的现象. 方法重载能改变 ...

  6. 多线程同步_Monitor

    多线程一直在学习和理解中...... Monitor类是多线程中用以实现同步的一种技术,主要是同一进程内多线程间的同步技术. Monitor类中有以下几个方法需要注意: Monitor.Enter(o ...

  7. c#缓存 笔记

    1:缓存. 你需要了解大数据高并发的瓶颈在哪里,一般都是数据库层面的,机械硬盘承载不起非常快速的读写操作,cpu承载不起大量的逻辑运算,所以最基本的解决思路就是:1.换固态硬盘加快硬盘的读写效率.2. ...

  8. Icon Font的转换

    Icon Font是用于网页的纯色图标,这里引用一张网络图片: 由于体积小,易维护等特点,IconFont应用非常广泛. 这里推荐一个转换器,通过Upload一个后缀ttf的字体文件,可以反解出文件下 ...

  9. 用 get 同步/异步 方式获取网络数据并输出

    //同步请求 //创建NSString用来存储请求的网址 NSString* str=@"http://v.juhe.cn/weather/index?format=2&cityna ...

  10. maven加载本地oracle的JDBC驱动

    转载自:http://blog.csdn.net/qicyt1812/article/details/13019933 由于oracle商业版权问题,maven不能通过中心资源库直接下载jar包,如果 ...