HTML5を使用して、バックグラウンドミュージックスイッチを制御します

バックグラウンドミュージックをページに追加して、ユーザーが自分でバックグラウンドミュージックをオンとオフ、特にモバイルHTML5に基づいて作成されたマルチメディアページをオフにできるようにすることがあります。 HTML5のオーディオタグは、オーディオ再生ステータスを取得でき、バックグラウンドミュージックをオフにしてオンにすることができます。

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

HTML5ページを作成し、<Audio>タグを配置し、オーディオファイルソースを設定し、ループ再生を設定します。 2つの写真を準備して、2つの状態をオンにしてバックグラウンドミュージックを一時停止することを示して、クリックできます。

XML/HTMLコードコピーコンテンツにクリップボードに

1. <audioid = music2src = music.mp3loop = loop>ブラウザはオーディオタグをサポートしていません。 </audio>
2. <ahref = javascript：playpause（）;> <imgsrc = pause.gifwidth = 48height = 50id = music_btn2border = 0> </a>

[スイッチ画像]ボタンをクリックすると、JavaScriptスクリプトとPlayPause（）関数を呼び出しました。関数では、オーディオオーディオ再生ステータスを判断します。停止した場合（一時停止）、.play（）に電話して再生を続けます。再生ステータスにある場合、再生。 Pause（）はすぐに停止されます。 2つの状態を切り替えるときは、コードを参照してください。

JavaScriptコードコピーコンテンツにクリップボードに

1. functionPlayPause（）{
2. varmusic = document.getElementById（ 'music2'）;
3. varmusic_btn = document.getElementById（ 'music_btn2'）;
4. if（music.paused）{
5. music.play（）;
6. music_btn.src = 'play.gif';
7. }
8. それ以外{
9. music.pause（）;
10. music_btn.src = 'pause.gif';
11. }
12. }

jqueryコードを使用する場合、次のように書くことができます。

JavaScriptコードコピーコンテンツにクリップボードに

1. <audioid = musicsrc = http：//cctv3.qiniudn.com/zuixingfuderen.mp3autoplay = autoplayloop = loop>ブラウザはオーディオタグをサポートしていません。 </audio>
2. <aid = audio_btn> <imgsrc = play.gifwidth = 48height = 50Id = music_btnborder = 0> </a>
3. <スクリプト>
4. $（＃audio_btn）.click（function（）{
5. varmusic = document.getElementById（Music）;
6. if（music.paused）{
7. music.play（）;
8. $（＃music_btn）.attr（src、play.gif）;
9. }それ以外{
10. music.pause（）;
11. $（＃music_btn）.attr（src、pause.gif）;
12. }
13. }）;
14. </script>