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. Peeking Iterator

    Given an Iterator class interface with methods: next() and hasNext(), design and implement a Peeking ...

  2. IPC----消息队列

    消息队列可以认为是一个消息链表,System V 消息队列使用消息队列标识符标识.具有足够特权的任何进程都可以往一个队列放置一个消息,具有足够特权的任何进程都可以从一个给定队列读出一个消息.在某个进程 ...

  3. Selenium2(webdirver)入门之环境搭建(Java版)

    一.开发环境: 1.JDK1.6 2.Eclipse:Version: Kepler Service Release 1,下载地址:http://www.eclipse.org/downloads/ ...

  4. linux多线程下载工具mwget

    linux多线程下载工具mwget 经常使用wget进行文件下载,然而wget的处理速度并不如人意.遇到一些国外的站点,经常慢得像蜗牛一般.然而为了解决这个问题,便有了mwget:m表示multi多线 ...

  5. mysql开启binlog

    mysql开启binlog,至于为什么要开启binlog,可以google下. ## 设置server_id,一般设置为IP server_id= ## 复制过滤:需要备份的数据库名,多个库以逗号分隔 ...

  6. ACM/ICPC 之 两道dijkstra练习题(ZOJ1053(POJ1122)-ZOJ1053)

    两道较为典型的单源最短路径问题,采用dijkstra解法 本来是四道练习题,后来发现后面两道用dijkstra来解的话总觉得有点冗余了,因此暂且分成三篇博客(本篇以及后两篇). ZOJ1053(POJ ...

  7. Python 之 【re模块的正则表达式学习】

    摘要: re模块包括操作正则表达式的函数,一些工作中都需要用到,现在说明下使用方法. 使用说明: 一,re模块下的函数:            函数             描述 compile(pa ...

  8. zookeeper集群搭建（windows环境下）

    本次zk测试部署版本为3.4.6版本,下载地址http://mirrors.cnnic.cn/apache/zookeeper/ 限于服务器个数有限本次测试了两种情况 1.单节点方式:部署在一台服务器 ...

  9. 【leetcode】Restore IP Addresses (middle)

    Given a string containing only digits, restore it by returning all possible valid IP address combina ...

  10. 【leetcode】 Search a 2D Matrix (easy)

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...