Mari buat pemain audio tersuai

Mari kita bina pemain audio HTML5 tersuai! Manakala terbina dalam<audio></audio> Elemen berfungsi, pemain tersuai menawarkan kawalan reka bentuk yang lebih besar dan peluang penjenamaan, terutama yang bernilai untuk podcast atau laman web muzik. Tutorial ini akan membimbing anda melalui membuat pemain dengan bermain/jeda, mencari bar, paparan masa, kawalan kelantangan, dan fungsi bisu.

Komponen Pemain Utama:

Pemain tersuai kami akan mencerminkan fungsi pemain penyemak imbas standard, termasuk:

• Butang Main/Jeda: Butang untuk memulakan dan menghentikan main balik audio. Kami akan menggunakan animasi Lottie untuk peralihan visual yang lancar.
• Dapatkan Slider: Input pelbagai yang membolehkan pengguna melompat ke titik tertentu dalam audio.
• Masa/Tempoh semasa: Memaparkan masa audio yang berlalu dan total.
• Slider Kawalan Kelantangan: Input Julat untuk menyesuaikan isipadu audio.
• Butang Mute: Butang untuk bertukar -tukar bisu audio.

Struktur HTML:

Kami akan menggunakan elemen HTML5 semantik untuk kejelasan dan kebolehcapaian:

<div id="audio-player">
  <p>Pemain audio</p>
  <button id="play-icon"></button> 
  <span id="current-time">0:00</span> 
  <input type="range" id="seek-slider" min="0"> 
  <span id="duration">0:00</span> 
  <input type="range" id="volume-slider" min="0" max="100" value="100"> 
  <output id="volume-output">100</output> 
  <button id="mute-icon"></button> 
</div>
<audio id="audio-element" preload="metadata"></audio>

Gaya CSS (dipermudahkan):

CSS akan mengendalikan penampilan visual pemain. (Nota: CSS terperinci untuk gaya maju, termasuk keserasian silang penyemak imbas untuk input pelbagai, ditinggalkan untuk keringkasan tetapi penting untuk pemain siap pengeluaran. Rujuk artikel asal untuk gaya komprehensif.)

Fungsi JavaScript:

Kod JavaScript akan mengendalikan fungsi teras pemain audio. Ini termasuk:

1. Animasi Lottie: Import perpustakaan Lottie dan muatkan animasi main/jeda dan bisu. (Lihat artikel asal untuk pelaksanaan terperinci).

2. Paparan Tempoh: Gunakan acara loadedmetadata untuk mendapatkan tempoh audio dan formatnya (mm: ss). Mengendalikan kes di mana metadata tidak tersedia dengan serta -merta.

3. Dapatkan Slider: Tetapkan atribut max Slider Seek ke Tempoh Audio. Gunakan acara input untuk mengemas kini paparan masa semasa dan acara change untuk mengemas kini currentTime audio.

4. Jumlah Buffered: Gunakan acara progress untuk mengemas kini perwakilan visual Slider Seek Audio Buffered. (Ini memerlukan teknik CSS lanjutan, lihat artikel asal).

5. Kawalan Volume: Gunakan peristiwa input slider volum untuk mengemas kini harta volume audio dan paparan kelantangan.

6. Butang Mute: Gunakan acara click butang bisu untuk bertukar -tukar harta muted oleh audio.

7. Main/Jeda: Gunakan acara click butang Play/Jeda untuk bertukar -tukar main balik audio dan kemas kini animasi. Melaksanakan requestAnimationFrame untuk mengemas kini dengan lancar slider Seek semasa memainkan audio, menjeda kemas kini apabila pengguna berinteraksi dengan slider.

8. API Sesi Media (Pilihan): Mengintegrasikan API Sesi Media untuk membolehkan kawalan main balik audio dari kawalan media sistem operasi. (Lihat artikel asal untuk butiran pelaksanaan).

Komponen web (disyorkan):

Untuk organisasi yang lebih baik dan kebolehgunaan semula, merangkumi seluruh pemain audio dalam komponen web tersuai. (Lihat artikel asal untuk pelaksanaan komponen web terperinci).

Garis terperinci ini menyediakan asas yang kukuh untuk membina pemain audio tersuai anda. Ingatlah untuk merujuk artikel asal untuk kod lengkap dan penjelasan terperinci mengenai ciri -ciri yang lebih canggih dan gaya CSS. Kuncinya adalah untuk memecahkan fungsi ke dalam langkah -langkah yang boleh diurus dan mengendalikan ketidakkonsistenan penyemak imbas dengan berkesan.

Atas ialah kandungan terperinci Mari buat pemain audio tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!