Verwenden von HTML5, um Hintergrundmusikschalter zu steuern

Manchmal fügen wir der Seite Hintergrundmusik hinzu, sodass Benutzer die Hintergrundmusik selbst ein- und ausschalten können, insbesondere Multimedia -Seiten, die basierend auf mobilen HTML5 hergestellt wurden. Das Audio -Tag von HTML5 kann den Audio -Wiedergabestatus erhalten, und die Hintergrundmusik kann ausgeschaltet und eingeschaltet werden, indem die Taste berührt wird.

Die Renderings sind wie folgt:

Erstellen Sie eine HTML5 -Seite, platzieren Sie das <udio> -Tag, setzen Sie die Audio -Dateiquelle und legen Sie die Loop -Wiedergabe fest. Bereiten Sie zwei Bilder vor, in denen Sie die beiden Zustände des Einschaltens und Pause von Hintergrundmusik angeben.

XML/HTML -Code -Inhalt in die Zwischenablage kopieren

1. <audioid = music2src = music.mp3loop = Loop> Ihr Browser unterstützt das Audio -Tag nicht. </audio>
2. <Ahref = JavaScript: Playpause ();> <imgsrc = pause.gifwidth = 48Height = 50id = music_btn2border = 0> </a>

Als wir auf die Schaltfläche "Switch Image" geklickt haben, haben wir das JavaScript -Skript und die Funktion von PlayPause () aufgerufen. Beurteilen Sie in der Funktion den Audio -Audio -Wiedergabestatus. Wenn es gestoppt wurde (inne), rufen Sie .play () an, um weiter zu spielen. Wenn es im Wiedergabestatus ist, Wiedergabe. Pause () wird sofort suspendiert. Wenn Sie zwischen den beiden Zuständen wechseln, sehen Sie sich bitte den Code an:

JavaScript -Code -Inhalt in Zwischenablage kopieren

1. functionPlayPause () {
2. varmusic = document.getElementById ('music2');
3. varmusic_btn = document.getElementById ('music_btn2');
4. if (music.pause) {
5. Music.play ();
6. Music_Btn.src = 'Play.gif';
7. }
8. anders{
9. musik.pause ();
10. music_btn.src = 'pause.gif';
11. }
12. }

Wenn Sie JQuery Code verwenden, können Sie ihn so schreiben:

JavaScript -Code -Inhalt in Zwischenablage kopieren

1. <audioid = musiksrc = http: //cctv3.qiniudn.com/zuixingfuderen.mp3autoplay=Autoplayloop=loop> Ihr Browser unterstützt das Audio -Tag nicht. </audio>
2. <aid = audio_btn> <imgsrc = play.gifwidth = 48Height = 50id = music_btnborder = 0> </a>
3. <Script>
4. $ (#audio_btn) .click (function () {
5. varmusic = document.getElementById (Musik);
6. if (music.pause) {
7. Music.play ();
8. $ (#music_btn) .attr (SRC, Play.gif);
9. }anders{
10. musik.pause ();
11. $ (#music_btn) .attr (src, pause.gif);
12. }
13. });
14. </script>