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){
$(
显示全部