Bagaimana untuk memainkan pelbagai fail audio secara berurutan dalam HTML5?

Anda boleh memainkan pelbagai fail audio mengikut urutan dengan mendengar peristiwa akhir elemen audio HTML5. Pertama, jawapan yang jelas adalah menggunakan acara yang berakhir untuk mencetuskan main balik audio seterusnya; Langkah -langkah khusus ialah: 1. Tentukan array fail audio dan dapatkan elemen audio; 2. Tetapkan indeks main balik semasa, muatkan dan mainkan audio pertama; 3. Mengikat peristiwa yang berakhir untuk elemen audio, kenaikan indeks apabila acara itu dicetuskan dan audio seterusnya dimuatkan; 4. Anda boleh memilih untuk merealisasikan main balik gelung atau berhenti selepas main balik selesai; 5. Anda boleh memuatkan audio seterusnya untuk meningkatkan pengalaman; 6. Tambah pengendalian ralat untuk melangkau audio gagal; 7. Beri perhatian kepada sekatan autoplay penyemak imbas, dan main balik pertama perlu dicetuskan oleh interaksi pengguna untuk memastikan main balik berikutnya tidak disekat. Seluruh proses mencapai main balik berterusan yang lancar melalui pengurusan dan pengurusan indeks acara.

Bermain pelbagai fail audio satu demi satu di HTML5 boleh dilakukan dengan mendengar peristiwa ended elemen <audio></audio> dan kemudian memuatkan atau memainkan fail seterusnya. Inilah cara anda boleh melakukannya dengan berkesan.

Gunakan acara ended untuk mencetuskan audio seterusnya

Acara ended kebakaran apabila fail audio selesai bermain. Anda boleh menggunakan ini untuk memulakan audio seterusnya dalam senarai anda.

Inilah contoh mudah:

 <audio id = "pemain" kawalan> </audio>

<script>
  const audiofiles = [
    &#39;audio1.mp3&#39;,
    &#39;audio2.mp3&#39;,
    &#39;audio3.mp3&#39;
  ];

  const player = document.getElementById (&#39;Player&#39;);
  Biarkan CurrentTrack = 0;

  fungsi playNext () {
    jika (currentTrack <audiofiles.length) {
      player.src = audiofiles [currentTrack];
      player.load (); // Muatkan sumber baru
      player.play ();
      CurrentTrack;
    }
  }

  // mula bermain trek pertama
  PlayNext ();

  // Apabila trek semasa berakhir, mainkan seterusnya
  player.addeventListener (&#39;berakhir&#39;, PlayNext);
</script>

Mengendalikan kes kelebihan dan gelung

Anda mungkin ingin mempertimbangkan apa yang berlaku apabila semua trek selesai. Anda boleh berhenti, gelung kembali ke yang pertama, atau memberitahu pengguna.

Sebagai contoh, untuk gelung:

 player.addeventListener ('berakhir', () => {
  jika (currentTrack> = audiofiles.length) {
    CurrentTrack = 0; // Tetapkan semula ke trek pertama
  }
  PlayNext ();
});

Atau berhenti selepas yang terakhir:

 player.addeventListener ('berakhir', () => {
  jika (currentTrack <audiofiles.length) {
    PlayNext ();
  } else {
    console.log ("Semua trek selesai.");
  }
});

Audio Preload (Pilihan)

Sekiranya anda mahukan peralihan yang lebih lancar, anda boleh memuatkan fail audio seterusnya semasa yang sedang dimainkan:

 fungsi playNext () {
  jika (currentTrack <audiofiles.length) {
    player.src = audiofiles [currentTrack];
    player.load ();
    player.play (). Catch (e => console.log ("main balik gagal:", e));
    CurrentTrack;
  }
}

Nota: Pelayar moden mungkin memerlukan interaksi pengguna sebelum membenarkan autoplay. Oleh itu, pastikan permainan pertama dicetuskan oleh tindakan pengguna (seperti klik), atau penyemak imbas boleh menyekat panggilan berikutnya play() .

Petua untuk pengalaman yang lebih baik

• Sentiasa mengendalikan peristiwa error sekiranya fail gagal dimuatkan.
• Gunakan player.load() selepas menukar src untuk memastikan fail baru dimuatkan.
• Pertimbangkan untuk menunjukkan trek mana yang dimainkan menggunakan label atau kemas kini tajuk.

Contoh dengan pengendalian ralat:

 player.addeventListener ('error', () => {
  Console.log ("Gagal bermain:", Audiofiles [CurrentTrack - 1]);
  PlayNext (); // Langkau ke seterusnya
});

Pada asasnya, ia tidak rumit -hanya rantai main balik audio menggunakan acara ended dan menguruskan senarai trek anda dengan kaunter.

Atas ialah kandungan terperinci Bagaimana untuk memainkan pelbagai fail audio secara berurutan dalam HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!