html音乐播放器教案.doc

网页简单的音乐播放器，适合初学者，代码简单，学起来容易， 默认歌曲是： 一千个伤心的理由.mp3 烦恼歌.mp3 小苹果.mp3 歌曲不方便列出，请自行添加，或者改改代码，欢迎广大朋友来下载 !DOCTYPE html html head meta charset=gbk/ title/title style li{ list-style-type:none; margin:5px; } a{ text-decoration:none; color:blue; } #musicTitle{ font-size:30px; } /style script src=jquery-1-7-2.js/script script //音乐资源 var myMusics = new Array( { src: 张学友 - 一千个伤心的理由.mp3, title: 张学友 - 一千个伤心的理由 }, { src: 张学友 - 烦恼歌.mp3, title: 张学友 - 烦恼歌 }, { src: 筷子兄弟 - 小苹果.mp3, title: 筷子兄弟 - 小苹果 } ); //数组下标 var index = -1; //播放状态 单曲循环：0 列表循环：1 随机播放：2 var playState = 1; //创建音乐列表 function createBox(){ var html=; for(var i=0;imyMusics.length;i++){ html+=li+(i+1)+ a href=javascript:clickName(+i+);+myMusics[i].title+/a/li } return html } //页面加载 $(document).ready(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(); }else 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).change(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){ $(