java实现qq炫舞音乐播放功能_纯js实现音乐播放的功能

//JavaScript Document

var music=document.getElementById("mymusic");var prograss=document.getElementById("prograss");var curtxt=document.getElementById("currenttime");var duration=document.getElementById("duration");var music_pic=document.getElementById("music_pic");var deg=0;//旋转角度

var disctimer,prograsstimer;//碟片计时器,进度条计时器

var musicindex=0;//音乐索引

var musics=new Array("nicengshishaonian.mp3","huanian.mp3","chunfengshili.mp3");//音乐数组

var music_pics=new Array("000002","000001","000001");//旋转碟片

var disc=document.getElementsByClassName('disc');//音乐时间显示

functioncurtime(txt,misic)

{if(music.currentTime<10)

{

txt.innerHTML="0:0"+Math.floor(music.currentTime);

}else

if(music.currentTime<60)

{

txt.innerHTML="0:"+Math.floor(music.currentTime);

}else{var minet=parseInt(music.currentTime/60);

var sec=music.currentTime-minet*60;if(sec<10)

{

txt.innerHTML="0"+minet+":"+"0"+parseInt(sec);

}else{

txt.innerHTML="0"+minet+":"+parseInt(sec);

}

}

}//播放暂停

functionplayPause()

{var btn=document.getElementById("playbtn");if(music.paused)

{

music.play();

clearInterval(disctimer);//清除碟片的定时器

btn.style.background="url(images/music/pictures/pause.png) no-repeat 10px";//改变播放暂停键的图标

disctimer=setInterval(function(){

disc[0].style.transform="rotate("+deg+"deg)";

deg+=5;//每秒设置进度条长度

},100);

prograsstimer=setInterval(function(){

prograss.style.width=(music.currentTime)*100 / (music.duration)+"%";

curtime(curtxt,music);if(music.currentTime>=music.duration-1)//片尾跳转下一曲

{

musicindex++;//音乐索引加一

if(musicindex>=musics.length)//如果音乐索引超过长度,将音乐索引清零

{

musicindex=0;

}

getMusic();

music.play();//重载音乐后进行播放

}

},1000);

}else{

music.pause();//停止音乐

btn.style.background="url(images/music/pictures/play.png) no-repeat 10px";

clearInterval(disctimer);//清除碟片滚动的定时器

clearInterval(prograsstimer);//清除进度条的定时器

}

}//下一曲

functionnextMusic()

{

musicindex++;//音乐索引加一

if(musicindex>=musics.length)//如果音乐索引超过长度,将音乐索引清零

{

musicindex=0;

}

getMusic();

music.play();

}//上一曲

functionbackMusic()

{

musicindex--;if(musicindex<0)//如果索引小于0,将索引变为最大值

{

musicindex=musics.length-1;

}

getMusic();

music.play();

}//读取音乐

functiongetMusic()

{

music.src="images/music/"+musics[musicindex];//改变音乐的SRC

music_pic.src="images/music/pictures/"+music_pics[musicindex]+".jpg";if(music.readyState="complete")

{

setTimeout(function(){

duration.innerHTML=parseInt(music.duration/60)+":"+parseInt(music.duration%60);

},1000);//一秒后读取音乐的总时长

}

}

window.οnlοad=function(){

getMusic();

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值