โค้ดตัวอย่างเครื่องเล่นเพลงบนเว็บ HTML5

บทความนี้จะแนะนำโค้ดตัวอย่างของโปรแกรมเล่นเพลงบนเว็บ HTML5 และแบ่งปันให้กับทุกคน โดยมีรายละเอียดดังนี้

แท็กเสียงและวิดีโอถูกนำมาใช้ใน HTML5 ซึ่งช่วยให้เราสามารถเล่นเสียงและวิดีโอได้โดยตรงโดยไม่ต้องใช้ปลั๊กอินอื่น ต่อไปเราจะใช้แท็กเสียงของ H5 รวมถึงคุณลักษณะและวิธีการที่เกี่ยวข้องเพื่อสร้างเครื่องเล่นเพลงแบบง่ายๆ ส่วนใหญ่จะประกอบด้วยฟังก์ชันต่อไปนี้:

1. เล่นหยุดชั่วคราว เพลงก่อนหน้า และเพลงถัดไป

2. ปรับระดับเสียงและแถบความคืบหน้าในการเล่น

3. สลับเพลงปัจจุบันตามรายการ

มาดูผลลัพธ์สุดท้ายกันก่อน:

โครงสร้างของเครื่องเล่นเพลงนี้ส่วนใหญ่แบ่งออกเป็นสามส่วน: ข้อมูลเพลง เครื่องเล่น และรายการเพลง เรามาเน้นที่ส่วนของเครื่องเล่นกันดีกว่า ขั้นแรกให้ใส่แท็กเสียงสามแท็กในเครื่องเล่นเพื่อเล่น:

 <audio id=music1>เบราว์เซอร์ไม่รองรับแท็กเสียง<source src=media/Beyond - The Glorious Years.mp3></source></audio><audio id=music2>เบราว์เซอร์ไม่รองรับแท็กเสียง <source src=media /Daniel Powter - Free Loop.mp3></source></audio><audio id=music3>เบราว์เซอร์ไม่รองรับแท็กเสียง<source src=media/Jay Chou, Fei Yuqing-พันไมล์.mp3></source></audio>

เพลย์ลิสต์ด้านล่างยังสอดคล้องกับแท็กเสียงสามแท็ก:

 <div id=playList> <ul> <li id=m0>Beyond-Glory Years</li> <li id=m1>Daniel Powter-Free Loop</li> <li id=m2>Jay Chou, Fei Yuqing- ออกไปข้างนอกเป็นพันไมล์</li> </ul></div>

ต่อไปเราจะเริ่มใช้งานฟังก์ชั่นที่กล่าวมาข้างต้นอย่างค่อยเป็นค่อยไป ขั้นแรกให้เล่นและหยุดฟังก์ชั่นให้เสร็จสิ้น เมื่อกดปุ่มเล่น เราจะต้องทำให้แถบความคืบหน้าก้าวหน้าไปตามความคืบหน้าของเพลง เวลาเล่นก็จะค่อยๆ เพิ่มขึ้นเช่นกัน และปุ่มเล่นจะกลายเป็นปุ่มหยุดชั่วคราว สไตล์ของเพลย์ลิสต์ก็จะเปลี่ยนไปตามไปด้วย

ก่อนที่จะทำหน้าที่นี้ เราต้องรับ ID ของแท็กเสียงทั้งสามแท็กก่อน และจัดเก็บไว้ในอาร์เรย์เพื่อใช้ในภายหลัง

 var music1= document.getElementById(music1);var music2= document.getElementById(music2);var music3= document.getElementById(music3);var mList = [เพลง1,เพลง2,เพลง3];

ตอนนี้เราสามารถทำหน้าที่ของปุ่มเล่นให้เสร็จสมบูรณ์ได้ ขั้นแรกให้ตั้งค่าสถานะเพื่อทำเครื่องหมายสถานะการเล่นของเพลง จากนั้นตั้งค่าเริ่มต้นสำหรับดัชนีของอาร์เรย์:

จากนั้นตัดสินสถานะการเล่น เรียกใช้ฟังก์ชันที่เกี่ยวข้อง และแก้ไขค่าแฟล็กและสไตล์รายการที่สอดคล้องกันของรายการ:

 ฟังก์ชั่น playMusic(){if(flag&&mList[index].paused){ ​​​​mList[index].play(); document.getElementById(m+index).style.abstractColor = #A71307;document.getElementById(m+index) .style .color = white;progressBar(); playTimes(); play.style.พื้นหลังรูปภาพ = url (media/pause.png); flag = false;} อื่น ๆ { mList [index] .pause (); flag = true; play.style.BackgroundImage = url (media/play.png);}}

โค้ดด้านบนเรียกใช้ฟังก์ชันต่างๆ มากมาย โดยการเล่นและหยุดชั่วคราวเป็นวิธีการที่มาพร้อมกับแท็กเสียง ในขณะที่ฟังก์ชันอื่นๆ ถูกกำหนดโดยตัวเราเอง มาดูกันว่าฟังก์ชันเหล่านี้ถูกนำไปใช้อย่างไร และฟังก์ชันใดบ้างที่สอดคล้องกับ

อย่างแรกคือฟังก์ชันแถบความคืบหน้า ซึ่งรับระยะเวลาทั้งหมดของเพลง จากนั้นคำนวณตำแหน่งของแถบความคืบหน้าตามความคืบหน้าในการเล่นปัจจุบันคูณด้วยความยาวทั้งหมดของแถบความคืบหน้า

 ฟังก์ชั่นprogressBar(){var lenth=mList[index].duration;timer1=setInterval(function(){ cur=mList[index].currentTime;//รับเวลาการเล่นปัจจุบันความคืบหน้า style.width=+parseFloat(cur/ ความยาว)*300+px;ความคืบหน้าBtn.style.left= 60+parseFloat(cur/lenth)*300+px;},10)}

ต่อไปนี้เป็นฟังก์ชันในการเปลี่ยนเวลาในการเล่น ที่นี่เราตั้งค่าฟังก์ชันจับเวลาและดำเนินการเป็นระยะๆ เพื่อเปลี่ยนเวลาในการเล่น เนื่องจากระยะเวลาของเพลงที่เราได้รับคำนวณเป็นวินาที เราจึงจำเป็นต้องใช้คำสั่ง if เพื่อแปลงการพิจารณาระยะเวลาและเปลี่ยนเวลาในการเล่นให้แสดงเป็นนาทีและวินาที

 ฟังก์ชั่น playTimes () {timer2 = setInterval (ฟังก์ชั่น () { cur = parseInt (mList [ดัชนี] .currentTime); // วินาที var นาที = parseInt (cur / 60); if (นาที <10) { if (cur% 60 <10){ playTime.innerHTML=0+นาที+:0+cur%60+ }else{ playTime.innerHTML=0+นาที+:+cur%60+; } } else{ if(cur%60<10){ playTime.innerText= minutes+:0+cur%60+; }else{ playTime.innerText= minutes+:+ เคอร์%60+; } } },1000);}

ต่อไป มาทำหน้าที่ปรับความคืบหน้าในการเล่นและปรับระดับเสียงผ่านแถบความคืบหน้าให้เสร็จสิ้น

ฟังก์ชั่นการปรับความคืบหน้าในการเล่นถูกนำมาใช้โดยใช้ออบเจ็กต์เหตุการณ์ เนื่องจากแอตทริบิวต์ offsetX ใช้ได้เฉพาะในกิจกรรม IE จึงแนะนำให้ใช้เบราว์เซอร์ IE เพื่อดูเอฟเฟกต์ ขั้นแรกให้เพิ่มตัวฟังเหตุการณ์ลงในแถบความคืบหน้า เมื่อคลิกเมาส์บนแถบความคืบหน้า ตำแหน่งเมาส์จะได้รับ และความคืบหน้าในการเล่นปัจจุบันจะคำนวณตามตำแหน่งหารด้วยความยาวทั้งหมดของแถบความคืบหน้า จากนั้น เพลงถูกตั้งค่าแล้ว

 //ปรับความคืบหน้าในการเล่น Total.addEventListener(click,function(event){var e = event || window.event;document.onmousedown = function(event){ var e = event || window.event; var mousePos1 = e. offsetX; var maxValue1 = Total.scrollWidth; mList[ดัชนี].currentTime = (mousePos1/300)*mList[ดัชนี].ระยะเวลา; ความคืบหน้า style.width = mousePos1+px;progressBtn.style.left = 60+ mousePos1 +px;}})

ต่อไปนี้เป็นฟังก์ชันการปรับระดับเสียง เราใช้การลากเพื่อปรับระดับเสียง แนวคิดคือการเพิ่มการตรวจสอบเหตุการณ์ให้กับปุ่มบอลของแถบระดับเสียง จากนั้นคำนวณตำแหน่งของปุ่มบอลที่สัมพันธ์กับแถบระดับเสียงโดยรวม ตำแหน่งที่ลาก ในที่สุดตามการคำนวณ ผลลัพธ์จะคูณด้วยปริมาตรเพื่อให้ได้ปริมาตรปัจจุบัน:

 volBtn.addEventListener(mousedown,function(event){var e = event || window.event;var that =this;//ป้องกันเหตุการณ์การลากเริ่มต้นของลูกบอล e.preventDefault();document.onmousemove = function(event){ var e = เหตุการณ์ ||. window.event;var mousePos2 = e.offsetY;var maxValue2 = vol.scrollHeight;if(mousePos2<0){ mousePos2 = 0;}if(mousePos2>maxValue2){ mousePos2=maxValue2;}mList[ดัชนี].volume = (1-mousePos2/maxValue2);console.log(mList[ดัชนี ].ปริมาตร);volBtn.style.top = (mousePos2)+px;volBar.style.height = 60-(mousePos2)+px;document.onmouseup = function(event){ document.onmousemove = null; document.onmouseup = null;}}})

สุดท้าย เราจะใช้ฟังก์ชันการสลับเพลงที่ซับซ้อนมากขึ้น

ก่อนอื่นเรามาดูการใช้ปุ่มก่อนหน้าและปุ่มถัดไปเพื่อสลับกัน มีหลายประเด็นที่เราควรใส่ใจเมื่อเปลี่ยนเพลง: อันดับแรก เราต้องหยุดเพลงที่กำลังเล่นอยู่และสลับไปยังเพลงถัดไป วินาที แถบความคืบหน้าและการเล่น ต้องล้างเวลาและคำนวณใหม่ ประการที่สาม ข้อมูลเพลงจะต้องเปลี่ยนตามนั้น และสไตล์เพลย์ลิสต์ภายใต้เครื่องเล่นก็ต้องเปลี่ยนด้วย หลังจากหาจุดสามจุดข้างต้นแล้ว เราก็เริ่มนำฟังก์ชันไปใช้ได้เลย

 // ฟังก์ชั่นเพลงก่อนหน้า prevM(){clearInterval(timer1);clearInterval(timer2);stopM();qingkong();cleanProgress();--index;if(index==-1){ index=mList.length - 1;}clearListBgc();document.getElementById(m+index).style.พื้นหลังสี = #A71307;document.getElementById(m+index).style.color = white;changeInfo(index);mList[index].play();progressBar();playTimes();if (mList[index].paused) { play.style.พื้นหลังImage = url (สื่อ/play.png);} อื่น ๆ { play.style.BackgroundImage = url(media/pause.png);}} // ฟังก์ชั่นเพลงถัดไป nextM(){clearInterval(timer1);clearInterval(timer2);stopM();qingkong();cleanProgress();++index;if(index = =mList.length){ ดัชนี=0;}clearListBgc();document.getElementById(m+index).style.พื้นหลังสี = #A71307;document.getElementById(m+index).style.color = white;changeInfo(index);mList[index].play();progressBar();playTimes();if (mList[index].paused) { play.style.พื้นหลังImage = url (สื่อ/play.png);} อื่น ๆ { play.style.BackgroundImage = URL(สื่อ/pause.png);}}

รหัสด้านล่างสลับเพลงโดยคลิกที่รายการ

 m0.onclick = function (){clearInterval(timer1);clearInterval(timer2);qingkong();flag = false;stopM();index = 0;pauseall();play.style.พื้นหลังImage = url(media/pause. png);clearListBgc();document.getElementById(m0).style.พื้นหลังสี = #A71307;document.getElementById(m+index).style.color = white;mList[index].play();cleanProgress();progressBar();changeInfo(index);playTimes();}m1.onclick = ฟังก์ชัน (){clearInterval(timer1);clearInterval(timer2);flag = false;qingkong();stopM();ดัชนี = 1;pauseall();clearListBgc();play.style.พื้นหลังImage = url(media/pause.png);document.getElementById(m1).style.พื้นหลังColor = #A71307;document.getElementById(m+index).style สี= white;mList[index].play();cleanProgress();changeInfo(index);progressBar();playTimes();}m2.onclick = function (){clearInterval(timer1);clearInterval(timer2);flag = false ;qingkong();stopM();index = 2;pauseall();play.style.พื้นหลังImage = url(media/pause.png);clearListBgc();document.getElementById(m2).style.พื้นหลังสี = #A71307;document.getElementById(m+index).style.color = white;mList[index].play() ;cleanProgress();changeInfo(ดัชนี);progressBar();playTimes();}

แนวคิดในการสลับเพลงผ่านเพลย์ลิสต์นั้นคล้ายกับการสลับผ่านปุ่ม เพียงตั้งค่าเพลงที่ควรเล่นในปัจจุบันตามรายการที่เกี่ยวข้อง

ด้านบนมีการเรียกวิธีการต่างๆ มากมายในฟังก์ชันการสลับเพลง มาดูการใช้งานของวิธีการเหล่านี้กัน

ประการแรกคือการสลับข้อมูลเพลง:

 ฟังก์ชั่น changeInfo(index){if (index==0) { musicName.innerHTML = Glory Days; Singer.innerHTML = Beyond;} if (index==1) { musicName.innerHTML = Free Loop; } if (index==2) { musicName.innerHTML = ห่างออกไปนับพันไมล์; Singer.innerHTML = Jay Chou, Fei Yuqing;}}

จากนั้นล้างตัวจับเวลาทั้งสอง:

 // ตั้งค่าแถบความคืบหน้าเป็น 0 ฟังก์ชัน cleanProgress(timer1){if(timer1!=unknown){ clearInterval(timer1);}progress.style.width=0;progressBtn.style.left=60px;} function qingkong(timer2) { ถ้า (timer2!=unknown){ clearInterval(timer2);}}

หยุดเล่นเพลงและเล่นต่อ

 ฟังก์ชั่น stopM(){if(mList[index].played){ mList[index].pause(); mList[index].currentTime=0; flag=false;}}

สุดท้าย เปลี่ยนสไตล์ของเพลย์ลิสต์ด้านล่าง:

 ฟังก์ชัน clearListBgc(){document.getElementById(m0).style.พื้นหลังสี = #E5E5E5;document.getElementById(m1).style.พื้นหลังสี = #E5E5E5;document.getElementById(m2).style.พื้นหลังสี = #E5E5E5;document.getElementById (m0).สไตล์.สี = สีดำ;document.getElementById(m1).style.color = สีดำ;document.getElementById(m2).style.color = สีดำ;}

ณ จุดนี้ เราได้ทำเครื่องเล่นเพลงเสร็จแล้ว มาดูเอฟเฟกต์ของแอนิเมชั่นกันดีกว่า:

ผู้เขียน : เจอร์รี่ เอ็ดดูเคชั่น

ที่มา: http://www.cnblogs.com/jerehedu/

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network