परिचय
वेब गेम्स अक्सर दर्जनों छोटी ध्वनियाँ बजाते हैं। प्रत्येक को अलग फ़ाइल के रूप में लोड करने का मतलब है दर्जनों अनुरोध, और मोबाइल पर कुछ ब्राउज़र एक समय में केवल एक ध्वनि लोड होने देते हैं। ऑडियो स्प्राइट दोनों समस्याओं का समाधान करता है: एक ही फ़ाइल में सभी ध्वनियाँ होती हैं, और मैनिफ़ेस्ट बताता है कि प्रत्येक ध्वनि कहाँ स्थित है।
स्प्राइट आमतौर पर कमांड-लाइन टूल से बनाए जाते हैं जिनके लिए FFmpeg की आवश्यकता होती है। ToolBuddy का ऑडियो स्प्राइट क्रिएटर इन्हें आपके ब्राउज़र में बनाता है। यह गाइड अलग-अलग क्लिप से लेकर एक कार्यशील Howler.js स्प्राइट तक की जानकारी देता है।
स्प्राइट पैकेज में क्या-क्या शामिल होता है
पैकेज एक ऑडियो फ़ाइल है जिसमें क्लिप एक पंक्ति में, छोटे अंतरालों से अलग किए गए हैं, और एक जैसन मैनिफ़ेस्ट है। हॉलर मैनिफ़ेस्ट में प्रत्येक क्लिप का एक ऑफ़सेट, मिलीसेकंड में अवधि और एक लूप फ़्लैग होता है; क्लिप का नाम उसके फ़ाइल नाम से लिया गया है।
क्लिप लोड करें और ऑर्डर करें
अपनी क्लिप चुनें: MP3, WAV, M4A, AAC, OGG/Opus, FLAC या WebM ऑडियो। ये क्लिप कार्ड में उसी क्रम में दिखाई देते हैं जिस क्रम में आपने इन्हें जोड़ा है।
क्लिप्स को नाम या आकार के अनुसार क्रमबद्ध करें, या उन्हें ऊपर-नीचे ले जाएं। कंट्रोल पैनल के हेडर में रीसेट बटन दबाने से क्लिप्स का क्रम बहाल हो जाता है। क्रम केवल फ़ाइल में क्लिप्स की स्थिति को प्रभावित करता है; आपका कोड उन्हें नाम के अनुसार चलाता है।
प्रत्येक क्लिप को ट्रिम और आकार दें
क्लिप का पूर्वावलोकन करने के लिए उसे चुनें; उसका ट्रिम वेवफ़ॉर्म पर हैंडल के रूप में दिखाई देता है। कंट्रोल पैनल में, सटीक प्रारंभ और समाप्ति समय, गेन, फ़ेड इन और फ़ेड आउट, संगीत के लिए लूप फ़्लैग और किनारों पर साइलेंस ट्रिमिंग सेट करें।
| क्लिप सेटिंग | रेंज | क्यों |
|---|---|---|
| प्रारंभ / अंत | क्लिप के भीतर | निष्क्रिय ध्वनि या क्लिक को हटाएँ |
| गेन | -24 से +24 dB | तेज़ और धीमी आवाज़ों को संतुलित करें |
| फ़ेड इन / आउट | 0 से 5 सेकंड | किनारों पर क्लिक से बचें |
| लूप | चालू / बंद | संगीत पृष्ठभूमि और परिवेश |
| मौन को ट्रिम करें | चालू / बंद | शांत लीड-इन और टेल को हटाएँ |
स्प्राइट विकल्प सेट करें
हॉलर मैनिफ़ेस्ट चुनें Howler.js. सैंपल रेट सेट करें (44.1 kHz अधिकांश गेम के लिए उपयुक्त है; छोटी फ़ाइलों के लिए 22.05 kHz), मोनो या स्टीरियो, क्लिप के बीच का अंतर (डिफ़ॉल्ट रूप से 0.05 सेकंड, ताकि आवाज़ें कभी एक-दूसरे में न मिलें), एक वैकल्पिक क्रॉसफ़ेड, और आउटपुट फ़ॉर्मेट: आकार के लिए MP3 या OGG, संपादन के लिए WAV।
बिल्ड करें, प्रीव्यू करें, डाउनलोड करें
बिल्ड स्प्राइट चुनें। पूर्वावलोकन पूरे स्प्राइट को दिखाता है, जिसमें प्रत्येक क्लिप एक क्रमांकित बैंड के रूप में दिखाई देती है; उस क्लिप को चुनने के लिए किसी बैंड पर क्लिक करें, या केवल एक ध्वनि सुनने के लिए क्लिप पर स्विच करें।
ऑडियो सहित ZIP और जैसन दोनों को एक साथ डाउनलोड करें, या यदि आपने केवल मैनिफेस्ट में बदलाव किया है तो केवल जैसन को डाउनलोड करें।
इसे Howler.js में उपयोग करें
नए हाउल ({ src: ['audio-sprite.mp3'], sprite: manifest.sprite }) के साथ स्प्राइट लोड करें और sound.play ('coin') के साथ एक ध्वनि चलाएं। यदि पुराने ब्राउज़रों के लिए आवश्यक हो तो MP3 के साथ एक OGG फ़ाइल भी प्रदान करें; दोनों प्रारूपों के साथ स्प्राइट को दो बार बिल्ड करें।
- क्लिप के नाम अद्वितीय रखें: वे स्प्राइट मैप में कुंजी बन जाते हैं।
- डिफ़ॉल्ट गैप को यथावत रहने दें; इसमें लगभग कोई लागत नहीं आती और ओवरलैप से बचा जा सकता है।
- लूप फ्लैग का उपयोग बैकग्राउंड लूप के लिए करें, वन-शॉट इफेक्ट्स के लिए नहीं।
ऐसे ऑफसेट जिन पर आप भरोसा कर सकते हैं
MP3 एनकोडर फ़ाइल की शुरुआत में एक छोटा विलंब जोड़ते हैं, जिससे प्रत्येक स्प्राइट ऑफ़सेट में बदलाव होता था। ToolBuddy गैपलेस हेडर लिखता है जो डिकोडर को इसे छोड़ने के लिए कहता है, और इसके परीक्षण स्प्राइट को डिकोड करते हैं और जाँचते हैं कि प्रत्येक क्लिप मैनिफ़ेस्ट में बताए गए स्थान से शुरू होती है।
द्वारा लिखित
Ankit Kumar
वरिष्ठ सॉफ्टवेयर इंजीनियर और टूलबडी के संस्थापक
WebAssembly, वेब ऑडियो और कैनवास प्रौद्योगिकियों का उपयोग करके शून्य अपलोड आवश्यकताओं के साथ इंजीनियरिंग ब्राउज़र-पहली उपयोगिताएँ।