HTML5 を使用して、Buttons_html5 チュートリアル スキルを使用して BGM スイッチを制御する

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

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

HTML

HTML5 ページを作成し、

1. <オーディオ id="music2" src="music.mp3" loop="loop">お使いのブラウザは audio タグをサポートしていません。 音声>
2. <a href="javascript: playPause();"><img src="pause.gif" 幅="48" 身長="50" id="music_btn2" ボーダー="0">a>

JavaScript

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

を参照してください。

1. 関数 playPause() {
2. var music = document.getElementById('music2');
3. var music_btn = document.getElementById('music_btn2');
4. if (music.paused){
5. music.play();
6. music_btn.src = 'play.gif';
}
8. else{
music.pause();
music_btn.src =
10. 'pause.gif'; }
11. }
12. jQuery コードを使用する場合は、次のように記述できます:

JavaScript コード

コンテンツをクリップボードにコピーします

1.     
2. "audio_btn">>"play.gif" width="48"高さ="50" id="music_btn" border="0">    
3. <スクリプト>    
4. $("#audio_btn").click(function(){
5. var music = document.getElementById("music");    
6. if(music.paused){
7. music.play();    
8. $("#music_btn").attr("src", "play.gif");    
9. }else{
10. music.pause();    
11. $("#music_btn").attr("src", "pause.gif");    
12. }
13. });    
14.