コメント:HTML5オーディオ要素jQueryプラグインに基づいてサウンドを再生します。それを必要とする友人はそれを参照できます。
1.先にいくつかのナギング私が夢のような大学にいたとき、Flashのウェブサイトは少し人気があるように見え、少しのコンテンツを持つフラッシュサイトでは、さまざまな効果音が常に不可欠でした。サウンドエフェクトの一部は、雰囲気を作成するバックグラウンドミュージックであり、他の部分は、ボタンが押されたり通過したときのビープ音や騒ぎなど、相互作用を促進し、エクスペリエンスを強化するインタラクティブなサウンドです。当時、Flashから遠く離れたWebページでは、音の相互作用はほとんどありませんでした。互換性を達成するために、コントロールの助けを借りて、またはフラッシュと対話することによって(たとえば、私が以前に書いた精神遅延ゲームでターゲットにぶつかる弾丸の爆発音の実装)。
マルクスは、物事が発達し、女の子はいつか若い女性になると言っています。たとえば、Mozilla CEOのGary Kwicksは本日、Firefox 4がリリースされてからわずか3か月後の6月22日にFirefox 5が正式にリリースされることを明らかにしました。 HTML5の進歩と人気により、Flashで以前に達成された多くの効果は、Webページに簡単に実装できるようになりました。たとえば、オーディオファイルの再生。この記事では、HTML5オーディオエレメントに基づいて、要素ホバーがjQueryの下で簡単に達成されるときに音を再生する効果を楽しくします。したがって、この記事とこのプラグインに関する限り、IE6〜8は醤油を作り、暖かく保つためにグループを保持する生活です。
2。効果、リソース、使用
ブラインドの日付と同じように、それは他の人がどのように見えるかにとって非常に重要です。そのため、Lushanの本当の顔を垣間見たい場合は、ここをクリックできます。
デモの以下に似た垂直ナビゲーションを見ることができます。
マウスが素早く動くときのナビゲーションの最初の波は、私の心の中の母親の呼び出しのように、常に1つの音の再生だけがあります。マウスは迅速に動き、以下のナビゲーションは、私の心の多くのアイドルの呼び出しのように、爆竹のような複数の音で再生されます。
このjQueryプラグインは非常にシンプルで非常に小さく、約30元です。なぜ対空銃を使用して蚊と戦うのですか?だから、私はそれを詰めません。スクリプトに興味がある場合は、右クリック - [ターゲット|リンク]次のリンクとして保存できます:jquery-audioplay.js
使用
まず、次のようにjQueryライブラリとこの効果スクリプトファイルに電話してください。
<script = text/javascript src => </script> _fcksavedurl => </scrip> _fcksavedurl => </scrip> _fcksavedurl => </script>
<script type = text/javascript src => </script>
次に、マウスが音を演奏する必要がある要素をバインドします。メソッド名は次のとおりです。たとえば、Audioplay()、以下はデモページで使用されています。
$( "#nav li")。audioplay({
名前:「Playonce」、
urlmp3: "/study/media/beep.mp3"、
urlogg: "/study/media/beep.ogg"
});
明らかに、オーディオファイルソースなしでサウンドを再生することはできないため、オーディオアドレスはパラメーターに不可欠です。特定のパラメーターと関連する手順については、以下の表を参照してください。
デフォルトのパラメーター定義
グループ化に使用されるnameaudioplay文字列。ページに複数のグループの再生要素が同時にある場合に使用されます。
urlmp3文字列、このパラメーターはそうでなければなりません。 MP3形式のオーディオファイルアドレスを参照してください。
urlogg文字列、このパラメーターはそうでなければなりません。 OGG形式のオーディオファイルアドレスを参照してください。
クローンファルスブールタイプ。同じ要素グループが同じサウンドソースを再生するかどうか。
注:FirefoxおよびOpera BrowsersはOGG形式のオーディオをサポートし、WebKitコアブラウザーとIEはMP3形式のオーディオをサポートしています。
デモページの2つのグループのナビゲーションの効果効果は、上記のすべてのパラメーターをすべて適用します。これは次のように完全に使用されます。
$(function(){
$( "#nav li")。audioplay({
名前:「Playonce」、
urlmp3: "/study/media/beep.mp3"、
urlogg: "/study/media/beep.ogg"
});
$( "#nav2 li")。audioplay({
urlmp3: "/study/media/beep.mp3"、
urlogg: "/study/media/beep.ogg"、
クローン:本当です
});
});
3。最後にいくつかのしつこい
これで、HTML5オーディオ要素をサポートするブラウザは次のとおりです。Firefox3.5+、Chrome 3+、Opera 10.5+、Safari 4+、IE 9+。私たちの魔法の国では、IE6〜8はまだ世界のほとんどを占めています。この記事のことは現在も価値がないと思うかもしれません。
ただし、ユーティリティとリソースの職業を比較検討する段階的強化の原則に従って、この記事で実際のプロジェクトでこの小さなことを適用することも不可能ではありません。さらに、Windows 7の設置量が大幅に増加したため、IE6 ERAは不注意に突然終了した可能性があります。それまでに、あなたがそれを補うのに遅すぎることはないかもしれません。この気持ちは、60年代または70年代にいる私の現在の家主から来ています。彼は基本的にコンピューターについては何も知りませんが(在庫を見てください)、彼のコンピューターはゴージャスで美しく、Windows 7システムを使用することは非常に興味深いようです。
フロントエンドテクノロジーの潮流を利用して、基本的なスキルを実践するために一生懸命働く必要があります。そうでなければ、潮が来ると、急増する新しいテクノロジーによって簡単に飲み込まれます。個人的には、地震後の日本のようなものであり、巨大な津波が来ようとしていると感じています...
コードパッケージをテストしてダウンロードします