La interfaz MediaStreamAudioSourceNode
representa una fuente de audio compuesta por un WebRTC MediaStream
(tal como una cámara web o un micrófono.) Es un AudioNode
que actúa como una fuente de audio.
El MediaElementSourceNode
no tiene entradas y una y sólo una salida, y es creado usando el método AudioContext.createMediaStreamSource
.
La cantidad de canales en la salida es igual al número de canales en AudioMediaStreamTrack
. Si no existe un flujo de media válido, entonces el número de canales de salida será un canal silencioso.
Nota: MediaStreamAudioSourceNode
selecciona la pista de audio automáticamente, y puede que no siempre sea predecible. Usted debería considerar seriamente usar el MediaStreamTrackAudioSourceNode
en su lugar, que se crea especificando la pista exacta que desea utilizar.
Número de entradas | 0 |
---|---|
Número de salidas | 1 |
Cantidad de canales | definido por AudioMediaStreamTrack pasado al método AudioContext.createMediaStreamSource que lo creó. |
Propiedades
Heredadas de su padre, AudioNode
.
Métodos
Heredadas de su padre, AudioNode
.
Ejemplo
In this example, we grab a media (audio + video) stream from navigator.getUserMedia
, feed the media into a <video>
element to play then mute the audio, but then also feed the audio into a MediaStreamAudioSourceNode
. Next, we feed this source audio into a low pass BiquadFilterNode
(which effectively serves as a bass booster), then a AudioDestinationNode
.
The range slider below the <video>
element controls the amount of gain given to the lowpass filter — increase the value of the slider to make the audio sound more bass heavy!
Note: You can see this example running live, or view the source.
var pre = document.querySelector('pre');
var video = document.querySelector('video');
var myScript = document.querySelector('script');
var range = document.querySelector('input');
// getUserMedia block - grab stream
// put it into a MediaStreamAudioSourceNode
// also output the visuals into a video element
if (navigator.mediaDevices) {
console.log('getUserMedia supported.');
navigator.mediaDevices.getUserMedia ({audio: true, video: true})
.then(function(stream) {
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
video.muted = true;
};
// Create a MediaStreamAudioSourceNode
// Feed the HTMLMediaElement into it
var audioCtx = new AudioContext();
var source = audioCtx.createMediaStreamSource(stream);
// Create a biquadfilter
var biquadFilter = audioCtx.createBiquadFilter();
biquadFilter.type = "lowshelf";
biquadFilter.frequency.value = 1000;
biquadFilter.gain.value = range.value;
// connect the AudioBufferSourceNode to the gainNode
// and the gainNode to the destination, so we can play the
// music and adjust the volume using the mouse cursor
source.connect(biquadFilter);
biquadFilter.connect(audioCtx.destination);
// Get new mouse pointer coordinates when mouse is moved
// then set new gain value
range.oninput = function() {
biquadFilter.gain.value = range.value;
}
})
.catch(function(err) {
console.log('The following gUM error occured: ' + err);
});
} else {
console.log('getUserMedia not supported on your browser!');
}
// dump script to pre element
pre.innerHTML = myScript.innerHTML;
Note: As a consequence of calling createMediaStreamSource()
, audio playback from the media stream will be re-routed into the processing graph of the AudioContext
. So playing/pausing the stream can still be done through the media element API and the player controls.
Especificación
Especificación | Estado | Comentario |
---|---|---|
Web Audio API La definición de 'MediaStreamAudioSourceNode' en esta especificación. |
Working Draft |