window.onload=function()
{
function getTime() {
setTimeout(function () {
var duration = $("#audio_src")[0].duration;
if(isNaN(duration)){
getTime();
}
else{
var music_time0 =Math.floor( $("#audio_src")[0].duration);
var music_time = formatSeconds(music_time0);
$("#time2").html(music_time);
}
}, 10);
}
getTime();
var lyric=[
{
'name':"告白氣球",
'img':'picture/img1.jpg',
'audio_src':'music/告白氣球.mp3',
'content':"00:00.00]告白氣球\n[00:04.55]詞：方文山 曲：周杰倫\n[00:09.23]演唱：周杰倫\n[00:13.67]我愛歌詞網 www.5ilrc.com\n[00:22.92]塞納河畔 左岸的咖啡\n[00:26.04]我手一杯 品嘗你的美\n[00:28.95]留下唇印的嘴\n[00:31.98]\n[00:33.67]花店玫瑰 名字寫錯誰\n[00:36.76]告白氣球 風吹到對街\n[00:39.61]微笑在天上飛\n[00:42.67]\n[00:43.07]你說你有點難追 想讓我知難而退\n[00:48.98]禮物不需挑最貴 只要香榭的落葉\n[00:54.38]營造浪漫的約會 不害怕搞砸一切\n[00:59.69]擁有你就擁有 全世界\n[01:04.26]\n[01:04.54]親愛的 愛上你 從那天起\n[01:10.98]甜蜜的很輕易\n[01:14.96]親愛的 別任性 你的眼睛\n[01:21.76]在說我愿意\n[01:25.68]\n[01:30.54]LRC編輯：Love QQ:8178617\n[01:44.12]\n[01:48.18]塞納河畔 左岸的咖啡\n[01:51.36]我手一杯 品嘗你的美\n[01:54.31]留下唇印的嘴\n[01:57.44]\n[01:59.09]花店玫瑰 名字寫錯誰\n[02:01.71]告白氣球 風吹到對街\n[02:04.78]微笑在天上飛\n[02:07.97]\n[02:08.31]你說你有點難追 想讓我知難而退\n[02:14.33]禮物不需挑最貴 只要香榭的落葉\n[02:19.62]營造浪漫的約會 不害怕搞砸一切\n[02:25.01]擁有你就擁有 全世界\n[02:29.60]\n[02:29.90]親愛的 愛上你 從那天起\n[02:36.48]甜蜜的很輕易\n[02:40.44]親愛的 別任性 你的眼睛\n[02:47.09]在說我愿意\n[02:50.80]\n[02:51.29]親愛的 愛上你 戀愛日記\n[02:57.70]飄香水的回憶\n[03:01.53]一整瓶 的夢境 全都有你\n[03:08.39]攪拌在一起\n[03:12.34]親愛的別任性 你的眼睛\n[03:20.33]在說我愿意"
},
{
'name':"彈指一揮間",
'img':'picture/img1.jpg',
'audio_src':'music/彈指一揮間.mp3',
'content':"00:01.92]歌詞自己補"
}
]
var play_btn=document.getElementById("play_btn");
var prev_btn=document.getElementById("prev_btn");
var next_btn=document.getElementById("next_btn");
var audio=document.getElementsByTagName("audio")[0];
var initTime=document.getElementsByTagName("time")[0];
var time=document.getElementsByTagName("time")[1];
var progress_bar=document.getElementById("progress_bar");
var progress_cube=document.getElementById("progress_cube");
var vol_bar=document.getElementById("vol_bar");
var vol_cube=document.getElementById("vol_cube");
var lyric_con=document.getElementById("lyric_con");
var lyric_txt=document.getElementById("lyric_txt");
var photo_pic=document.getElementById("photo_pic");
var icon1=document.getElementById("icon1");
var icon2=document.getElementById("icon2");
var lyric_tit=document.getElementById("lyric_tit");
var list_con=document.getElementById("list_con");
var list_item=list_con.getElementsByTagName("p");
var songIndex=0;
var container=document.getElementById("container");
var obj;
function config()
{
this.play_mark=true;
this.duration=audio.duration;
this.play_btn="";
this.vol=audio.volume;
this.timer=null;
this.rotateSum=0;
this.icon1=icon1.innerHTML;
this.icon2=icon2.innerHTML;
this.icon1_co=icon1.style.color;
this.endplay_btn="";
this.endicon1=icon1.innerHTML;
this.endicon2="";
}
obj= new config();
//串列控制
var allSong="";
for(var song=0;song<lyric.length;song++)
{
allSong+="<p>"+lyric[song].name+"</p>"
}
list_con.innerHTML=allSong;
list_con.style.height=lyric.length*30+"px";
for(var listIndex=0;listIndex<list_item.length;listIndex++)
{
list_item[listIndex].index=listIndex;
list_item[listIndex].onclick=function(ev)
{
var ev=ev||window.event;
ev.stopPropagation();
songIndex=this.index;
change_music();
}
}
list_con.style.display="none";
list.onclick=function()
{
if(list_con.style.display=="none")
{
list_con.style.display="block";
}
else{
list_con.style.display="none";
}
}
//下一首
next_btn.onclick=function(){
songIndex++;
change_music();
}
prev_btn.onclick=function(){
songIndex--;
change_music();
}
function change_music()
{
clearInterval(obj.timer);
if(songIndex>=lyric.length)
{songIndex=0}
else if(songIndex<0)
{songIndex=lyric.length}
obj= new config();
iconinit();
audioInit();
playedTime();
lyric_ctrl();
}
//初始化總時長、音量等
function audioInit()
{
time.innerHTML=format(audio.duration);
audio.volume=0.5;
play_btn.innerHTML=obj.play_btn;
vol_cube.style.left=audio.volume*vol_bar.offsetWidth+"px";
lyric_tit.innerText=lyric[songIndex].name;
photo_pic.style.background="url("+lyric[songIndex].img+")";
audio.src=https://bbs.csdn.net/topics/lyric[songIndex].audio_src;
progress_cube.style.left=0;
}
audioInit();
//播放時間
audio.addEventListener("timeupdate",function()
{
playedTime();
}
)
function playedTime(){
if(audio.currentTime==audio.duration)
{
next_btn.onclick();
play_btn.onclick();
}
var n=audio.currentTime/audio.duration;
progress_cube.style.left=n*progress_bar.offsetWidth+"px";
initTime.innerHTML=format(audio.currentTime);
var id_num=parseInt(audio.currentTime);
var lyric_p=document.getElementsByTagName("p");
for(var i=0;i<lyric_p.length;i++)
{
lyric_p[i].index=i;
}
if(document.getElementById("lyric"+id_num))
{
var obj=document.getElementById("lyric"+id_num);
for(var i=0;i<obj.index;i++)
{
lyric_p[i].className="played";
}
for(var j=obj.index;j<lyric_p.length;j++)
{
lyric_p[j].className="";
}
obj.className="aquamarine active";
lyric_txt.style.top=lyric_con.offsetHeight/2-obj.offsetTop+"px";
}
}
function format(time)
{
var time=parseInt(time);
var m=parseInt(time/60);
var s=parseInt(time%60);
m=zero(m);
s=zero(s);
function zero(num)
{
if(num<10)
{
num="0"+num;
}
return num;
}
return m+":"+s;
}
//拖拽進度條
progress_cube.onmousedown=function(ev)
{
var ev=ev||window.event;
var initX=ev.clientX-this.offsetLeft;
this.onmousemove=function(ev)
{
var ev=ev||window.event;
var x=ev.clientX-initX;
if(x<0){x=0}
if(x>progress_bar.offsetWidth-14){x=progress_bar.offsetWidth-14}
play_ctrl(x);
}
document.onmouseup=function()
{
document.onmousemove=null;
progress_cube.onmousemove=null;
}
}
function play_ctrl(x){
var timego=x/progress_bar.offsetWidth*audio.duration;
progress_cube.style.left=x+"px";
audio.currentTime=timego;
playedTime();
}
//點擊進度條位置
progress_bar.onclick=function(ev)
{
var ev=ev||window.event;
var dis=ev.clientX-(container.offsetLeft+progress_bar.offsetLeft)-7;
progress_cube.style.left=dis+"px";
play_ctrl(dis);
}/**/
//拖動音量鍵
vol_cube.onmousedown=function(ev)
{
var ev=ev||window.event;
var initX=ev.clientX-vol_cube.offsetLeft;
this.onmousemove=function(ev)
{
var ev=ev||window.event;
var x=ev.clientX-initX;
if(x<0){x=0}
if(x>vol_bar.offsetWidth-11){x=vol_bar.offsetWidth-11}
var volresult=x/vol_bar.offsetWidth;
this.style.left=x+"px";
audio.volume=volresult;
}
document.onmouseup=function()
{
document.onmousemove=null;
vol_cube.onmousemove=null;
}
}
//點擊播放
play_btn.onclick=function()
{
clearInterval(obj.timer);
if(obj.play_mark)
{
this.innerHTML=obj.endplay_btn;
audio.play();
obj.timer=setInterval(function()
{ obj.rotateSum=obj.rotateSum+1;
photo_pic.style.transform="rotate("+obj.rotateSum+"deg)";
},30)
}
else{
this.innerHTML=obj.play_btn;
audio.pause();
}
obj.play_mark=!obj.play_mark;
}
//歌詞處理
function lyric_ctrl()
{
var lyricObj=lyric[songIndex].content;
var temp=lyricObj.split("[");
var html="";
for(var i=0;i<temp.length;i++)
{
var arr=temp[i].split("]");
var text=(arr[1]);
var time=arr[0].split(",");
var temp2=time[0].split(".");
var ms=temp2[1];//毫秒
var temp3=temp2[0].split(":");
var s=temp3[1];//秒
var m=temp3[0];//分
var s_sum=parseInt(m*60)+parseInt(s);
if(text)
{
html+="<p id='lyric"+s_sum+"'>"+text+"</p>";
}
}
lyric_txt.innerHTML=html;
}
lyric_ctrl();
function iconinit(){
icon1.className="icon";
icon1.innerHTML=obj.icon1;
icon1.style.color="#fff";
icon2.className="icon";
icon2.style.color="#fff";
}
//喜歡 收藏
icon2.onclick=function()
{
if(this.innerHTML==obj.icon2)
{
this.innerHTML=obj.endicon2;
this.style.color="aquamarine";
this.className="icon yellow";
}
else{
this.innerHTML=obj.icon2;
this.style.color="#fff";
this.className="icon";
}
}
icon1.onclick=function()
{
if(this.style.color==obj.icon1_co)
{
this.innerHTML=obj.endicon1;
this.style.color="#f7759f";
this.className="icon pink";
}
else{
this.innerHTML=obj.icon1;
this.style.color=obj.icon1_co;
this.className="icon";
}
}
}
uj5u.com熱心網友回復：
你的注釋 太少了！！！很多獲取元素的 都不知道干什么 下次 要不就把全都代碼貼過來
省的我一個個猜 還不好重現
if(songIndex>=lyric.length)
{songIndex=0}
else if(songIndex<0)
{songIndex=lyric.length} //這里應該減一的
第一次nan 你自己找吧 我重現不了
uj5u.com熱心網友回復：
audio.addEventListener("canplay", function() {time.innerHTML=format(audio.duration); //獲取總時間
});
我找到方法了，獲取的改碼改成這個就行了
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/71409.html
標籤：Java相關