html音乐播放器

1、网页简单的音乐播放器，适合初学者，代码 简单，学起来容易，默认歌曲是： 一千个伤心的理由 .mp3 烦恼歌 .mp3 小苹果 .mp3 歌曲不方便列出，请自行添加，或者改改代 码，欢迎广大朋友来下载lilist-style-type:none; margin:5px; a text-decoration:none; color:blue;#musicTitle font-size:30px;/ 音乐资源var myMusics = new Array( src: 张学友 - 一千个伤心的理由 .mp3, title: 张学友 - 一千个伤心的理由 , src: 张学友 - 烦恼歌 .mp3,

2、title: 张学友 - 烦恼歌 , src: 筷子兄弟 - 小苹果 .mp3, title: 筷子兄弟 - 小苹果 );/ 数组下标var index = -1;/ 播放状态 单曲循环： 0 列表循环： 1 随机播放： 2 var playState = 1;/ 创建音乐列表 function createBox()var html=;afor(var i=0;imyMusics.length;i+) html+=+(i+1)+ href=javascript:clickName(+i+);+myMusicsi.title+return html/ 页面加载$(document).ready

3、(function()$(#+box).append(createBox();playMusic(1);/ 按钮 下一首 单击事件 $(#nextMusic).click(function()playMusic(1,1););/ 按钮 上一首 单击事件$(#lastMusic).click(function() playMusic(2););/ 按钮播放 /暂停 单击事件 $(#playMusic).click(function() if($(this).val()= 播放 ) $(this).val(暂停 );document.getElementById(media).play();els

4、e if($(this).val()= 暂停 ) $(this).val(播放 );document.getElementById(media).pause(););/ 快进$(#fast).click(function()var media = document.getElementById(media); media.currentTime+=5;);/ 快退$(#rewind).click(function()var media = document.getElementById(media); media.currentTime-=5;);/ 播放状态$(#playState).cha

5、nge(function()playState = $(this).val(););$(li).mouseover(function()$(this).css(background-color,#F0F0F0););$(li).mouseout(function()$(this).css(background-color,#FFFFFF); $($(li)index).css(background-color,#F0F0F0);););/ 点击名字播放音乐function clickName(i)index=i;playMusic(0);/ 音乐播放function playMusic(s,n

6、)$(#playMusic).val( 暂停 );if(s=0)/ 点击名字播放音乐else if(s=1)/ 下一首 $(#playMusic).val(暂停 );if(playState=0)/ 单曲循环 if(n=0)else if(n=1) index+; if(index=myMusics.length) index=0;else if(playState=1)/ 列表循环 index+;if(index=myMusics.length)index=0;else if(playState=2)/随机播放index = Math.floor(Math.random()*myMusics.length);else if(s=2)/ 上一首index-;if(index60)i=parseInt(s/60); s=parseInt(s%60); if(i 60) h=parseInt(i/60); i = parseInt(i%60);var zero=function(v)return (v0)10?0+v:v;return (zero(h)+:+zero(i)+:+zero(