Kaedah audio baru JavaScript () tidak dapat memainkan audio. Bagaimana menyelesaikannya?

Penyelesaian untuk Main balik Audio Gagal dalam kaedah JavaScript new Audio()

Apabila bermain audio menggunakan kaedah new Audio() JavaScript, anda sering menghadapi masalah main balik yang gagal. Artikel ini akan menganalisis kes yang sama dan menyediakan penyelesaian yang berkesan.

Dalam kes itu, pemaju menggunakan new Audio() untuk membuat objek audio, tetapi konsol melaporkan kesilapan uncaught (in promise) DOMException: Failed to load because no supported source was found. , dan audio tidak dapat dimainkan.

Mesej ralat menunjukkan bahawa penyemak imbas tidak dapat memuatkan fail audio. Digabungkan dengan contoh kod (kod HTML dan JS yang ditunjukkan dalam imej yang ditinggalkan di sini), masalahnya adalah terutamanya asynchronousness pemuatan audio dan dasar keselamatan penyemak imbas.

Kaedah new Audio(url) memuat sumber audio secara asynchronously. Selepas pernyataan new Audio() dilaksanakan, audio tidak dimuatkan dengan segera, dan memanggil music.play() secara langsung boleh menyebabkan kegagalan main balik.

Penyelesaian: Ambil kesempatan daripada acara canplaythrough . Acara ini dicetuskan apabila sumber audio dapat dimainkan dengan lancar. Dengarkan acara canplaythrough , pastikan audio telah dimuatkan dengan jayanya, dan kemudian panggil play() kaedah:

 const music = audio baru ('./ 1.mp3');
Music.AddEventListener ("CanPlaythrough", event => {
  muzik.play ();
});

Kod ini mewujudkan objek audio dan menambah pendengar acara canplaythrough . Apabila audio dimuatkan dan dimainkan, pendengar mencetuskan dan memanggil music.play() .

Sekiranya ia masih gagal bermain, mungkin dasar keselamatan pelayar menyekat main balik automatik. Untuk meningkatkan pengalaman pengguna, sesetengah penyemak imbas menyekat halaman daripada bermain audio secara automatik tanpa interaksi pengguna. Adalah disyorkan untuk menambah butang untuk membolehkan pengguna memicu main balik secara manual:

 const playButton = document.getElementById ('PlayButton'); 
playButton.addeventListener ('klik', () => {
    muzik.play ();
});

Jika pengguna secara aktif mencetuskan main balik, penyemak imbas tidak akan menghalang main balik audio, dan memastikan bahawa audio dimainkan dengan jayanya sambil menghormati pengalaman pengguna.

Atas ialah kandungan terperinci Kaedah audio baru JavaScript () tidak dapat memainkan audio. Bagaimana menyelesaikannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!