Ion.Sound - plugin for playing sounds. Creation and features

Hi, lately, I often have to handle all sorts of events on websites, be it chat messages, alerts, reminders, incoming mail, etc. These events are becoming more and more and they all want to somehow attract the user's attention to themselves. I excel in different types of animation, elements jump, blink, spin, etc. etc. At some point, I realized that all these techniques are useless if the user, for example, turned away from the screen or even switched to the next tab in the browser. The decision came quickly - sounds. But how to do that? Googling a bit, I did not find any simple and convenient solutions to this problem. But I found heaps of various kinds of audio / video players. So I decided to write my own plugin for playing sounds from events.



As it turned out, html5 already has a suitable API, and this is an audio element. His cross-browser support was very good . In JavaScript, this element is available through the Audio constructor and has many settings. In general, we arm ourselves with the description and begin.



I will not describe the subtleties of creating a jQuery plugin, there are a lot of articles on this topic on Habré, I will immediately describe the necessary parts:

')

Making sounds

Despite the fact that the audio element supports a lot of browsers, with the support of codecs, everything is not so rosy. Mp3 do not understand everything, so every sound that we want to use will need to be converted to Ogg. This can be done very simply right online. For example, here or here .

Connecting sounds to our script:

First, we declare the variables we need:

var settings = {}, soundsNum, canMp3, url, i, sounds = {}, playing = false; 

Create a function that takes a sound file name as argument.

 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; //   }; 

* Read more about canPlayType

Playing sounds:

Create another function that takes the name of the sound file as argument.

 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(); } } } }; 

Initializing the plugin and starting playback:

 //  ,    $.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); }; }; 

That's all. Of course, this plugin can be expanded further, for example, to provide the opportunity to set an individual volume for each of the sounds, etc. But in general, he responds to his purpose - the reproduction of short sounds to illustrate all kinds of events.

Afterword

Sounds is a very powerful tool to attract the user's attention. But this instrument is also very dangerous, because people do not like extra sounds or too loud sounds. And I advise you to be very careful about connecting sound effects to your websites. No need to attach sounds to every click, this is unnecessary. It is desirable only to very important and necessary events. And try to make the volume smaller, you do not want the user to jump in the chair and splash the tea on himself? :-)

Plugin Information

You can see the complete plugin here:

• GitHub project
• Demo