Bagaimana untuk mengawal suis muzik latar belakang dan bunyi main balik automatik dengan jquery_jquery

Contoh dalam artikel ini menerangkan cara jquery mengawal suis muzik latar belakang dan main balik automatik gesaan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ramai orang menambahkan sekeping muzik latar pada halaman web apabila mereka mula-mula belajar membuat halaman web. Mereka sering merasai pencapaian apabila mendengar muzik dimainkan.

Di sini saya akan menerangkan cara menggunakan js untuk mengawal main balik dan menghentikan muzik latar belakang. Butirannya adalah seperti berikut:

1. suis muzik latar belakang kawalan jquery

Salin kod Kod adalah seperti berikut: //Muatkan muzik latar belakang dan mainkan secara automatik $('#bg_music').append(' '); $('#bg_music_btn').klik(fungsi(){ var state = $('#bg_music_btn').attr('state'); jika(nyatakan == '1')// { $('#bg_music_btn').attr('state','0'); $('#bg_music_btn').html('Hidupkan muzik latar belakang'); $('#m_bg_music').remove(); }lain jika(nyatakan == '0') { $('#bg_music_btn').attr('state','1'); $('#m_bg_music').remove(); $('#bg_music_btn').html('Matikan muzik latar belakang'); $('#bg_music').append(' '); } }); Matikan muzik latar belakang Perkara di atas memperkenalkan cara jquery mengawal suis muzik latar belakang, dan akan diperluaskan lagi seterusnya.

2. JQuery memainkan bunyi segera

Fungsi bunyi pemberitahuan automatik yang terawal untuk tapak web ditemui dalam forum Discuz. Tetapi satu masalah ialah ia hanya menyokong flash dan tidak menyokong HTML5 Tidak jelas sama ada versi terkini menyokong HTML5. Untuk versi Discuz 7.2, player.swf, pm_1.mp3, pm_2.mp3, pm_3.mp3 disediakan, dan kemudian gunakan skrip berikut untuk melaksanakan:

Salin kod Kod adalah seperti berikut: fungsi pemain bunyi(fail) { $('soundplayerlayer').innerHTML = AC_FL_RunContent('id', 'pmsoundplayer', 'name', 'pmsoundplayer', 'width', '0′, 'height', '0′, 'src', '{$ boardurl}images/sound/player.swf', 'FlashVars', 'sFile={$boardurl}images/sound/pm_' fail '.mp3′, 'menu', 'false', 'allowScriptAccess', 'sameDomain', 'swLiveConnect', 'true'); }

Leider ist diese Methode auf Flash beschränkt und auf Apple-Geräten kann es zu Problemen kommen. HTML5-Open-Source-Player JPlayer unterstützt die automatische Wiedergabe von Aufforderungstönen JPlayer unterstützt Wiedergabeereignisse, um automatische Wiedergabeaufforderungen auszulösen.

1. Laden Sie JPlayer in eine Div-Ebene, z. B. #jplayer.

Code kopieren Der Code lautet wie folgt: $(function() { $("#jplayer").jPlayer({ swfPath: „http://www.jplayer.org/latest/js/Jplayer.swf“, Bereit: Funktion () { $(this).jPlayer("setMedia", { mp3: "./resources/message.mp3" }); }, Geliefert: „mp3“ }); }); Fügen Sie den Körperteil hinzu: Nach dem Laden von JQuery wird der Div-Inhalt von jplayer zu: in Browsern, die SWF unterstützen

Code kopieren Der Code lautet wie folgt: &lt ;param name="wmode" value="opaque"> wird zu: in Browsern, die HTML5 unterstützen

Code kopieren Der Code lautet wie folgt: Nachdem der Ladevorgang abgeschlossen ist, wird das Wiedergabeereignis ausgelöst.

2. Wiedergabe-Soundereignis auslösen

Code kopieren Der Code lautet wie folgt: $("#jplayer").jPlayer('play'); 3. Loop-Wiedergabefunktion, die alle 5 Sekunden einen Aufforderungston abspielt

Code kopieren Der Code lautet wie folgt: Funktion PlaySound() { $("#jplayer").jPlayer('play'); setInterval("PlaySound()", 5000); Rückgabe wahr; }

Anhang: 1. Lösen Sie das Problem, dass der Aufforderungston nicht automatisch abgespielt werden kann

Wenn Sie das Wiedergabe-Trigger-Ereignis unmittelbar nach dem Laden von JQplayer ausführen, hat es keine Auswirkung. Der genaue Grund ist mir nicht bekannt. Es liegt wahrscheinlich daran, dass die Audiodatei nicht geladen wird.

2. Die Lösung besteht darin, das Triggerereignis 5 Sekunden warten zu lassen, bis es ausgeführt wird.

Code kopieren Der Code lautet wie folgt: setTimeout("$('#jplayer').jPlayer('play ')" , 5000); Nachdem die Seite geladen wurde, ertönt nach 5 Sekunden automatisch ein Aufforderungston. Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.