Wie stelle ich die Lautstärke von HTML5 Audio ein?

Question

In einem HTML5-Spiel, das ich mache, spiele ich einen "dumpfen" Sound, wenn die Dinge kollidieren. Es ist jedoch ein bisschen unrealistisch. Ungeachtet der Geschwindigkeit der Objekte, werden sie immer den gleichen, relativ lauten "Schlag" Klang erzeugen. Was ich tun möchte ist, dass die Lautstärke des Sounds von der Geschwindigkeit abhängt, aber wie mache ich das? Ich kann nur einen Ton spielen.

playSound = function(id) 
{ 
    sounds[id].play(); 
} 

sounds ist ein Array voll new Audio("url") ‚s.

Answer 1

Verwenden Sie die Volume-Eigenschaft des Audioelements. Von W3:

The element's effective media volume is volume, interpreted relative to the range 0.0 to 1.0, with 0.0 being silent, and 1.0 being the loudest setting, values in between increasing in loudness. The range need not be linear. The loudest setting may be lower than the system's loudest possible setting; for example the user could have set a maximum volume.

Ex: sounds[id].volume=.5;

Answer 2

können Sie die Lautstärke einstellen, indem Sie:

setVolume = function(id,vol) { 
    sounds[id].volume = vol; // vol between 0 and 1 
} 

jedoch bedenken, dass es eine kleine Verzögerung zwischen dem Volumen eingestellt wird, und es tritt in Kraft. Sie können hören, dass der Ton mit der vorherigen Lautstärke beginnt und dann zu der neuen springt.

Answer 3

Sie können sogar mit der Verstärkung spielen und die Lautstärke lauter als 100% spielen lassen. Sie können diese Funktion verwenden, um den Ton zu verstärken:

function amplifyMedia(mediaElem, multiplier) { 
    var context = new (window.AudioContext || window.webkitAudioContext), 
     result = { 
     context: context, 
     source: context.createMediaElementSource(mediaElem), 
     gain: context.createGain(), 
     media: mediaElem, 
     amplify: function(multiplier) { result.gain.gain.value = multiplier; }, 
     getAmpLevel: function() { return result.gain.gain.value; } 
     }; 
    result.source.connect(result.gain); 
    result.gain.connect(context.destination); 
    result.amplify(multiplier); 
    return result; 
} 

Sie so etwas tun könnte die anfängliche Verstärkung auf 100% gesetzt:

var amp = amplifyMedia(sounds[id], 1); 

Dann, wenn Sie den Ton müssen doppelt so laut sein Sie könnte so etwas tun: es

amp.amplify(2); 

Wenn Sie auf die Hälfte wollen, können Sie dies tun:

Eine vollständige aufzuschreiben der Funktion gefunden hier: http://cwestblog.com/2017/08/17/html5-getting-more-volume-from-the-web-audio-api/