jquery_jqueryでBGM切り替えと自動再生音を制御する方法

この記事の例では、jquery が BGM の切り替えとプロンプトの自動再生を制御する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

多くの人は、Web ページの作成を初めて学ぶときに、Web ページに BGM を追加します。音楽の再生を聞いた瞬間に達成感を感じます。

ここではjsを使ってBGMの再生・停止を制御する方法を説明します。詳細は以下の通りです。

1. jquery コントロール BGM スイッチ

コードをコピー コードは次のとおりです:

<頭>

<スクリプトタイプ="text/javascript">
//BGM をロードして自動的に再生します
$('#bg_music').append('');
$('#bg_music_btn').click(function(){
var state = $('#bg_music_btn').attr('state');
if(state == '1')//
{
$('#bg_music_btn').attr('state','0');
$('#bg_music_btn').html('BGM をオンにする');
$('#m_bg_music').remove();
}else if(state == '0')
{
$('#bg_music_btn').attr('state','1');
$('#m_bg_music').remove();
$('#bg_music_btn').html('BGM をオフにする');
$('#bg_music').append('');
}
});

バックグラウンド ミュージックをオフにする

上記では、jquery が BGM スイッチを制御する方法を紹介しましたが、次にさらに拡張します。

2. JQuery はプロンプトサウンドを自動的に再生します

Web サイトの最初の自動通知音機能は、Discuz フォーラムで見つかりました。ただし、問題の 1 つは、Flash のみをサポートし、HTML5 をサポートしていないことです。最新バージョンが HTML5 をサポートしているかどうかは不明です。
Discuz 7.2 バージョンの場合、player.swf、pm_1.mp3、pm_2.mp3、pm_3.mp3 が提供されており、次のスクリプトを使用して実装します:

コードをコピー コードは次のとおりです。

残念ながら、この方法はフラッシュに限定されており、Apple デバイスでは問題が発生する可能性があります。

HTML5 オープン ソース プレーヤー JPlayer はプロンプト サウンドの自動再生をサポートします
JPlayer は、自動再生プロンプトをトリガーするための再生イベントをサポートしています。

1. JPlayer を #jplayer などの div レイヤーにロードします。

コードをコピー コードは次のとおりです。

$(function() {
$("#jplayer").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
準備完了: function () {
$(this).jPlayer("setMedia", {
mp3: "./resources/message.mp3"
}); }、
提供:「mp3」
});
});
ボディ部分を追加します:

JQuery をロードした後、jplayer の div コンテンツは、swf をサポートするブラウザでは

になります。

コードをコピーします コードは次のとおりです。

<オブジェクト高さ="1" width="1" id="jp_flash_0 " data= "http://www.jplayer.org/latest/js/Jplayer.swf" type="application/x-shockwave-flash" style="width: 0px; height: 0px;">

は、HTML5 をサポートするブラウザでは

になります。

コードをコピーします コードは次のとおりです。

読み込みが完了すると、再生イベントがトリガーされます。

2. 再生サウンドイベントをトリガーします

コードをコピーします コードは次のとおりです。

$("#jplayer").jPlayer('play');

3. 5秒ごとにプロンプ​​トトーンを再生するループ再生機能

コードをコピーします コードは次のとおりです:

function PlaySound() {

$("#jplayer").jPlayer('play'); setInterval("PlaySound()", 5000); true を返します。
}

付録:

1. プロンプトサウンドが自動的に再生されない問題を解決します

JQplayer をロードした直後に再生トリガー イベントを実行しても、効果はありません。おそらくオーディオ ファイルがロードされていないためです。

2. 解決策は、トリガー イベントの実行を 5 秒間待機することです。

コードをコピー コードは次のとおりです。setTimeout("$('#jplayer').jPlayer('play) ')" , 5000);

ページが読み込まれると、5 秒後にプロンプ​​ト音が自動的に再生されます。

この記事が皆さんの jquery プログラミング設計に役立つことを願っています。