Estoy construyendo un indicador de nivel de sonido simple para un oyente. Usando la guía de MDN para esto ( https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API ).

Desafortunadamente, no puedo acceder al audio desde el navegador, por lo que podría enviarse a un analizador de frecuencia que uso para una visualización (el analizador devuelve un Uint8Array lleno de ceros, para ser más específicos).

A continuación se muestra un fragmento de código.

 var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var audio = new Audio ("wss://demo..."); function analyseSound(){ audioCtx.resume().then(() => { var analyser = audioCtx.createAnalyser(); var source = audioCtx.createMediaElementSource(audio); source.connect(analyser); analyser.fftSize = 2048; var bufferLength = analyser.frequencyBinCount; var dataArray = new Uint8Array(bufferLength); console.log(dataArray); // returns Uint8Array(1024) [0, 0, 0, 0, ...] var canvas = document.getElementById('indicator'); var canvasCtx = canvas.getContext("2d"); canvasCtx.clearRect(0, 0, canvas.width, canvas.height); function draw() { drawVisual = requestAnimationFrame(draw); analyser.getByteFrequencyData(dataArray); canvasCtx.fillStyle = 'rgb(200, 200, 200)'; canvasCtx.fillRect(0, 0, canvas.width, canvas.height); var barWidth = (canvas.width / bufferLength) * 2.5; var barHeight; var x = 0; for(var i = 0; i < bufferLength; i++) { barHeight = dataArray[i]/2; canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; canvasCtx.fillRect(x,canvas.height-barHeight/2,barWidth,barHeight); x += barWidth + 1; } }; draw(); }); }

Se llama a audioCtx cuando se carga una página y, luego, se reanuda con un clic de botón, ya que Chrome no permite AudioContext antes de que el usuario interactúe con la página.

Intenté configurar un nuevo Websocket y jugar con eso, pero, desafortunadamente, tengo un conocimiento muy limitado sobre este tema, por lo que tampoco hay mucha suerte con eso.

¡Cualquier ayuda es muy apreciada!