HTML5-Methode zur Verwendung von Schaltflächen zur Steuerung des Hintergrundmusikwechsels

Dieser Artikel stellt hauptsächlich die Methode zur Steuerung des Hintergrundmusikwechsels in HTML5 vor. Jetzt kann ich ihn an Freunde weitergeben, die ihn benötigen Durch das Hinzufügen von Hintergrundmusik können Benutzer die Hintergrundmusik selbst ein- und ausschalten, insbesondere für Multimedia-Seiten, die auf HTML5 für Mobiltelefone basieren. Das Audio-Audio-Tag von HTML5 kann den Wiedergabestatus des Audios und die Hintergrundmusik abrufen durch Berühren der Taste ein- und ausgeschaltet werden.

Das Rendering ist wie folgt:

Demoeffekt ansehen  

HTML

Erstellen Sie eine HTML5-Seite, platzieren Sie das b97864c2e0ef2353a16c4d64c7734e92-Tag, legen Sie die Audiodateiquelle fest und stellen Sie die Loop-Wiedergabe ein. Bereiten Sie zwei Bilder vor, die die beiden Zustände Einschalten und Anhalten der Hintergrundmusik darstellen und anklickbar sind.

XML/HTML

<audio id="music2" src="music.mp3"  loop="loop">你的浏览器不支持audio标签。</audio>    
<a href="javascript:playPause();"><img src="pause.gif" width="48" height="50" id="music_btn2" border="0"></a>

Javascript

Wir haben das Javascript-Skript aufgerufen, als wir auf die Schaltfläche „Bild wechseln“ geklickt haben, playPause( )Funktion. Die Funktion bestimmt den Audio-Wiedergabestatus. Rufen Sie .play() auf, um die Wiedergabe fortzusetzen. Wenn die beiden Zustände wechseln, wechselt die Funktion wird rechtzeitig aktualisiert. Bitte beachten Sie den Code:

JavaScript

function playPause() {    
    var music = document.getElementById('music2');    
    var music_btn = document.getElementById('music_btn2');    
    if (music.paused){    
        music.play();    
        music_btn.src = 'play.gif';    
    }    
    else{    
        music.pause();    
        music_btn.src = 'pause.gif';     
    }    
}   如果使用jQuery代码可以这样写：

JavaScript

<audio id="music" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay" loop="loop">你的浏览器不支持audio标签。</audio>    
<a id="audio_btn"><img src="play.gif" width="48" height="50" id="music_btn" border="0"></a>    
<script>    
$("#audio_btn").click(function(){    
    var music = document.getElementById("music");    
    if(music.paused){    
        music.play();    
        $("#music_btn").attr("src","play.gif");    
    }else{    
        music.pause();    
        $("#music_btn").attr("src","pause.gif");    
    }    
});    
</script>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass es für das Lernen aller hilfreich sein wird. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

HTML5-Seite zur Implementierung von Nachrichten und Antworten

Das obige ist der detaillierte Inhalt vonHTML5-Methode zur Verwendung von Schaltflächen zur Steuerung des Hintergrundmusikwechsels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!