Estoy trabajando en un proyecto en el que estoy usando elementos <video> como fuentes para animaciones de lienzo, y mi objetivo es enviar su audio a través de la API de audio web usando Tone.js. Las animaciones del lienzo están bien, es el audio lo que me está dando problemas. Me gustaría mantener el audio sincronizado con el video si es posible, así que estoy usando MediaStream .
Cuando se carga un video, inicialmente se silencia en el elemento mismo. Hago muted="false" una vez que el audio está habilitado al presionar un botón que ejecuta Tone.start() . Tomo el audio del video a través de captureStream() y lo conecto a un nodo de ganancia con la ganancia establecida en 0, esencialmente silenciando nuevamente. En Firefox, todo funciona bien y puedo establecer la ganancia en el valor deseado. Pero en Chrome, no puedo deshacerme del audio del video original, todavía está en segundo plano. Mi "desactivar silencio" funciona, pero claramente reproduce una segunda copia del audio, lo que provoca un filtrado de peine.
Tengo la intención de hacer algo más que silenciar y reactivar el sonido, por lo que si bien es tentador usar video.volume en lugar de realizar todo este trabajo, esta es solo una prueba de concepto que no está demostrando mucho en este momento. ¡Cualquier ayuda es apreciada!
let video = document.querySelector(video); // lower the video element's audio until we're ready // might not be necessary, but it's just a cautionary step video.volume = 0; // unhook the audio from the video; works in FF, but not Chrome let stream = video.mozCaptureStream ? video.mozCaptureStream() : video.captureStream(); let audioTrack = new MediaStream(stream.getAudioTracks()); let speaker = Tone.context.createMediaStreamSource(audioTrack); // gain node is the *actual* volume control that I'm intending to use; it starts at 0 to mute the unhooked audio let gain = new Tone.Gain(0); Tone.connect(speaker, gain); Tone.connect(gain, Tone.context.destination); // if video.volume stays at 0, we hear nothing video.volume = 1; Editar: puede valer la pena mencionar que comencé con esta página de soporte de API de Vonage para comprender mejor cómo usar captureStream() de esta manera, pero el proceso de clonación y desactivación descrito en ese artículo no funcionó para mí en FF o Cromo.
El comportamiento de Chrome es en realidad el "más correcto" aquí (sorprendentemente dados los muchos errores que tienen en esa área).
Está creando un clon de MediaStream a partir de la fuente de MediaElement. Este MediaStream no debería verse afectado por el volumen establecido en el elemento <video> ( especificaciones ), tanto Firefox como Chrome fallan aquí.
Por lo tanto, el MediaStream capturado debe tener su propio gráfico y cuando lo conecta al AudioContext, el flujo original del MediaElement debe continuar su vida e ignorar por completo el MediaStream capturado. Sin embargo, Chrome lo maneja correctamente, pero Firefox lo tiene mal (que es en parte la razón por la que todavía prefijan el nombre del método MediaElement#mozCaptureStream() ).
Pero dado que lo que desea es en realidad el comportamiento de Firefox, puede reproducirlo utilizando un MediaElementAudioSourceNode , que tomará posesión de la transmisión de audio de MediaElement y la desconectará por completo del gráfico de MediaElement. Por lo tanto, tendrá un control completo sobre el volumen de salida.
const btn = document.querySelector("button"); const vid = document.querySelector("video"); const inp = document.querySelector("input"); btn.onclick = evt => { btn.remove(); vid.play(); const context = new AudioContext(); const gain = context.createGain(); const source = context.createMediaElementSource(vid); source.connect(gain); gain.connect(context.destination); inp.oninput = evt => { gain.gain.value = inp.value; }; gain.gain.value = 0; const meter = new OscilloMeter(document.querySelector("canvas")); meter.listen(source, context); }; button~*,button~.cont { display: none } .cont { display: flex } <script>class OscilloMeter{constructor(a){this.ctx=a.getContext("2d")}listen(a,b){function c(){g.getByteTimeDomainData(j),d.clearRect(0,0,e,f),d.beginPath();let a=0;for(let c=0;c<h;c++){const e=j[c]/128;var b=e*f/2;d.lineTo(a,b),a+=k}d.lineTo(d.canvas.width,d.canvas.height/2),d.stroke(),requestAnimationFrame(c)}const d=this.ctx,e=d.canvas.width,f=d.canvas.height,g=b.createAnalyser(),h=g.fftSize=256,j=new Uint8Array(h),k=e/h;d.lineWidth=2,a.connect(g),c()}}</script> <button>Start</button> <label>Output volume: <input type=range min=0 max=1 step=0.01 value=0></label> <div class="cont"> <section> <p>You can still control the input's volume through the video's UI:</p> <video src=https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm id=vid controls crossorigin=anonymous height=200></video> </section> <section> <p> Processed audio (using input volume):<br> <canvas></canvas> </p> </section> </div>