ボタンを使用して BGM の切り替えを制御する HTML5 メソッド-H5 チュートリアル-php.cn

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

不言

リリース： 2018-06-09 16:56:09

オリジナル

7015 人が閲覧しました

この記事では、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

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

JavaScript

function playPause() {    
    var music = document.getElementById(&#39;music2&#39;);    
    var music_btn = document.getElementById(&#39;music_btn2&#39;);    
    if (music.paused){    
        music.play();    
        music_btn.src = &#39;play.gif&#39;;    
    }    
    else{    
        music.pause();    
        music_btn.src = &#39;pause.gif&#39;;     
    }    
}   如果使用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中国語ウェブサイトへ！