【推荐下载】html5 简单音乐播放器

html5 简单音乐播放器

2016/04/09 0 html5 简单音乐播放器

!DOCTYPE html html xmlns=“w3/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