この記事では、HTML5 でボタンを使用して BGM の切り替えを制御する方法を主に紹介します。これは、必要な友人に参考にしていただけるように共有します。特に携帯電話の HTML5 ベースのマルチメディア ページでは、ユーザーが自分で BGM をオン/オフできるようにします。HTML5 の audio タグは、オーディオの再生ステータスを取得でき、タッチすることで BGM をオフ/オンにすることができます。ボタン。
レンダリングは次のとおりです:
デモエフェクトを表示する ソースコードのダウンロードHTML
HTML5ページを作成し、
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 スクリプトの playPause() 関数を呼び出しました。この関数は、オーディオの再生状態を決定します。停止 (一時停止) している場合は、.play() を呼び出して再生を継続します。2 つの状態が切り替わると、すぐに playback.pause() が表示されます。コードは次のとおりです:
JavaScriptfunction 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代码可以这样写:
<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>
メッセージと返信を実装するための HTML5 ページ
以上がボタンを使用して BGM の切り替えを制御する HTML5 メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。