HTML5 audio element_html5 チュートリアル スキルに基づいてサウンドを再生する jQuery プラグイン

1. 前回の雑談の一部
私が大学生だった頃は、まだ Flash サイトが少し流行っていたようで、何らかのコンテンツを持った Flash サイトでは必ず雑多な効果音が欠かせませんでした。効果音の一部は雰囲気を高めるBGMであり、もう一部はインタラクションを促進し体験を高めるインタラクティブサウンド（ボタンを押す音や通り過ぎるときの「ピー」「ビー」など）です。当時、Flash から遠く離れた Web ページではサウンド インタラクションはほとんどありませんでした。互換性があったとしても、互換性を実現するにはコントロールに依存するか、Flash とインタラクションする必要がありました (たとえば、実装前に私が作成した精神薄弱のゲームなど)。中性子爆弾が標的に命中したときの爆発音）。

マルクスは、物事は発展していくものだと私たちに言いました。女の子はいつか若い女性になる、そしてテクノロジーについても同じことが言えます。たとえば、Mozilla CEO の Gary Kwicks は本日、Firefox 5 が Firefox 4 のリリースからわずか 3 か月後の 6 月 22 日に正式にリリースされることを明らかにしました – クリックして表示します。 HTML5 の進歩と普及により、これまで Flash を使用することでしか実現できなかった多くの効果が、Web ページ上で簡単に実現できるようになりました。たとえば、オーディオ ファイルの再生です。この記事は、jQuery を使用して要素がホバーしたときにサウンドを再生する効果を簡単に実現するためのちょっとしたテクニックです。したがって、この記事とこのプラグインに関する限り、IE6 ～ 8 が対象となります。めちゃくちゃ。

2. 効果、リソース、使い方
ブラインドデートと同じように、相手の見た目が非常に重要なので、廬山の素顔を垣間見たい場合は、クリックしてくださいここ: サウンドを再生する jQuery ミニ プラグインのデモ

デモでは、次のような垂直ナビゲーションが確認できます:

ナビゲーションの最初の波をマウスで素早く移動します。そして、心の中の母親のように、常にただ一つの声が再生されます。マウスが素早く移動する間、下ではナビゲーションの波があり、まるで爆竹のようにパチパチと音を立てます。心臓。

この jQuery プラグインは非常にシンプルで非常に小さいので、蚊と戦うために対空砲を使用することはできません。スクリプトに興味がある場合は、次のリンクを「右クリック - [ターゲット | リンク] 名前を付けて保存」してください: jquery-audioPlay.js


を使用して、最初に jQuery ライブラリを呼び出します。次のコードに示すエフェクト スクリプト ファイル:
_fcksavedurl=""http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">" _fcksavedurl= ""http://ajax/libs/jquery/1.5.2/jquery.min.js">

次に、マウスが通過したときにサウンドを再生する必要がある要素をバインドします。メソッド名は audioPlay() です。たとえば、デモ ページでは次のものが使用されています:

コードをコピーします

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

$("#nav li").audioPlay({
name: "playOnce",
urlMp3: "/study/media/beep. mp3",
urlOgg: " /study/media/beep.ogg"
});

明らかに、サウンドを再生するには、オーディオ ファイル ソースがなければ不可能です。パラメータ内のオーディオ アドレスは必須です。 特定のパラメータ 関連する手順については、以下の表を参照してください。

注: Firefox および Opera ブラウザは OGG 形式のオーディオをサポートし、Webkit Core ブラウザと IE は MP3 形式のオーディオをサポートします。

デモ ページの上部および下部のナビゲーション グループの音響効果には、上記のすべてのパラメータが適用されます。その完全な使用法は次のとおりです:

コピーcode

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

$(function() {
$("#nav li").audioPlay({
name : "playOnce",
urlMp3: "/study/media/beep.mp3",
urlOgg: "/study/media/beep.ogg"
}); li").audioPlay({
urlMp3: "/study/media/beep.mp3",
urlOgg: "/study/media/beep.ogg",
clone: true
});
});

3. 最後にちょっとした注意事項
現在 HTML5 オーディオ要素をサポートしているブラウザは次のとおりです: Firefox 3.5、Chrome 3、Opera 10.5 Safari 4、IE 9、そしてこの魔法の国では、インターネット上では IE6 ～ 8 がまだ大部分を占めています。この記事に記載されている内容は、現時点ではまだあまり価値がないと思われるかもしれません。

ただし、漸進的な強化の原則に基づき、ユーティリティとリソースの使用量を比較検討することに基づいて、この記事のこの小さなことを実際のプロジェクトに適用することは悪い考えではありません。さらに、Windows 7 のインストール容量が大幅に増加したため、IE6 の時代は意図せず突然終わりを迎えるかもしれません。その時になっても、それを取り戻すのに遅すぎることはないかもしれません。この感情は、私の今の女将さんの60、70歳の女性です。彼女は基本的にコンピュータのことは全く知りませんが（株を読むためだけに使っている）、彼女のコンピュータは豪華なWindows 7で、Windowsを使用できるようです。 7システムはかなり良いです。

フロントエンドテクノロジーの大きな波が来る前に基礎スキルをしっかりと練習しておかないと、大きな波が来たときに簡単に飲み込まれてしまいます。個人的には、地震直後の日本と同じように、大津波が押し寄せているような気がします...

テストコードパッケージのダウンロード