Ion.Sound ध्वनियों को चलाने के लिए एक प्लगइन है। निर्माण और सुविधाएँ

नमस्ते, हाल ही में मुझे अक्सर वेबसाइटों पर सभी प्रकार की घटनाओं को संभालना पड़ता है, चाहे वह चैट संदेश, सूचनाएँ, रिमाइंडर, इनकमिंग मेल आदि हों। ये ईवेंट अधिक से अधिक होते जा रहे हैं और वे सभी किसी न किसी तरह से उपयोगकर्ता का ध्यान अपनी ओर आकर्षित करना चाहते हैं। मैं विभिन्न प्रकार के एनीमेशन, तत्वों की छलांग, पलक, स्पिन, आदि में परिष्कृत हूं। आदि कुछ बिंदु पर, मैंने महसूस किया कि ये सभी चालें बेकार हैं यदि उपयोगकर्ता, उदाहरण के लिए, स्क्रीन से दूर हो गया है या यहां तक ​​कि ब्राउज़र में अगले टैब पर भी स्विच किया गया है। समाधान जल्दी आ गया - लगता है। लेकिन यह कैसे करें? एक छोटी सी गुगली, मुझे इस समस्या का कोई सरल और सुविधाजनक समाधान नहीं मिला। लेकिन उन्हें हर तरह के ऑडियो / वीडियो प्लेयर मिले। इसलिए मैंने घटनाओं से ध्वनियों को चलाने के लिए अपना स्वयं का प्लगइन लिखने का फैसला किया।

जैसा कि यह निकला, एचटीएमएल 5 में पहले से ही एक उपयुक्त एपीआई है, और यह एक ऑडियो तत्व है। उसका क्रॉस-ब्राउज़र समर्थन बहुत अच्छा निकला । जावास्क्रिप्ट में, यह तत्व ऑडियो कंस्ट्रक्टर के माध्यम से सुलभ है और इसमें कई सेटिंग्स हैं। सामान्य तौर पर, हम अपने आप को एक विवरण के साथ जोड़ते हैं और शुरू करते हैं।

मैं jQuery प्लगइन बनाने की पेचीदगियों का वर्णन नहीं करूंगा, इस विषय पर Habré पर बहुत सारे लेख हैं, मैं तुरंत आवश्यक भागों का वर्णन करूंगा:

आवाज लगा रहा है

इस तथ्य के बावजूद कि ऑडियो तत्व बहुत सारे ब्राउज़रों का समर्थन करता है, कोडेक समर्थन के साथ सब कुछ इतना रसीला नहीं है। एमपी 3 हर किसी के द्वारा समझ में नहीं आता है; इसलिए, प्रत्येक ध्वनि जिसे हम उपयोग करना चाहते हैं, उसे अतिरिक्त रूप से Ogg में बदलना होगा। यह बहुत ही सरल ऑनलाइन किया जा सकता है। उदाहरण के लिए यहाँ या यहाँ ।

हमारी स्क्रिप्ट से ध्वनियाँ कनेक्ट करें:

सबसे पहले, उन चरों की घोषणा करें जिनकी हमें आवश्यकता है:

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

बस इतना ही। बेशक, इस प्लगइन को और अधिक विस्तारित किया जा सकता है, उदाहरण के लिए, प्रत्येक ध्वनि के लिए एक व्यक्तिगत वॉल्यूम सेट करने की क्षमता प्रदान करें, आदि। लेकिन सामान्य तौर पर, वह अपने उद्देश्य को पूरा करता है - सभी प्रकार की घटनाओं को चित्रित करने के लिए छोटी आवाज़ों को पुन: पेश करना।

अंतभाषण

उपयोगकर्ता का ध्यान आकर्षित करने के लिए ध्वनि एक बहुत शक्तिशाली उपकरण है। लेकिन यह साधन भी बहुत खतरनाक है, क्योंकि लोग अतिरिक्त आवाज़ या आवाज़ को बहुत अधिक पसंद नहीं करते हैं। और मैं आपको सलाह देता हूं कि आप अपनी वेबसाइट पर ध्वनि प्रभावों को जोड़ने में बहुत सावधानी बरतें। हर क्लिक पर ध्वनियाँ संलग्न करने की आवश्यकता नहीं है, यह बहुत ही शानदार है। यह केवल बहुत महत्वपूर्ण और आवश्यक घटनाओं के लिए सलाह दी जाती है। और वॉल्यूम कम करने की कोशिश करें, क्या आप नहीं चाहते कि उपयोगकर्ता कुर्सी पर कूदें और खुद पर चाय छिड़कें? :-)

प्लगइन जानकारी

पूरी तरह से तैयार प्लगइन को यहां देखा जा सकता है:

• गिटहब परियोजना
• डेमो