Kode contoh pemutar musik web HTML5

Artikel ini memperkenalkan kode contoh pemutar musik web HTML5 dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:

Tag audio dan video diperkenalkan di HTML5, yang memungkinkan kita memutar audio dan video secara langsung tanpa menggunakan plugin lain. Selanjutnya kita akan menggunakan tag audio H5 dan atribut serta metode terkait untuk membuat pemutar musik sederhana. Ini terutama mencakup fungsi-fungsi berikut:

1. Putar jeda, lagu sebelumnya dan lagu berikutnya

2. Sesuaikan volume dan bilah kemajuan pemutaran

3. Ganti lagu yang sedang diputar sesuai daftar

Mari kita lihat hasil akhirnya dulu:

Struktur pemutar musik ini terutama dibagi menjadi tiga bagian: informasi lagu, pemutar, dan daftar putar. Pertama, masukkan tiga tag audio ke pemutar untuk diputar:

 <audio id=music1>Browser tidak mendukung tag audio<source src=media/Beyond - The Glorious Years.mp3></source></audio><audio id=music2>Browser tidak mendukung tag audio <source src=media /Daniel Powter - Free Loop.mp3></source></audio><audio id=music3>Browser tidak mendukung tag audio<source src=media/Jay Chou, Fei Yuqing-Ribuan Miles Jauhnya.mp3></source></audio>

Daftar putar di bawah juga berhubungan dengan tiga tag audio:

 <div id=playList> <ul> <li id=m0>Melampaui Tahun-Tahun Kemuliaan</li> <li id=m1>Daniel Powter-Free Loop</li> <li id=m2>Jay Chou, Fei Yuqing- Ribuan Miles di luar</li> </ul></div>

Selanjutnya, kita akan mulai menerapkan fungsi-fungsi yang disebutkan di atas secara bertahap. Pertama, selesaikan fungsi putar dan jeda. Saat menekan tombol putar, kita perlu membuat bilah kemajuan maju seiring dengan kemajuan lagu, waktu putar juga meningkat secara bertahap. dan tombol putar menjadi tombol Jeda, gaya daftar putar juga berubah.

Sebelum menjalankan fungsinya, pertama-tama kita harus mendapatkan ID dari ketiga tag audio dan menyimpannya dalam array untuk digunakan nanti.

 var music1= dokumen.getElementById(music1);var music2= dokumen.getElementById(music2);var music3= document.getElementById(music3);var mList = [music1,music2,music3];

Sekarang kita dapat menyelesaikan fungsi tombol putar. Pertama, atur tanda untuk menandai status pemutaran musik, lalu atur nilai default untuk indeks array:

Kemudian nilai status pemutaran, panggil fungsi yang sesuai, dan ubah nilai tanda serta gaya item yang sesuai dalam daftar:

 fungsi playMusic(){if(flag&&mList[index].paused){ ​​​​mList[index].play(); document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index) .style .color = putih;progressBar(); playTimes(); bermain.style.backgroundImage = url(media/pause.png); bendera = salah;}else{ mList[index].pause(); bendera = benar; play.style.backgroundImage = url(media/play.png);}}

Kode di atas memanggil beberapa fungsi, di antaranya putar dan jeda adalah metode yang disertakan dengan tag audio, sementara fungsi lainnya ditentukan sendiri. Mari kita lihat bagaimana fungsi-fungsi ini diimplementasikan dan fungsi apa saja yang terkait dengannya.

Yang pertama adalah fungsi bilah kemajuan, yang memperoleh seluruh durasi lagu, lalu menghitung posisi bilah kemajuan berdasarkan kemajuan pemutaran saat ini dikalikan dengan total panjang bilah kemajuan.

 function progresBar(){var lenth=mList[index].duration;timer1=setInterval(function(){ cur=mList[index].currentTime;//Dapatkan waktu pemutaran saat ini progres.style.width=+parseFloat(cur/ panjang)*300+px; progresBtn.style.left= 60+parseFloat(skr/lenth)*300+px;},10)}

Berikut ini adalah fungsi mengubah waktu pemutaran. Di sini kita mengatur fungsi pengaturan waktu dan menjalankannya sesekali untuk mengubah waktu pemutaran. Karena durasi lagu yang kita peroleh dihitung dalam hitungan detik, kita perlu menggunakan pernyataan if untuk mengonversi penilaian durasi dan mengubah waktu pemutaran agar ditampilkan dalam menit dan detik.

 fungsi playTimes(){timer2=setInterval(function(){ cur=parseInt(mList[index].currentTime);//Detik var menit=parseInt(cur/60); if (menit<10) { if(cur% 60 <10){ playTime.innerHTML=0+menit+:0+saat ini%60+ }lainnya{ playTime.innerHTML=0+menit+:+saat ini%60+; } } lain{ if(saat ini%60<10){ playTime.innerText= menit+:0+saat ini%60+; sekarang%60+; } } },1000);}

Selanjutnya, mari selesaikan fungsi mengatur kemajuan pemutaran dan mengatur volume melalui bilah kemajuan.

Fungsi penyesuaian kemajuan pemutaran diimplementasikan dengan menggunakan objek acara. Karena atribut offsetX hanya tersedia di acara IE, disarankan untuk menggunakan browser IE untuk melihat efeknya. Pertama-tama tambahkan pendengar acara ke bilah kemajuan. Saat mouse diklik pada bilah kemajuan, posisi mouse diperoleh, dan kemajuan pemutaran saat ini dihitung berdasarkan posisi dibagi dengan total panjang bilah kemajuan, dan kemudian lagu sudah diatur.

 //Sesuaikan total kemajuan pemutaran.addEventListener(klik,fungsi(acara){var e = acara || window.event;document.onmousedown = function(event){ var e = acara || window.event; var mousePos1 = e. offsetX; var maxValue1 = total.scrollWidth; mList[index].currentTime = (mousePos1/300)*mList[index].durasi; kemajuan.gaya.lebar = mousePos1+px; kemajuanBtn.style.kiri = 60+ mousePos1 +px;}})

Berikut ini adalah fungsi penyesuaian volume. Kami menggunakan drag untuk mengatur volume. Idenya adalah untuk menambahkan pemantauan peristiwa ke bola tombol pada bilah volume, dan kemudian menghitung posisi bola tombol relatif terhadap bilah volume keseluruhan berdasarkan pada fungsi penyesuaian volume. posisi diseret. Terakhir, menurut perhitungan, hasilnya dikalikan dengan volume untuk mendapatkan volume saat ini:

 volBtn.addEventListener(mousedown,function(event){var e = event || window.event;var that =this;//Mencegah event drag default bola e.preventDefault();document.onmousemove = function(event){ var e = acara ||.jendela.acara;var mousePos2 = e.offsetY;var maxValue2 = vol.scrollHeight;if(mousePos2<0){ mousePos2 = 0;}if(mousePos2>maxValue2){ mousePos2=maxValue2;}mList[index].volume = (1-mousePos2/maxValue2);console.log(mList[index ].volume);volBtn.style.top = (mousePos2)+px;volBar.style.height = 60-(mousePos2)+px;document.onmouseup = function(event){ document.onmousemove = document.onmouseup = null;}}})

Terakhir, kami akan menerapkan fungsi peralihan lagu yang lebih kompleks.

Mari kita lihat dulu penggunaan tombol sebelumnya dan berikutnya untuk beralih. Ada beberapa masalah yang harus kita perhatikan saat berpindah musik: pertama, kita perlu menghentikan musik yang sedang diputar dan beralih ke musik berikutnya, kedua, bilah kemajuan dan pemutaran waktu harus dihapus, dan dihitung ulang; ketiga, informasi lagu harus berubah, dan gaya daftar putar di bawah pemutar juga harus berubah. Setelah mengetahui tiga poin di atas, kita dapat mulai mengimplementasikan fungsinya.

 //Fungsi lagu sebelumnya prevM(){clearInterval(timer1);clearInterval(timer2);stopM();qingkong();cleanProgress();--index;if(index==-1){ index=mList.length - 1;}clearListBgc();document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = putih;changeInfo(index);mList[index].play();progressBar();playTimes();if (mList[index].paused) { play.style.backgroundImage = url(media/play.png);}else{ play.style.backgroundImage = url(media/pause.png);}} //Fungsi lagu selanjutnya nextM(){clearInterval(timer1);clearInterval(timer2);stopM();qingkong();cleanProgress();++index;if(index = =mList.length){ indeks=0;}clearListBgc();document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = putih;changeInfo(index);mList[index].play();progressBar();playTimes();if (mList[index].paused) { play.style.backgroundImage = url(media/play.png);}else{ play.style.backgroundImage = url(media/jeda.png);}}

Kode di bawah ini mengganti lagu dengan mengklik daftar.

 m0.onclick = function (){clearInterval(timer1);clearInterval(timer2);qingkong();flag = false;stopM();index = 0;pauseall();play.style.backgroundImage = url(media/pause. png);clearListBgc();document.getElementById(m0).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = putih;mList[index].play();cleanProgress();progressBar();changeInfo(index);playTimes();}m1.onclick = fungsi (){clearInterval(timer1);clearInterval(timer2);flag = false;qingkong();stopM();index = 1;pauseall();clearListBgc();play.style.backgroundImage = url(media/pause.png);document.getElementById(m1).style.backgroundColor = #A71307;document.getElementById(m+index).style. warna= putih;mList[index].play();cleanProgress();changeInfo(index);progressBar();playTimes();}m2.onclick = function (){clearInterval(timer1);clearInterval(timer2);flag = false ;qingkong();stopM();index = 2;pauseall();play.style.backgroundImage = url(media/pause.png);clearListBgc();document.getElementById(m2).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = putih;mList[index].play() ;cleanProgress();changeInfo(index);progressBar();playTimes();}

Ide berpindah lagu melalui playlist mirip dengan berpindah melalui tombol. Ini hanya mengatur lagu mana yang harus diputar saat ini sesuai dengan item daftar yang sesuai.

Beberapa metode disebutkan dalam fungsi berpindah lagu di atas. Mari kita lihat kegunaan metode ini.

Yang pertama adalah mengganti informasi lagu:

 function changeInfo(index){if (index==0) { musicName.innerHTML = Hari Kemuliaan; Singer.innerHTML = Beyond;}if (index==1) { musicName.innerHTML = Singer.innerHTML = Daniel Powter; }if (index==2) { musicName.innerHTML = Ribuan Mil Jauhnya; Singer.innerHTML = Jay Chou, Fei Yuqing;}}

Kemudian hapus kedua pengatur waktu:

 //Setel bilah kemajuan ke 0 function cleanProgress(timer1){if(timer1!=undefinisi){ clearInterval(timer1);}progress.style.width=0;progressBtn.style.left=60px;} function qingkong(timer2) { if (timer2!=tidak ditentukan){ clearInterval(timer2);}}

Hentikan pemutaran musik dan lanjutkan waktu pemutaran.

 fungsi stopM(){if(mList[index].played){ mList[index].pause(); mList[index].currentTime=0;

Terakhir, ubah gaya playlist di bawah ini:

 fungsi clearListBgc(){document.getElementById(m0).style.backgroundColor = #E5E5E5;document.getElementById(m1).style.backgroundColor = #E5E5E5;document.getElementById(m2).style.backgroundColor = #E5E5E5;document.getElementById (m0).gaya.warna = hitam;document.getElementById(m1).style.color = hitam;document.getElementById(m2).style.color = hitam;}

Pada titik ini, pada dasarnya kita telah menyelesaikan pemutar musik. Mari kita lihat efek animasinya:

Penulis: Jerry Pendidikan

Sumber: http://www.cnblogs.com/jerehedu/

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.