こんにちは、最近、チャットメッセージ、通知、リマインダー、受信メールなど、Webサイト上のあらゆる種類のイベントを処理する必要があります。 これらのイベントはますます増えており、それらはすべて、何らかの形でユーザーの注意を自分自身に引き付けたいと考えています。 私はさまざまな種類のアニメーション、要素のジャンプ、点滅、スピンなどに精通しています。 など ある時点で、ユーザーが画面から離れたり、ブラウザの次のタブに切り替えたりした場合、これらのトリックはすべて役に立たないことに気付きました。 ソリューションはすぐに来ました-音。 しかし、それを行う方法は？ 少しグーグルで、この問題の簡単で便利な解決策は見つかりませんでした。 しかし、彼はあらゆる種類のオーディオ/ビデオプレーヤーの山を見つけました。 そこで、イベントからサウンドを再生するための独自のプラグインを作成することにしました。
判明したように、html5にはすでに適切なAPIがあり、これは音声要素です。 彼のクロスブラウザサポートは非常に優れていることが判明しました 。 JavaScriptでは、この要素にはAudioコンストラクターからアクセスでき、多くの設定があります。 一般的に、 説明を準備して開始します。
jQueryプラグインの作成の複雑さについては説明しません。このトピックに関するHabréの記事は多数あります。必要な部分についてはすぐに説明します。
音を立てる
オーディオ要素が多くのブラウザをサポートしているという事実にもかかわらず、コーデックのサポートではすべてがそれほどバラ色ではありません。 Mp3は誰もが理解できるわけではないため、使用するすべてのサウンドをOggに追加変換する必要があります。 これは非常に簡単にオンラインで行うことができます。 たとえば、 hereまたはhereです。
スクリプトにサウンドを接続します。
まず、必要な変数を宣言します。
var settings = {}, soundsNum, canMp3, url, i, sounds = {}, playing = false;
サウンドファイル名の引数を取る関数を作成する
var createSound = function(name){ // sounds Audio sounds[name] = new Audio(); // canMp3 - mp3, // canPlayType *. // , // mp3 canMp3 = sounds[name].canPlayType("audio/mp3"); // canPlayType , // , "probably", "maybe" "". // mp3 ogg if(canMp3 === "probably" || canMp3 === "maybe") { url = settings.path + name + ".mp3"; } else { url = settings.path + name + ".ogg"; } $(sounds[name]).prop("src", url); // sounds[name].load(); // sounds[name].volume = settings.volume; // };
* canPlayTypeメソッドの詳細
音を鳴らす：
引数としてサウンドファイルの名前をとる別の関数を作成します
var playSound = function(name){ var $sound = sounds[name], playingInt; // if(typeof $sound === "object" && $sound !== null) { // settings.multiPlay. // . false, // , // if(!settings.multiPlay && !playing) { // play $sound.play(); playing = true; // , playingInt = setInterval(function(){ // , , ended, // true, if($sound.ended) { clearInterval(playingInt); playing = false; } }, 250); } else if(settings.multiPlay) { // multiPlay if($sound.ended) { $sound.play(); } else { // , , 0 // currentTime, , , // iOS , try { $sound.currentTime = 0; } catch (e) {} $sound.play(); } } } };
プラグインの初期化と再生の開始：
// , $.pluginName = function(options){ // settings = $.extend({ // sounds: [ "sound_name_1", "sound_name_2" ], // path: "sounds/", // multiPlay: true, // 0.0 - 1.0 volume: "0.5" }, options); // soundsNum = settings.sounds.length; // Audio if(typeof Audio === "function" || typeof Audio === "object") { // for(i = 0; i < soundsNum; i += 1){ createSound(settings.sounds[i]); } } // $.pluginName.play = function(name) { playSound(name); }; };
それだけです。 もちろん、このプラグインはさらに拡張できます。たとえば、各サウンドに個別のボリュームを設定する機能などを提供できます。 しかし、一般的に、彼は目的を満たします-あらゆる種類のイベントを説明するために短い音を再現すること。
あとがき
サウンドは、ユーザーの注意を引くための非常に強力なツールです。 しかし、この楽器は非常に危険です。なぜなら、人々は余分な音や大きすぎる音が好きではないからです。 そして、効果音をあなたのウェブサイトに接続する際には非常に注意することをお勧めします。 クリックごとにサウンドを添付する必要はありません。これは不要です。 非常に重要で必要なイベントにのみお勧めします。 そして、音量を下げてみてください。ユーザーが椅子に飛び込んでお茶をこぼしたくないですか？ :-)
プラグイン情報
完全に完成したプラグインはここで見ることができます：