जावास्क्रिप्ट / HTML5 में ध्वनि प्रभाव


316

गेम खेलने के लिए मैं एचटीएमएल 5 का उपयोग कर रहा हूं; मैंने अभी जो बाधा डाली है, वह है कि ध्वनि प्रभाव कैसे खेलें।

विशिष्ट आवश्यकताएं संख्या में कम हैं:

  • खेलते हैं और कई ध्वनियों को मिलाते हैं,
  • एक ही नमूना कई बार खेलें, संभवतः अतिव्यापी प्लेबैक,
  • किसी भी बिंदु पर एक नमूना के बाधित प्लेबैक,
  • अधिमानतः WAV फ़ाइलें (कम गुणवत्ता वाली) कच्ची PCM चलाएं, लेकिन मैं इन्हें रूपांतरित कर सकता हूं, अवश्य।

मेरा पहला दृष्टिकोण HTML5 <audio>तत्व का उपयोग करना और मेरे पृष्ठ में सभी ध्वनि प्रभावों को परिभाषित करना था। फ़ायरफ़ॉक्स WAV फ़ाइलों को सिर्फ पीच निभाता है, लेकिन #playकई बार कॉल करना वास्तव में कई बार नमूना नहीं खेलता है। एचटीएमएल 5 कल्पना की मेरी समझ से, <audio>तत्व प्लेबैक स्थिति को भी ट्रैक करता है, इसलिए यह बताता है कि क्यों।

मेरा तात्कालिक विचार ऑडियो तत्वों को क्लोन करना था, इसलिए मैंने अपने लिए ऐसा करने के लिए निम्नलिखित छोटी जावास्क्रिप्ट लाइब्रेरी बनाई (जो jQuery पर निर्भर करता है):

var Snd = {
  init: function() {
    $("audio").each(function() {
      var src = this.getAttribute('src');
      if (src.substring(0, 4) !== "snd/") { return; }
      // Cut out the basename (strip directory and extension)
      var name = src.substring(4, src.length - 4);
      // Create the helper function, which clones the audio object and plays it
      var Constructor = function() {};
      Constructor.prototype = this;
      Snd[name] = function() {
        var clone = new Constructor();
        clone.play();
        // Return the cloned element, so the caller can interrupt the sound effect
        return clone;
      };
    });
  }
};

इसलिए अब मैं Snd.boom();फायरबग कंसोल और प्ले से snd/boom.wavकर सकता हूं, लेकिन मैं अभी भी एक ही नमूना कई बार नहीं खेल सकता हूं। ऐसा लगता है कि <audio>तत्व वास्तव में किसी के साथ साउंड इफ़ेक्ट खेलने के बजाय स्ट्रीमिंग फीचर के अधिक है।

क्या ऐसा करने का एक चतुर तरीका है जो मुझे याद आ रहा है, अधिमानतः केवल HTML5 और जावास्क्रिप्ट का उपयोग कर रहा है?

मुझे यह भी उल्लेख करना चाहिए कि, मेरे परीक्षण वातावरण Ubuntu 9.10 पर फ़ायरफ़ॉक्स 3.5 है। अन्य ब्राउज़र जो मैंने कोशिश की है - ओपेरा, मिडोरी, क्रोमियम, एपिफेनी - अलग-अलग परिणाम उत्पन्न किए। कुछ कुछ नहीं खेलते हैं, और कुछ अपवादों को फेंक देते हैं।


हा! मैं एक पुराने Macintosh गेम को HTML5 में पोर्ट कर रहा हूं। यह पता लगाने के लिए कि आप कौन सी क्लोनिंग कर रहे हैं?
एक भुगतान किया गया बेवकूफ

1
यह प्रोजेक्ट ARASHI, एक टेम्पल क्लोन है।
स्टीफन कोचन

"मिश्रण" ध्वनियों का क्या अर्थ है?
मैड्स स्केजर्न

2
क्या आपने इसे खत्म कर दिया? क्या हम इसे देख सकते हैं?
एनवाई 25'12

4
दुख की बात है नहीं। मेरे पास खाली समय की परियोजनाओं को पूरा नहीं करने के लिए एक आदत है। :( इसके लिए एक git रेपो है, लेकिन मैंने इसे वर्षों में नहीं छुआ है: github.com/stephank/arashi-js
Stéphan Kochen

जवाबों:


448

HTML5 Audioऑब्जेक्ट

आपको <audio>तत्वों से परेशान होने की आवश्यकता नहीं है । HTML 5 आपको Audioऑब्जेक्ट को सीधे एक्सेस करने देता है :

var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();

कल्पना के वर्तमान संस्करण में मिश्रण के लिए कोई समर्थन नहीं है।

एक ही ध्वनि को कई बार चलाने के लिए, Audioऑब्जेक्ट के कई उदाहरण बनाएं । आप snd.currentTime=0इसे खत्म करने के बाद भी ऑब्जेक्ट पर सेट कर सकते हैं ।


चूँकि JS कंस्ट्रक्टर फ़ॉलबैक <source>तत्वों का समर्थन नहीं करता है , इसलिए आपको इसका उपयोग करना चाहिए

(new Audio()).canPlayType("audio/ogg; codecs=vorbis")

यह परीक्षण करने के लिए कि ब्राउज़र Ogg Vorbis का समर्थन करता है या नहीं।


यदि आप एक गेम या म्यूजिक ऐप (केवल एक खिलाड़ी से अधिक) लिख रहे हैं, तो आप अधिक उन्नत वेब ऑडियो एपीआई का उपयोग करना चाहेंगे , जो अब अधिकांश ब्राउज़रों द्वारा समर्थित है


18
Audioवस्तुओं को स्वत: स्फूर्त किया जाता है। वे Imageवस्तुओं के अनुरूप डिज़ाइन किए गए हैं, इसलिए oldschool image preloading तकनीकें ऑडियो के साथ भी काम करती हैं।
कोर्नेल

5
यह भी iOS पर काम करता है। नोट हालांकि यह है कि आप की जरूरत है उपयोगकर्ता कार्रवाई के कुछ प्रकार का उपयोग करने के (जैसे, एक बटन पर क्लिक) ध्वनि आरंभ करने के लिए। आप बस snd.play()window.load () पर नहीं कर सकते ।
कर्कश

1
मैं अभी भी <audio>टैग का उपयोग कर रहा हूं क्योंकि यह अधिक नियंत्रणीय है। लेकिन वैसे भी जानकारी के लिए धन्यवाद!
डेरेक 會 朕 ere

2
मैं इस विधि को पसंद करूंगा यदि यह इस तथ्य के लिए नहीं था कि <ऑडियो> html5 तत्व कई स्रोतों के लिए अनुमति देते हैं, इसलिए यदि कोई ब्राउज़र एमपी 3 का समर्थन नहीं करता है, तो आप ogg / wav पर वापस आ सकते हैं। इसे पूरा करने के लिए जावास्क्रिप्ट में कुछ प्रवंचना की आवश्यकता होगी।
joelmdev

2
IOS 6 पर ऑटोप्ले समर्थित है: आप window.load () पर एक साधारण snd.play () के साथ ध्वनियाँ आरंभ कर सकते हैं।
पिएत्रो पोलसिनेली

36

W3C द्वारा WebAudio एपीआई

जुलाई 2012 तक, WebAudio API अब क्रोम में समर्थित है, और फ़ायरफ़ॉक्स में कम से कम आंशिक रूप से समर्थित है, और इसे IOS में संस्करण 6 के रूप में जोड़ा जाना है।

यद्यपि यह बुनियादी कार्यों के लिए प्रोग्रामेटिक रूप से उपयोग किए जाने के लिए पर्याप्त मजबूत है, ऑडियो तत्व कभी भी गेम के लिए पूर्ण ऑडियो समर्थन प्रदान करने के लिए नहीं था, आदि, इसे एक पेज के रूप में मीडिया के किसी एक टुकड़े को एम्बेड करने की अनुमति देने के लिए डिज़ाइन किया गया था, एक आईएमजी के समान टैग। खेलों के लिए ऑडियो टैग का उपयोग करने की कोशिश के साथ बहुत सारे मुद्दे हैं:

  • ऑडियो तत्वों के साथ टाइमिंग स्लिप आम हैं
  • आपको ध्वनि के प्रत्येक उदाहरण के लिए एक ऑडियो तत्व की आवश्यकता है
  • लोड की घटनाएं पूरी तरह से विश्वसनीय नहीं हैं, फिर भी
  • कोई सामान्य वॉल्यूम नियंत्रण, कोई फ़ेडिंग, कोई फ़िल्टर / प्रभाव नहीं

मैंने WebAudio एपीआई के साथ शुरुआत करने के लिए WebAudio लेख के साथ यह आरंभ करना शुरू किया। Fieldrunners WebAudio केस स्टडी भी एक अच्छा पढ़ा है।


यह स्वीकार किए गए से बेहतर उत्तर है, क्योंकि यह समस्या (WebAudio API) के सही समाधान पर केंद्रित है, और कारण ऑडियो तत्वों का एक अच्छा समाधान नहीं है, बल्कि ऑडियो तत्वों के साथ एक बुरा समाधान हैक करने की कोशिश कर रहे हैं
अनोमली

29

howler.js

गेम संलेखन के लिए, सबसे अच्छा समाधानों में से एक पुस्तकालय का उपयोग करना है जो कि वेब के लिए कोड लिखते समय कई समस्याओं का हल करता है, जैसे कि हिटलरजेएस । howler.js फ्रेमवर्क का उपयोग करने के लिए एक आसान में महान (लेकिन निम्न-स्तर) वेब ऑडियो एपीआई को सार करता है । यह HTML5 ऑडियो तत्व पर वापस गिरने का प्रयास करेगायदि वेब ऑडियो API अनुपलब्ध है, तो ।

var sound = new Howl({
  urls: ['sound.mp3', 'sound.ogg']
}).play();
// it also provides calls for spatial/3d audio effects (most browsers)
sound.pos3d(0.1,0.3,0.5);

wad.js

एक अन्य महान पुस्तकालय wad.js है , जो विशेष रूप से संगीत और प्रभाव जैसे संश्लेषण ऑडियो के उत्पादन के लिए उपयोगी है। उदाहरण के लिए:

var saw = new Wad({source : 'sawtooth'})
saw.play({
    volume  : 0.8,
    wait    : 0,     // Time in seconds between calling play() and actually triggering the note.
    loop    : false, // This overrides the value for loop on the constructor, if it was set. 
    pitch   : 'A4',  // A4 is 440 hertz.
    label   : 'A',   // A label that identifies this note.
    env     : {hold : 9001},
    panning : [1, -1, 10],
    filter  : {frequency : 900},
    delay   : {delayTime : .8}
})

खेलों के लिए ध्वनि

Wad.js के समान एक अन्य पुस्तकालय " साउंड फॉर गेम्स " है, इसमें अपेक्षाकृत अधिक विशिष्ट (और शायद अधिक संक्षिप्त भावना) एपीआई के माध्यम से कार्यक्षमता का एक समान सेट प्रदान करते हुए प्रभाव उत्पादन पर अधिक ध्यान दिया गया है:

function shootSound() {
  soundEffect(
    1046.5,           //frequency
    0,                //attack
    0.3,              //decay
    "sawtooth",       //waveform
    1,                //Volume
    -0.8,             //pan
    0,                //wait before playing
    1200,             //pitch bend amount
    false,            //reverse bend
    0,                //random pitch range
    25,               //dissonance
    [0.2, 0.2, 2000], //echo array: [delay, feedback, filter]
    undefined         //reverb array: [duration, decay, reverse?]
  );
}

सारांश

इन पुस्तकालयों में से प्रत्येक एक नज़र के लायक है, चाहे आपको एक एकल ध्वनि फ़ाइल वापस खेलने की आवश्यकता हो, या शायद अपना स्वयं का html-आधारित संगीत संपादक, प्रभाव जनरेटर, या वीडियो गेम बनाएं।


गेम-डेवलपमेंट पर टिप्पणी नहीं कर सकते हैं, लेकिन मैं कुछ छोटे ऑडियो फीडबैक के लिए एक इंटरफेस में इसका उपयोग कर रहा हूं और इसके लिए यह एक संपूर्ण उपचार का काम करता है। त्वरित, आसान और सरल।
Iculous

वास्तव में अच्छा ढांचा, मोबाइल में भी अच्छा काम करता है। आपको इसे टचस्टार्ट के साथ ट्रिगर करना होगा ... लेकिन एक बार ऐसा करने के बाद यह बॉक्स से बाहर हो जाता है :)
फिलिप

9

आप कुछ मामलों में HTML 5 ऑडियो का पता लगाने के लिए इसका उपयोग करना चाह सकते हैं:

http://diveintohtml5.ep.io/everything.html

HTML 5 JS डिटेक्ट फंक्शन

function supportsAudio()
{
    var a = document.createElement('audio'); 
    return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
}

यह ध्यान देने के लिए धन्यवाद। मैंने इस विधि को has.js से सीखा है, लेकिन मुझे लगता है कि फ़ायरफ़ॉक्स में इसके कुछ मुद्दे हैं, और जाहिर है कि ओपेरा के हैश कोड के अनुसार भी। (refs: github.com/phiggins42/has.js/issues/48 github.com/phiggins42/has.js/blob/master/detect/audio.js#L19 )
स्टीफन कोचन

5

यहाँ एक ही ध्वनि को एक साथ बजाना संभव बनाने के लिए एक तरीका है। प्रीलोडर के साथ मिलाएं, और आप सभी सेट हैं। यह फ़ायरफ़ॉक्स 17.0.1 के साथ कम से कम काम करता है, अभी तक किसी और चीज़ के साथ इसका परीक्षण नहीं किया है।

// collection of sounds that are playing
var playing={};
// collection of sounds
var sounds={step:"knock.ogg",throw:"swing.ogg"};

// function that is used to play sounds
function player(x)
{
    var a,b;
    b=new Date();
    a=x+b.getTime();
    playing[a]=new Audio(sounds[x]);
    // with this we prevent playing-object from becoming a memory-monster:
    playing[a].onended=function(){delete playing[a]};
    playing[a].play();
}

इसे एक कीबोर्ड कुंजी से बांधें, और आनंद लें:

player("step");

नहीं, मुझे नहीं लगता है कि प्रत्येक व्यक्ति के लिए एक नई वस्तु बनाना साउंड प्लेबैक एक समाधान है। यह एक त्वरित और गंदा काम है, लेकिन यह बेहतर किया जा सकता है।
पावेल

@ पॉवेल ट्रू, कि इसे ध्वनियों को बजाने की मुख्य विधि के रूप में इस्तेमाल नहीं किया जाना चाहिए, लेकिन जहां तक ​​मुझे पता है, उदाहरण में सिद्धांत एक ही ध्वनि को एक साथ एक से अधिक बार बजाने का एकमात्र तरीका है, या जैसा कि ओपी ने व्यक्त किया है, "ओवरलैपिंग प्लेबैक"। (ब्राउज़र-प्लगइन्स की आवश्यकता के बिना।) मेरे वर्तमान प्रोजेक्ट में मेरा वास्तविक कार्यान्वयन उदाहरण के लिए मेरे द्वारा पोस्ट किए गए कोड की तुलना में अधिक परिष्कृत है।
F-3000

4

लगता है कि आप क्या चाहते हैं मल्टी चैनल लगता है। मान लें कि आपके पास 4 चैनल हैं (जैसे कि पुराने 16-बिट गेम पर), मुझे अभी तक एचटीएमएल 5 ऑडियो फीचर के साथ खेलने के लिए राउंड नहीं मिला है, लेकिन आपको सिर्फ 4 <ऑडियो> एलिमेंट्स और साइकल की जरूरत नहीं है, जिसका उपयोग किया जाता है अगले ध्वनि प्रभाव को खेलने के लिए? क्या आपने कोशिश की है? क्या होता है? यदि यह काम करता है: एक साथ अधिक ध्वनियों को चलाने के लिए, बस अधिक <ऑडियो> तत्व जोड़ें।

मैंने HTML5 <Audio> एलिमेंट के बिना http://flash-mp3-player.net/ से थोड़ी फ़्लैश ऑब्जेक्ट का उपयोग किए बिना ऐसा किया है - मैंने एक संगीत क्विज़ ( http://webdeavour.appspot.com/ ) लिखा है और इसका उपयोग संगीत की क्लिप चलाने के लिए किया जाता है, जब उपयोगकर्ता प्रश्न के लिए बटन पर क्लिक करता है। प्रारंभ में मेरे पास प्रति प्रश्न एक खिलाड़ी था, और उन्हें एक दूसरे के शीर्ष पर खेलना संभव था, इसलिए मैंने इसे बदल दिया, इसलिए केवल एक ही खिलाड़ी था, जिसे मैंने अलग-अलग संगीत क्लिपों पर इंगित किया था।


यह एक दिलचस्प विचार है, & lt; ऑडियो & gt; चैनल के रूप में तत्व। जब मैं किसी पृष्ठ पर दो तत्व डालता हूं, तो मैं उन्हें एक साथ चला सकता हूं । ऐसा लगता है कि मैं जो क्लोनिंग कर रहा हूं वह वास्तव में वह नहीं करता है जिसकी मुझे उम्मीद है, क्योंकि मेरे मूल कोड में, दो नमूने खेलना भी काम करता है। बस एक ही नमूना दो बार नहीं। मुझे इसके साथ कुछ और प्रयोग करने होंगे, और परिणामों पर वापस आऊंगा!
स्टीफन कोचन

हाँ, संभवतः एक सूक्ष्म कारण है कि इसे क्लोन क्यों कहा जाता है और प्रतिलिपि नहीं। शायद क्लोन अभी भी मूल के साथ कुछ साझा कर रहा है जो उन्हें एक साथ खेलने से रोकता है।
ली कोवलकोव्स्की

संदर्भ के लिए, समान <ऑडियो> तत्व का फिर से उपयोग करना, कम से कम फ़ायरफ़ॉक्स में काम नहीं करता है। आप 'src' विशेषता सेट कर सकते हैं, लेकिन यह वास्तव में एक अलग नमूना लोड नहीं करेगा।
स्टीफन कोचन डे

4

जय (-> दर्पण ) (जावास्क्रिप्ट ऑडियो इंटरफ़ेस) साइट पर एक नज़र है । अपने स्रोत को देखने से, वे play()बार-बार फोन करते हुए दिखाई देते हैं , और वे उल्लेख करते हैं कि उनकी लाइब्रेरी HTML5- आधारित गेम में उपयोग के लिए उपयुक्त हो सकती है।

आप एक साथ कई ऑडियो ईवेंट्स को आग लगा सकते हैं, जिसका उपयोग जावास्क्रिप्ट गेम बनाने के लिए किया जा सकता है, या कुछ बैकग्राउंड म्यूजिक पर बोलने वाली आवाज हो सकती है


3

एक ही नमूने को कई बार खेलने के लिए, क्या ऐसा करना संभव नहीं होगा:

e.pause(); // Perhaps optional
e.currentTime = 0;
e.play();

( eऑडियो तत्व है)

शायद मैं आपकी समस्या को पूरी तरह से गलत समझ रहा हूं, क्या आप चाहते हैं कि एक ही समय में कई बार साउंड इफेक्ट हो? फिर यह पूरी तरह से गलत है।


यह सही है, मुझे एक ही समय में एक ही नमूने को कई बार खेलना होगा।
स्टीफन कोचन

हाँ, यह एक ही उदाहरण कई बार निभाता है, लेकिन इस उत्तर को देखने वाले लोगों के लिए, बस ध्यान दें कि यह "अतिव्यापी प्लेबैक" का कारण नहीं है, जैसा कि ओपी ने कहा है।
पैट्रिक रॉबर्ट्स

3

यहाँ एक विचार है। एक एकल व्यक्तिगत ऑडियो तत्व में ध्वनियों के एक निश्चित वर्ग के लिए अपने सभी ऑडियो को लोड करें जहां src डेटा एक सन्निहित ऑडियो फ़ाइल में आपके सभी नमूनों का है (शायद कुछ चुप्पी चाहते हैं ताकि आप कम समय के साथ टाइमआउट के साथ नमूनों को पकड़ और काट सकें। अगले नमूने के लिए रक्तस्राव का खतरा)। फिर, नमूने की तलाश करें और जब जरूरत हो तब इसे खेलें।

यदि आपको इनमें से एक से अधिक की आवश्यकता है तो आप एक ही src के साथ एक अतिरिक्त ऑडियो तत्व बना सकते हैं ताकि यह कैश हो जाए। अब, आपके पास प्रभावी रूप से कई "ट्रैक" हैं। आप अपनी पसंदीदा संसाधन आवंटन योजना जैसे राउंड रॉबिन आदि के साथ पटरियों के समूहों का उपयोग कर सकते हैं।

आप अन्य विकल्पों को भी निर्दिष्ट कर सकते हैं जैसे कि जब यह संसाधन उपलब्ध हो या वर्तमान में खेलने के नमूने को काट रहा हो तो खेलने के लिए एक ट्रैक में साउंडिंग लगता है।


2

http://robert.ocallahan.org/2011/11/latency-of-html5-sounds.html

http://people.mozilla.org/~roc/audio-latency-repeating.html

मेरे लिए फ़ायरफ़ॉक्स और क्रोम में ओके काम करता है।

आपके द्वारा प्रारंभ की गई ध्वनि को रोकने के लिए, var ध्वनि = document.getElementById ("शॉट") करें। क्लोनऑनकोड (सत्य); sound.play (); और बाद में sound.pause ();


2

मैं SoundJS का उपयोग करने की सलाह दूंगा , एक पुस्तकालय जो मैंने विकसित करने में मदद की है। यह आपको एक सिंगल कोड बेस लिखने की अनुमति देता है, जो हर जगह काम करता है, साउंडजेएस वेब ऑडियो, एचटीएमएल ऑडियो, या फ्लैश ऑडियो को उपयुक्त के रूप में चुनता है।

यह आपको वह सब करने की अनुमति देगा जो आप चाहते हैं:

  • खेलते हैं और कई ध्वनियों को मिलाते हैं,
  • एक ही नमूना कई बार खेलें, संभवतः अतिव्यापी प्लेबैक
  • किसी भी बिंदु पर एक नमूना का बाधित प्लेबैक
  • WAV फ़ाइलों को चलाएं (ब्राउज़र समर्थन के आधार पर)

उम्मीद है की वो मदद करदे।


वह पुस्तकालय बल्कि भयानक है, मैं वास्तव में sfx जनरेटर खोदता हूं। किसी भी रुचि के लिए
RozzA

1

एक ही <audio>तत्व के साथ मल्टी-शॉट खेलना संभव नहीं है । इसके लिए आपको कई तत्वों का उपयोग करना होगा।


1

म्यूजिकबॉक्स कार्ड जनरेटर की प्रोग्रामिंग करते समय मैं इसमें भाग गया। विभिन्न पुस्तकालयों के साथ शुरू किया गया था, लेकिन हर बार किसी न किसी तरह एक गड़बड़ थी। सामान्य ऑडियो कार्यान्वयन पर अंतराल बहुत बुरा था, कोई भी एकाधिक नाटक नहीं ... अंततः लोलाग लाइब्रेरी + साउंडमैनगर का उपयोग करके समाप्त हुआ:

http://lowlag.alienbill.com/ और http://www.schillmania.com/projects/soundmanager2/

आप यहां कार्यान्वयन की जांच कर सकते हैं: http://musicbox.grit.it/

मैंने मल्टी ब्राउज़र प्ले के लिए wav + ogg फाइल्स जेनरेट की। यह म्यूजिकबॉक्स प्लेयर आईपैड, आईफोन, नेक्सस, मैक, पीसी, ... पर काम करता है।


यह एक अच्छा म्यूजिकबॉक्स ऐप है! क्या आपके पास एक गिट रिपॉजिटरी है? मैं इसे अपने बच्चों के साथ उपयोग कर सकता हूँ!
आईसीरिटो

0

मुझे पता है कि यह एक कुल हैक है, लेकिन मैंने सोचा कि मुझे इस नमूने को ओपन सोर्स ऑडियो लाइब्रेरी में जोड़ना चाहिए, जिसे मैंने कुछ समय पहले जीथब पर रखा था ...

https://github.com/run-time/jThump

नीचे दिए गए लिंक पर क्लिक करने के बाद, ब्लूज़ रिफ़ (एक ही समय में कई कुंजी टाइप करें) खेलने के लिए होम रो कीज़ टाइप करें।

नमूना jThump पुस्तकालय का उपयोग कर >> http://davealger.com/apps/jthump/

यह मूल रूप से अदृश्य <iframe>तत्वों को बनाकर काम करता है जो एक पृष्ठ को लोड करते हैं जो एक ध्वनि चलाता है ()।

यह निश्चित रूप से आदर्श नहीं है, लेकिन आप अकेले रचनात्मकता पर आधारित इस समाधान को +1 कर सकते हैं (और यह तथ्य कि यह खुला स्रोत है और किसी भी ब्राउज़र में काम करता है जिसे मैंने इसे आजमाया है) मुझे उम्मीद है कि यह किसी और को कम से कम कुछ विचारों को खोजने की सुविधा देता है।

:)


किसी ने इसे डाउन-वोट क्यों किया? मेरे लिए एक व्यवहार्य विकल्प की तरह लगता है।
जेट्रिक

यह एक बहुत ही आसान उपाय है, लेकिन मैंने इस लाइब्रेरी का इस्तेमाल एक नमूना html 5 कैनवस गेम बनाने के लिए किया है ताकि यह किसी से भी कम काम न कर सके ... इस लाइब्रेरी का उपयोग करने का खेल यहाँ है - beepbox.net
डेवलेगर

0

चयनित उत्तर IE को छोड़कर हर चीज में काम करेगा। मैंने इसे क्रॉस ब्राउज़र बनाने के तरीके पर एक ट्यूटोरियल लिखा है = http://www.andy-howard.com/how-to-play-sounds-cross-browser-including-ie/index.html

यहां मैंने जो फ़ंक्शन लिखा है;

function playSomeSounds(soundPath)
 {

 var trident = !!navigator.userAgent.match(/Trident\/7.0/);
 var net = !!navigator.userAgent.match(/.NET4.0E/);
 var IE11 = trident && net
 var IEold = ( navigator.userAgent.match(/MSIE/i) ? true : false );
 if(IE11 || IEold){
 document.all.sound.src = soundPath;
 }
 else
 {
 var snd = new Audio(soundPath); // buffers automatically when created
 snd.play();
 }
 };

आपको HTML पृष्ठ पर निम्नलिखित टैग भी जोड़ने की आवश्यकता है:

<bgsound id="sound">

अंत में आप फ़ंक्शन को कॉल कर सकते हैं और बस यहां से गुजर सकते हैं:

playSomeSounds("sounds/welcome.wav");

0

आप हमेशा AudioContextयह कोशिश कर सकते हैं कि इसका सीमित समर्थन हो लेकिन यह वेब ऑडियो एपी के ड्राफ्ट का एक हिस्सा है । यदि आप भविष्य में कुछ जारी करने की योजना बना रहे हैं तो यह इसके लायक हो सकता है। और अगर आप केवल क्रोम और फ़ायरफ़ॉक्स के लिए प्रोग्राम कर रहे हैं तो आप सुनहरे हैं।


0

var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContextFunc();
var player=new WebAudioFontPlayer();
var instrumVox,instrumApplause;
var drumClap,drumLowTom,drumHighTom,drumSnare,drumKick,drumCrash;
loadDrum(21,function(s){drumClap=s;});
loadDrum(30,function(s){drumLowTom=s;});
loadDrum(50,function(s){drumHighTom=s;});
loadDrum(15,function(s){drumSnare=s;});
loadDrum(5,function(s){drumKick=s;});
loadDrum(70,function(s){drumCrash=s;});
loadInstrument(594,function(s){instrumVox=s;});
loadInstrument(1367,function(s){instrumApplause=s;});
function loadDrum(n,callback){
  var info=player.loader.drumInfo(n);
  player.loader.startLoad(audioContext, info.url, info.variable);
  player.loader.waitLoad(function () {callback(window[info.variable])});
}
function loadInstrument(n,callback){
  var info=player.loader.instrumentInfo(n);
  player.loader.startLoad(audioContext, info.url, info.variable);
  player.loader.waitLoad(function () {callback(window[info.variable])});
}
function uhoh(){
  var when=audioContext.currentTime;
  var b=0.1;
  player.queueWaveTable(audioContext, audioContext.destination, instrumVox, when+b*0, 60, b*1);
  player.queueWaveTable(audioContext, audioContext.destination, instrumVox, when+b*3, 56, b*4);
}
function applause(){
  player.queueWaveTable(audioContext, audioContext.destination, instrumApplause, audioContext.currentTime, 54, 3);
}
function badumtss(){
  var when=audioContext.currentTime;
  var b=0.11;
  player.queueWaveTable(audioContext, audioContext.destination, drumSnare, when+b*0, drumSnare.zones[0].keyRangeLow, 3.5);
  player.queueWaveTable(audioContext, audioContext.destination, drumLowTom, when+b*0, drumLowTom.zones[0].keyRangeLow, 3.5);
  player.queueWaveTable(audioContext, audioContext.destination, drumSnare, when+b*1, drumSnare.zones[0].keyRangeLow, 3.5);
  player.queueWaveTable(audioContext, audioContext.destination, drumHighTom, when+b*1, drumHighTom.zones[0].keyRangeLow, 3.5);
  player.queueWaveTable(audioContext, audioContext.destination, drumSnare, when+b*3, drumSnare.zones[0].keyRangeLow, 3.5);
  player.queueWaveTable(audioContext, audioContext.destination, drumKick, when+b*3, drumKick.zones[0].keyRangeLow, 3.5);
  player.queueWaveTable(audioContext, audioContext.destination, drumCrash, when+b*3, drumCrash.zones[0].keyRangeLow, 3.5);
}
<script src='https://surikov.github.io/webaudiofont/npm/dist/WebAudioFontPlayer.js'></script>
<button onclick='badumtss();'>badumtss</button>
<button onclick='uhoh();'>uhoh</button>
<button onclick='applause();'>applause</button>
<br/><a href='https://github.com/surikov/webaudiofont'>More sounds</a>


0

वेब ऑडियो एपीआई इस काम के लिए सही उपकरण है। ध्वनि फ़ाइलों को लोड करने और इसे चलाने में बहुत कम काम शामिल है। सौभाग्य से वहाँ बहुत सारे पुस्तकालय हैं जो नौकरी को सरल बनाते हैं। ध्वनियों में दिलचस्पी होने के कारण मैंने एक पुस्तकालय भी बनाया, जिसे मस्किटो कहा जाता है आप भी देख सकते हैं।

वर्तमान में यह केवल लुप्त होती ध्वनि प्रभाव का समर्थन करता है और मैं 3 डी स्थानिकरण जैसी अन्य चीजों पर काम कर रहा हूं।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.