Comprobando el volumen del micrófono en Javascript

Agradecemos tu apoyo para extender nuestros escritos con relación a las ciencias de la computación.

Solución:

Una respuesta un poco más detallada después de tener que resolverlo yo mismo puede ayudar a otros que buscan aquí.

El siguiente código cerrará la sesión con un número aproximado de 0 a 100 según el volumen del micrófono.

navigator.mediaDevices.getUserMedia( audio: true, video: true )
.then(function(stream) 
  audioContext = new AudioContext();
  analyser = audioContext.createAnalyser();
  microphone = audioContext.createMediaStreamSource(stream);
  javascriptNode = audioContext.createScriptProcessor(2048, 1, 1);

  analyser.smoothingTimeConstant = 0.8;
  analyser.fftSize = 1024;

  microphone.connect(analyser);
  analyser.connect(javascriptNode);
  javascriptNode.connect(audioContext.destination);
  javascriptNode.onaudioprocess = function() 
      var array = new Uint8Array(analyser.frequencyBinCount);
      analyser.getByteFrequencyData(array);
      var values = 0;

      var length = array.length;
      for (var i = 0; i < length; i++) 
        values += (array[i]);
      

      var average = values / length;

    console.log(Math.round(average));
    // colorPids(average);
  
  )
  .catch(function(err) 
    /* handle the error */
);

Si tiene este número, jquery para diseñar bloques de color. Una función de ejemplo de esto que he proporcionado a continuación, pero esa es la parte fácil. Simplemente descomente la función de pids de color.

function colorPids(vol) 
  let all_pids = $('.pid');
  let amout_of_pids = Math.round(vol/10);
  let elem_range = all_pids.slice(0, amout_of_pids)
  for (var i = 0; i < all_pids.length; i++) 
    all_pids[i].style.backgroundColor="#e6e7e8";
  
  for (var i = 0; i < elem_range.length; i++) 

    // console.log(elem_range[i]);
    elem_range[i].style.backgroundColor="#69ce2b";
  

Para asegurarme de que esta respuesta sea lo más detallada posible, también he adjuntado mi html y css a continuación para que pueda copiar js html y css si desea tener un ejemplo funcional en funcionamiento.

html:

CSS:

.pids-wrapper
  width: 100%;

.pid
  width: calc(10% - 10px);
  height: 10px;
  display: inline-block;
  margin: 5px;

Después de todo eso, terminarás con algo como esto.

Aquí está el fragmento necesario para detectar que los controles de audio están disponibles (extraído de: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia)

navigator.getUserMedia(constraints, successCallback, errorCallback);

Aquí hay una muestra usando la función getUserMedia que le permitirá acceder al micrófono.

navigator.getUserMedia = navigator.getUserMedia ||
                     navigator.webkitGetUserMedia ||
                     navigator.mozGetUserMedia;

if (navigator.getUserMedia) 
   navigator.getUserMedia( audio: true, video:  width: 1280, height: 720  ,
      function(stream) 
         console.log("Accessed the Microphone");
      ,
      function(err) 
         console.log("The following error occured: " + err.name);
      
    );
 else 
   console.log("getUserMedia not supported");

Aquí hay un repositorio que demuestra el "volumen de entrada" que desea.

https://github.com/cwilso/volumen-metro/

Medidor Vu de micrófono simple Ver https://codepen.io/www-0av-com/pen/jxzxEX

Comprobado y funcionando en 2018, incluida la corrección de errores causados ​​por la actualización de seguridad en el navegador Chrome.

HTML

VU meter from mic input (getUserMedia API)

Start


CLICK START

See JS for attribution

CSS

body 
  color: #888;
  background: #262626;
  margin: 0;
  padding: 40px;
  text-align: center;
  font-family: "helvetica Neue", Helvetica, Arial, sans-serif;


#canvas 
  width: 150px;
  height: 100px;
  position: absolute;
  top: 150px;
  left: 45%;
  text-align: center;

JS (necesita JQuery)

// Courtesy www/0AV.com, LGPL license or as set by forked host, Travis Holliday, https://codepen.io/travisholliday/pen/gyaJk 
function startr()

Te mostramos las comentarios y valoraciones de los lectores

---

---

Utiliza Nuestro Buscador