Como puedo detectar letras, vocales o gestos con el micrófono?

Buenas tardes comunidad, he buscado librerías para detectar palabras claves con javascript pero hasta ahora no he dado con la tecla para detectar solo letras (vocales) o gestos, la idea es que el usuario diga algo así como "aaaaahhhh" (una especie de suspiro) o de aliento como suelen aparecer en las publicidades de cremas dentales o de las pastillas halls... ya que me han pedido hacer un landing en donde el usuario debería poder comprobar "el nivel de frescor del aliento".

Para ello he intentado implementar este código, pero hasta ahora lo más cerca que he llegado es a reconocer tan solo la letra "a".

Código Javascript :

  var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
  var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
 
  var grammar = "JSGF V1.0; grammar actions; public <action> = ah | a | jaaaa | aaa";
 
  var speechRecognitionList = new SpeechGrammarList();
      speechRecognitionList.addFromString(grammar, 1);
 
  var recognition = new SpeechRecognition();
      recognition.grammars = speechRecognitionList;
      recognition.lang = "es-ES";
      recognition.interimResults = false;
      recognition.maxAlternatives = 1;
 
  recognition.onresult = function(event) {
    
    //----------------WRITE RESULT
    var result = event.results[0][0].transcript;
    console.log(result);   
  }
  recognition.onend = function() {
    recognition.start();
  }
  recognition.start();

Simplemente chequea que el microfono reciba algun input y luego le das un valor random (o el que te haya pedido tu genial publicista) de frescura.

Jorge

No entendía la conexión entre un input y el micrófono, te referis a un input de texto html? tampoco entendí lo del valor random... creo que lo único que entendí fue la ironía de "tu genial publicista" jajaja

Ok, la ironia es porque pase una decada entre gente de publicidad haciendo todo tipo de magias y compartiendo sus geniales ideas. Paso a aclarar los terminos

input de microfono: acceder al stream de audio, en este hilo, https://stackoverflow.com/questions/33322681/checking-microphone-volume-in-javascript , ultimo POST tienes un script que dibuja figuras segun la potencia del input ... no necesitas dibujar, en base a ese average obtienes un numero

Luego imaginemos que tienes que medir la frescura del aliento? Es posible eso? No, entonces lo que hacemos es jugar con los numeros (de alli la palabra random o al azar) e inventamos algun algoritmo que nos de indice de frescura. Por ejemplo cuando mas fuerte el volumen mas frescura ... o al reves ... en fin, alli esta tu imaginacion.

Si el input no es el microfono entonces no entendi la consigna

Jorge

Claro ahora entiendo tu idea perfectamente... y es una buena opción.

El punto clave y la astilla en el pié es que el cliente quiere que el usuario diga "aaaaaahhh", claro que no podemos detectar el nivel de frescura, pero al menos podríamos detectar la letra "a" obteniendo la frecuencia del mic input y pasar al resultado si la frecuencia del input coincide con la de la letra "a", creo que así es como funcionan estos speech detectors, solo cuando diga la letra a y no las demás vocales, para eso encontré una librería:

https://p5js.org/es/examples/sound-frequency-modulation.html
https://p5js.org/examples/sound-frequency-spectrum.htm


Pero viéndolo desde tu punto de vista, creo que me voy a complicar demasiado intentando hacer mi propia librería de detección de vocales..

Olvidate, suponiendo que hicieras la A viene alguien y la hace medio rara y te dice que no funciona (considera que todas esas librerias estan orientadas a la pronunciacion anglosajona) Si quieres sobrevivir en el ambiente de creativos publicistas, nunca le hagas caso del todo. una frase como "hecha tu aliento al microfono" puede tranquilamente sustituir la de de "haz aahhh" y seguro que cuela.

Echales tambien tu aliento y enredalos en una buena explicacion pseudotecnica.

Salute !
Jorge