Bagaimana anda membenamkan audio dalam html menggunakan & lt; audio & gt; unsur?

Bagaimana anda membenamkan audio dalam html menggunakan elemen ?

Untuk membenamkan audio dalam dokumen HTML menggunakan elemen <audio></audio> , anda boleh mengikuti langkah -langkah ini:

1. Struktur Asas : Elemen <audio></audio> memerlukan tag penutup dan boleh digunakan seperti berikut:

    <code class="html"><audio src="path/to/your/audiofile.mp3" controls> Your browser does not support the audio element. </audio></code>

   Atribut src menentukan laluan ke fail audio, dan atribut controls menambah antara muka pengguna untuk mengawal main balik.

2. Kandungan Fallback : Teks antara tag pembukaan dan penutup berfungsi sebagai kandungan sandaran untuk penyemak imbas yang tidak menyokong elemen <audio></audio> .

3. Autoplay dan Loop : Anda boleh menambah atribut autoplay untuk mula bermain audio secara automatik apabila halaman dimuat, dan atribut loop untuk melengkapkan main balik audio:

    <code class="html"><audio src="path/to/your/audiofile.mp3" controls autoplay loop> Your browser does not support the audio element. </audio></code>

4. Preloading : Atribut preload boleh digunakan untuk menentukan bagaimana audio harus dimuatkan apabila halaman dimuat. Ia boleh mempunyai tiga nilai: none , metadata , atau auto :

    <code class="html"><audio src="path/to/your/audiofile.mp3" controls preload="metadata"> Your browser does not support the audio element. </audio></code>

Dengan menggunakan atribut dan struktur ini, anda boleh membenamkan audio dengan berkesan dalam dokumen HTML anda.

Apakah format audio yang disokong untuk elemen HTML ?

Elemen HTML <audio></audio> menyokong beberapa format audio, tetapi tahap sokongan boleh berbeza -beza di seluruh pelayar yang berbeza. Format yang paling sering disokong adalah:

1. MP3 (MPEG Audio Layer III) : Disokong secara meluas di semua pelayar utama, termasuk Chrome, Firefox, Safari, Edge, dan Opera.
2. WAV (format fail audio gelombang) : Disokong oleh Chrome, Firefox, Safari, Edge, dan Opera.
3. Ogg (Ogg Vorbis) : Disokong oleh Chrome, Firefox, Edge, dan Opera, tetapi bukan oleh Safari.
4. AAC (Pengekodan Audio Lanjutan) : Disokong oleh Chrome, Safari, Edge, dan Opera, tetapi bukan oleh Firefox.
5. Webm (Webm Audio) : Disokong oleh Chrome, Firefox, Edge, dan Opera, tetapi bukan oleh Safari.

Untuk memastikan keserasian terluas, disarankan untuk menyediakan pelbagai pilihan sumber dalam elemen <audio></audio> , seperti yang dibincangkan dalam bahagian seterusnya.

Bagaimanakah anda boleh menambah pelbagai pilihan sumber ke elemen untuk keserasian yang lebih baik?

Untuk menambah pelbagai pilihan sumber ke elemen <audio></audio> untuk keserasian yang lebih baik di seluruh pelayar yang berbeza, anda boleh menggunakan elemen <source></source> dalam tag <audio></audio> . Inilah cara anda boleh melakukannya:

1. Unsur sumber berganda : Anda boleh menentukan pelbagai <source></source> elemen di dalam elemen <audio></audio> , masing -masing menunjuk ke format fail audio yang berbeza:

    <code class="html"><audio controls> <source src="path/to/your/audiofile.mp3" type="audio/mpeg"> <source src="path/to/your/audiofile.ogg" type="audio/ogg"> <source src="path/to/your/audiofile.wav" type="audio/wav"> Your browser does not support the audio element. </source></source></source></audio></code>

2. Taip Atribut : Atribut type dalam elemen <source></source> Menentukan jenis MIME fail audio, yang membantu penyemak imbas menentukan fail yang hendak digunakan. Jenis mime biasa termasuk:

   • audio/mpeg untuk mp3
   • audio/ogg untuk Ogg
   • audio/wav untuk WAV
3. Perintah Sumber : Penyemak imbas akan cuba memuatkan sumber mengikut urutan yang disenaraikan. Ia akan menggunakan sumber pertama yang berjaya dimainkan.

Dengan menyediakan pelbagai pilihan sumber, anda meningkatkan kemungkinan bahawa audio akan dimainkan pada penyemak imbas pengguna, tanpa mengira format yang disokong.

Apakah atribut biasa yang digunakan dengan elemen untuk mengawal main balik?

Beberapa atribut boleh digunakan dengan elemen <audio></audio> untuk mengawal main balik dan meningkatkan pengalaman pengguna. Berikut adalah yang paling biasa:

1. Kawalan : Menambah antara muka pengguna untuk mengawal main balik, termasuk permainan, jeda, dan kawalan kelantangan.

    <code class="html"><audio src="path/to/your/audiofile.mp3" controls></audio></code>

2. Autoplay : Secara automatik mula memainkan audio apabila halaman dimuat. Perhatikan bahawa sesetengah pelayar mungkin memerlukan interaksi pengguna sebelum membenarkan autoplay kerana privasi dan kebimbangan pengalaman pengguna.

    <code class="html"><audio src="path/to/your/audiofile.mp3" autoplay></audio></code>

3. Gelung : menyebabkan audio dimulakan semula dari awal apabila ia selesai bermain.

    <code class="html"><audio src="path/to/your/audiofile.mp3" loop></audio></code>

4. Preload : Menentukan bagaimana audio harus dimuatkan apabila halaman dimuat. Ia boleh mempunyai tiga nilai:

   • none : Audio tidak boleh dimuatkan.
   • metadata : Hanya metadata (contohnya, tempoh) harus dimuatkan.

   • auto : Keseluruhan fail audio harus dimuatkan.

      <code class="html"><audio src="path/to/your/audiofile.mp3" preload="metadata"></audio></code>

5. Muted : Mutes audio secara lalai.

    <code class="html"><audio src="path/to/your/audiofile.mp3" muted></audio></code>

6. SRC : Menentukan URL fail audio yang akan dimainkan.

    <code class="html"><audio src="path/to/your/audiofile.mp3"></audio></code>

Atribut ini membolehkan anda menyesuaikan tingkah laku elemen <audio></audio> untuk memenuhi keperluan khusus anda dan meningkatkan pengalaman pengguna di laman web anda.

Atas ialah kandungan terperinci Bagaimana anda membenamkan audio dalam html menggunakan & lt; audio & gt; unsur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!