ओवरलैपिंग

Question

के साथ जेएस के माध्यम से ऑडियो चलाएं मेरे पास कैनवास आधारित गेम के लिए निम्न जेएस कोड है।

var EXPLOSION = "sounds/explosion.wav"; 

function playSound(str, vol) { 
    var snd = new Audio(); 
    snd.src = str; 
    snd.volume = vol; 
    snd.play(); 
} 

function createExplosion() { 
    playSound(EXPLOSION, 0.5); 
} 

यह काम करता है, लेकिन यह ध्वनि फ़ाइल हर बार यह कहा जाता है डाउनलोड करने के लिए एक सर्वर अनुरोध भेजता है। वैकल्पिक रूप से, अगर मैं ऑडियो वस्तु पहले से घोषित:

var snd = new Audio(); 
snd.src = EXPLOSION; 
snd.volume = 0.5; 

function createExplosion() { 
    snd.play(); 
} 

यह काम करता है, इससे पहले कि ध्वनि खेल रहा समाप्त हो गया है createExplosion समारोह कहा जाता है लेकिन यदि, यह ध्वनि बिल्कुल नहीं चलता है। इसका मतलब है कि एक समय में ध्वनि फ़ाइल की केवल एक ही प्लेथ्रू की अनुमति है - और ऐसे परिदृश्यों में जहां कई विस्फोट हो रहे हैं, यह बिल्कुल काम नहीं करता है।

क्या ऑडियो फ़ाइल को कई बार ओवरलैप करने के लिए सही तरीके से चलाने का कोई तरीका है?

Answer 1

इस प्रयास करें:

(function() { 
    var snds = {}; 
    window.playSound(str,vol) { 
     if(!snds[str]) (snds[str] = new Audio()).src = str; 
     snds[str].volume = vol; 
     snds[str].play(); 
    } 
})(); 

तो पहली बार जब आप इसे कहते यह ध्वनि लायेगा, लेकिन उसके बाद कि यह वही ध्वनि वस्तु का पुन: उपयोग होगा हर बार।

---

संपादित करें: आप डुप्लिकेट के साथ पहले से लोड कर ध्वनि एक समय में एक से अधिक बार खेलने के लिए अनुमति देने के लिए:

(function() { 
    var snds = {} 
    window.playSound = function(str,vol) { 
     if(!snds[str]) { 
      snds[str] = [new Audio()]; 
      snds[str][0].src = str; 
     } 
     var snd = snds[str], pointer = 0; 
     while(snd[pointer].playing) { 
      pointer++; 
      if(pointer >= snd.length) { 
       snd.push(new Audio()); 
       snd[pointer].src = str; 
      } 
     } 
     snd[pointer].volume = vol; 
     snd[pointer].play(); 
    }; 
})(); 

ध्यान दें कि यह एक से अधिक अनुरोध भेजने के लिए यदि आप स्वयं को बहुत ओवरलैपिंग ध्वनि खेलेंगे बहुत कुछ, लेकिन इसे वापस जल्दी से संशोधित नहीं किया जाना चाहिए और केवल तभी ऐसा होगा यदि आप इसे पहले से अधिक बार खेलते हैं।

Answer 2

मैं इसे टेट्रिस गेम में उम्र के लिए ढूंढ रहा था और मुझे लगता है कि यह समाधान सबसे अच्छा है।

function playSoundMove() { 
    var sound = document.getElementById("move"); 
    sound.load();  
    sound.play(); 
} 

बस इसे लोड किया गया है और जाने के लिए तैयार है।

Answer 3

आप cloneNode() और play() के साथ नोड को डुप्लिकेट कर सकते हैं जो डुप्लिकेट नोड।

मेरे ऑडियो तत्व इस तरह दिखता है:

<audio id="knight-audio" src="knight.ogg" preload="auto"></audio> 

और मैं एक onClick श्रोता कि सिर्फ इतना है कि करता है:

function click() { 
    const origAudio = document.getElementById("knight-audio"); 
    const newAudio = origAudio.cloneNode() 
    newAudio.play() 
} 

और चूंकि audio तत्व प्रदर्शित करने के लिए नहीं जा रहा है, तो आप वास्तव में नोड को कुछ भी संलग्न नहीं करना है।

मैंने क्लाइंट-साइड और सर्वर-साइड सत्यापित किया है कि क्रोम केवल एक बार ऑडियो फ़ाइल डाउनलोड करने का प्रयास करता है।

चेतावनी: मुझे प्रदर्शन प्रभावों के बारे में निश्चित नहीं है, क्योंकि यह मेरी साइट पर यह क्लिप किसी पृष्ठ के लिए अधिकतम 40x से अधिक नहीं खेला जाता है। यदि आप उससे कुछ बड़ा कर रहे हैं तो आपको ऑडियो नोड्स को साफ करना पड़ सकता है?

Answer 4

प्रक्रिया समय की तुलना में स्मृति के बारे में अधिक भरोसा है, हम ऑडियो के कई क्लोन की एक सरणी बनाने और उसके बाद क्रम से उन्हें खेल सकते हैं:

function gameSnd(){ 
    this.t = new Audio('sounds/tick.wav'); 
    this.v = new Audio('sounds/victory.wav'); 
    this.c = 0; 
    this.ticks=[]; 
    for(var i = 0; i<10;i++) 
    this.ticks.push(this.t.cloneNode()); 

    this.tick = function(){ 
    this.c = (this.c + 1)%10; 
    this.ticks[this.c].play(); 
    } 

    this.victory = function(){ 
    this.v.play(); 
    } 

}