ボタンを使用して BGM の切り替えを制御する HTML5 メソッド

この記事では、HTML5 でボタンを使用して BGM の切り替えを制御する方法を主に紹介します。これは、必要な友人に参考にしていただけるように共有します。特に携帯電話の HTML5 ベースのマルチメディア ページでは、ユーザーが自分で BGM をオン/オフできるようにします。HTML5 の audio タグは、オーディオの再生ステータスを取得でき、タッチすることで BGM をオフ/オンにすることができます。ボタン。

レンダリングは次のとおりです:

デモエフェクトを表示する ソースコードのダウンロード

HTML

HTML5ページを作成し、b97864c2e0ef2353a16c4d64c7734e92 タグを配置し、オーディオファイルソースを設定します。ループ再生を設定します。 BGM のオンと一時停止の 2 つの状態を表す、クリックできる 2 つの画像を用意します。

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

画像の切り替えボタンをクリックしたときに、JavaScript スクリプトの playPause() 関数を呼び出しました。この関数は、オーディオの再生状態を決定します。停止 (一時停止) している場合は、.play() を呼び出して再生を継続します。2 つの状態が切り替わると、すぐに playback.pause() が表示されます。コードは次のとおりです:

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>

以上が、皆さんの学習に役立つことを願っています。 PHP中国語ウェブサイトへ！

関連する推奨事項:

メッセージと返信を実装するための HTML5 ページ

以上がボタンを使用して BGM の切り替えを制御する HTML5 メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。