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. 修改vb程序图标

    1. 2.

  2. 2017/1/7 学习笔记　jar包，maven

    ① 关于tar,jar,war文件 tar是通用的另一种打包格式,为了部署到服务器时方便. jar是java app server识别的java部署格式,其实是Zip文件,只是内部的文件有规范. wa ...

  3. C#对图片文件的压缩、裁剪操作

    在做项目时,对图片的处理,以前都采用在上传时,限制其大小的方式,这样带来诸多不便.毕竟网站运维人员不一定会对图片做处理,经常超出大小限制,即使会使用图片处理软件的,也由于个人水平方面原因,处理效果差强 ...

  4. [转载]能不能同时用static和const修饰类的成员函数？

    题目(一):我们可以用static修饰一个类的成员函数,也可以用const修饰类的成员函数(写在函数的最后表示不能修改成员变量,不是指写在前面表示返回值为常量).请问:能不能同时用static和con ...

  5. POJ 2676

    http://poj.org/problem?id=2676 深搜的题目. 题意呢就是一个数独的游戏,应该都知道规则. 思路:我的思路很简单,就是用数组来判断某个数字是否可以使用,而每一个数字都由三个 ...

  6. CentOS7下安装soaplib

    测试安装 cd ENV . bin/activate yum install libxml2-devel libxslt-devel pip install soaplib 安装中遇到的问题: Uni ...

  7. Linux下编译安装python3

    Linux下默认系统自带python2.6的版本,这个版本被系统很多程序所依赖,所以不建议删除,如果使用最新的Python3那么我们知道编译安装源码包和系统默认包之间是没有任何影响的,所以可以安装py ...

  8. 【hiho一下第77周】递归-减而治之 (MS面试题：Koch Snowflake)

    本题是一道微软面试题,看起来复杂,解出来会发现其实是一个很简单的递归问题,但是这道题的递归思路是很值得我们反复推敲的. 原题为hihocoder第77周的题目. 描述 Koch Snowflake i ...

  9. js计算在线时长

    后台传来毫秒,前台转换成对应的时分秒 //在线时长 function longTime(seconds){ //总秒数 //seconds=seconds/1000; //得到小时 var hour ...

  10. SQL Server遍历表的几种方法 转载

    SQL Server遍历表的几种方法 阅读目录 使用游标 使用表变量 使用临时表 在数据库开发过程中,我们经常会碰到要遍历数据表的情形,一提到遍历表,我们第一印象可能就想到使用游标,使用游标虽然直观易 ...