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

不言
リリース: 2018-06-09 16:56:09
オリジナル
7001 人が閲覧しました

この記事では、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中国語ウェブサイトへ!

関連する推奨事項:

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート