Puedes utilizar AudioContext para lograr esto, necesitas hacer 4 cosas:
- Crear un nodo analizador, que te permite tomar muestras del audio por pedazos y saber, por ejemplo, la intensidad de la señal en cada punto.
- Crear un nodo procesador, que te permite procesar el audio a medida que se reproduce.
- En el procesador, y utilizando el analizador, calcular el volumen de la señal para cada muestra que se procesa.
- Conectar todo junto para: Visualizar la intensidad actual del audio y enviarlo también al speaker o output.
Ten en cuenta que son APIs bastante nuevas y aunque hay buen soporte es una opcion que te conviene usarla como Progressive Enhancement, osea que solo deberias incluirla en navegadores que lo soportan. Tambien es muy util en aplicaciones hechas con Electron o Apache Cordoba ya que se basan en Chromium y este soporta estas APIs muy bien.
Aquí te dejo un ejemplo que solo pude probar en Chrome 53. El audio no es el mejor pero es lo que encontre que permita cargar el audio desde aqui. El ejemplo tiene un overlay rojo que se pone mas intenso a medida que la potencia del audio sube.
El indicador del volumen promedio de cada muestra de audio es la variable prom
la cual también uso para indicar la opacidad del <div>
. Esto lo puedes usar, en base a un umbral. Por ejemplo, si es mayor a 10.0, activas el indicador de audio presente.
Esto es compatible con fuentes getUserMedia
y WebRTC
por lo que puedes utilizarlo sin problemas para indicar que el usuario esta hablando .
Salu2
var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
var overlay = document.querySelector('#overlay');
// creamos un analyzer
var analyser = audioCtx.createAnalyser();
analyser.smoothingTimeConstant = 0.3;
analyser.fftSize = 1024;
// creamos un audio processor
var processor = audioCtx.createScriptProcessor(2048, 1, 1);
// en el evento, verificamos si hay volumen o no
processor.onaudioprocess = function(audio) {
// tomar los datos del analyzer
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
// calcular el volumen promedio
var prom = 0;
for (var i = 0; i < array.length; i++) {
prom += array[i];
}
prom = prom / array.length;
// aqui ponemos la intensidad del volumen como opacidad del div
overlay.style.opacity = prom/200;
console.log(prom);
// pasar los datos hacia el speaker
var inputBuffer = audio.inputBuffer;
var outputBuffer = audio.outputBuffer;
for (var channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
var inputData = inputBuffer.getChannelData(channel);
var outputData = outputBuffer.getChannelData(channel);
for (var sample = 0; sample < inputBuffer.length; sample++) {
outputData[sample] = inputData[sample];
}
}
}
// conectar todo junto
var video = document.querySelector('audio');
var source = audioCtx.createMediaElementSource(video);
source.connect(analyser);
analyser.connect(processor);
processor.connect(audioCtx.destination);
#overlay {
position: fixed;
top:0; left: 0; bottom: 0; right: 0;
background: red;
opacity: 0;
z-index: -1;
}
<audio autoplay crossOrigin="anonymous" width="400" controls>
<source src="http://mdn.github.io/media-source-buffer/viper.mp3" type="audio/mpeg">
</audio>
<div id="overlay"></div>
NOTA: Este ejemplo es sensible al volumen del speaker, pero es una limitacion del ejemplo y con el objeto de simplificarlo y demostrar como funcionan estas APIs. Esto puede resolverse con facilidad utilizando un AudioSpliter y desviando la salida al analyzer sin necesidad de atacharse al volumen de salida.