HTML5 ऑडियो और गेम डेवलपमेंट: ब्राउज़र बग, समस्याएं और समाधान, विचार

विषय में, मैं गेम विकसित करते समय विभिन्न ब्राउज़रों में <ऑडियो> टैग का उपयोग करने की बारीकियों के बारे में बात करूंगा, जो समस्याएं मेरे सामने थीं और उन्हें कैसे हल किया जाए। स्पष्टीकरण सुविधाजनक काम के लिए एक आवरण लिखने के साथ समानांतर में जाएगा।





ऑडियो तत्व में एक बहुत ही सुंदर इंटरफ़ेस है, लेकिन हमें इसे विस्तारित करने की आवश्यकता है, इसलिए हम एक आवरण लिखेंगे:

var LibCanvasAudio = function ( file ) {

this . audio = new Audio ;

this . audio . src = file ;

};



LibCanvasAudio . prototype = {};

.ogg बनाम .mp3

शुरुआत के लिए - समर्थित कोडेक्स के साथ dregs। अधिकांश ब्राउज़र ओग वोरबिस का समर्थन करते हैं ( लिनक्स में ओपेरा के लिए, gstreamer आधार और अच्छे प्लगइन्स को स्थापित करने के लिए मत भूलना), लेकिन, उदाहरण के लिए, Apple ने बाहर निकलने का फैसला किया। आइए हम उन सभी ब्राउज़रों के लिए .ogg, जो अन्य .mp3 में देंगे, के लिए ब्राउज़ करें। फ़ाइल नाम के सभी सितारों को क्रमशः ओग या एमपी 3 के साथ बदल दिया जाएगा:

var LibCanvasAudio = function ( file ) {

this . audio = new Audio ;

this . src ( file );

};



LibCanvasAudio . prototype = {

src : function ( file ) {

var codec = this . getSupport ();

if (! codec ) throw 'AudioNotSupported' ;

this . audio . src = file . replace (/\*/ g , this . getSupport ());

this . audio . load ();

return this ;

},

getSupport : function () {

return ! this . audio . canPlayType ? false :

this . audio . canPlayType ( 'audio/ogg;' ) ? 'ogg' :

this . audio . canPlayType ( 'audio/mpeg;' ) ? 'mp3' : false ;

}

}



गैटलिंग योजना

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

LibCanvasAudio . prototype = {

// ...

cloneAudio : function () {

audioClone = this . audio . cloneNode ( true );

audioClone . load ();

return audioClone ;

},

gatling : function ( count ) {

this . barrels = [];

this . gatIndex = 0 ;

while ( count --) {

this . barrels . push ( this . cloneAudio ());

}

return this ;

},

getNext : function () {

var elem = this . barrels [ this . gatIndex ];

++ this . gatIndex >= this . barrels . length && ( this . gatIndex = 0 );

return elem ;

},

playNext : function () {

var elem = this . getNext ();

elem . pause ();

elem . currentTime = 0 ;

elem . play ();

return this ;

}

};



हमें मिलने वाला इंटरफ़ेस कुछ इस तरह है:

var shotSound = new LibCanvasAudio ( 'explosion.*' ). gatling ( 6 );



window . addEventListener ( 'keydown' , function ( e ) {

( e . keyCode == keys . SPACE ) && shotSound . playNext ();

}, false );

ओपेरा में बुमेर

ओपेरा में, हम एक बुमेर की प्रतीक्षा कर रहे हैं। इस प्रश्न का विस्तार से अध्ययन करने पर, मुझे एक बग मिला, जिसे मैंने DSK-309302 कोड के साथ रिपोर्ट किया था। ओपेरा में क्लोन किया गया ऑडियो तत्व काम नहीं करता है:

// var audioOrig = document.createElement('audio'); // :

var audioOrig = new Audio ();

audioOrig . src = 'shot.ogg' ;

audioOrig . controls = 'controls' ;



var audioClone = audioOrig . cloneNode ( true );



function appendToBody ( node ) {

document . getElementsByTagName ( 'body' )[ 0 ]. appendChild ( node );

}



audioOrig . play (); //

audioClone . play (); //



appendToBody ( audioOrig ); //

appendToBody ( audioClone ); //

चलो ओपेरा के लिए एक छोटा सा सुधार लिखें:

LibCanvasAudio . prototype = {

// ..

cloneAudio : function () {

if ( window . opera ) { // Reported Opera bug DSK-309302

var audioClone = new Audio ;

audioClone . src = this . audio . src ;

} else {

audioClone = this . audio . cloneNode ( true );

}

audioClone . load ();

return audioClone ;

},

// ..

};

फॉक्स में बग

हम फ़ायरफ़ॉक्स 3.5 (3.6 और 4 पहले से ही चले गए हैं) में एक और बग का निरीक्षण कर सकते हैं - जब ऑडियो ट्रैक दोहराया जाता है, तो पहले दूसरे in को दोहराया जाता है। जाहिर है, न केवल मेरे साथ: " दूसरी बार जब आप बटन दबाते हैं तो यह फ़ायरफ़ॉक्स में" बैडमम "को दो बार बजाता है ।" ( वीडियो रिकॉर्डिंग बग )। एक छोटा फिक्स जोड़ें - हम ऑडियो को शुरुआत में नहीं बल्कि 25 मिलीसेकंड पर रिवाइंड करेंगे (न्यूनतम मान प्रयोगात्मक रूप से सेट किया गया है और लगभग 0.021-0.022 सेकंड है)। यदि आप चाहें, तो आप एक वर्जन चेक जोड़ सकते हैं और सभी को लौटा सकते हैं लेकिन शुरुआत में 3.5 लोमड़ियों (लेकिन 25 मिलीसेकंड और शून्य के बीच का अंतर महसूस नहीं किया जाता है, चरम मामलों में, इस बारीकियों के बारे में जानकर, आप अपने पसंदीदा संपादक 25 मिसे में सभी ऑडियो को बाईं ओर स्थानांतरित कर सकते हैं):

LibCanvasAudio . prototype = {

// ..

playNext : function () {

var elem = this . getNext ();

elem . pause ();

elem . currentTime = 0.025 ;

elem . play ();

return this ;

}

};

बोनस

Ie9 पूर्वावलोकन 4 में, new Audio()



काम नहीं करता है, लेकिन इसे document.createElement('audio');



साथ बदलकर हल करना बहुत आसान है document.createElement('audio');

अंत में क्या हुआ (अंतरिक्ष में प्रहार)

स्रोत कोड जिसके परिणामस्वरूप: pastebin.com/xG4mhX3w