Implementación de un afinador de guitarra en vivo en JavaScript con onlinetuner.co

Un afinador de guitarra puede detectar la frecuencia del sonido. La frecuencia de una onda es el número de picos de onda que pasan por un punto fijo en un período de tiempo determinado, esta frecuencia se mide en Hertz (Hz), que corresponde al número de crestas que pasan en un solo segundo. Gracias a la API de Web Audio, existen múltiples métodos para "obtener la frecuencia" del sonido, que proviene del micrófono. Con esta información, se puede crear un afinador de guitarra.

En este artículo, aprenderá cómo mostrar un fragmento de afinador de guitarra muy simple pero útil en HTML5.

1. Incluye el guión del afinador de guitarra

Puede descargar el código fuente minificado o completo de guitar-tuner.js desde el repositorio en Github o simplemente puede usar un CDN gratuito:

<!-- desde un CDN gratuito -->
<script src="https://cdn.rawgit.com/citronneur/onlinetuner.co/master/js/onlinetuner.min.js"></script>

<!-- De una copia local-->
<script src="onlinetunner.min.js"></script>

Después de la instalación, podrá acceder al sintonizador en la ventana con el objeto OnlineTuner. La sintonía se realiza con la ayuda de Web Audio API para manipular las frecuencias, etc. y la Media API para recuperar el audio del micrófono. Para obtener más información sobre esta interesante biblioteca, visite el repositorio oficial de Github aquí .

2. Inicializar una sola instancia del sintonizador

La inicialización de un sintonizador es bastante simple. La biblioteca manipula y representa la información en un lienzo, por lo que lo primero que debe hacer es crear un elemento de lienzo que se utilizará durante la inicialización. Puede personalizar hasta 4 propiedades de color del gráfico que se representará en el lienzo, el color cuando la nota está totalmente afinada (que suele ser verde) y el color que advierte que la cuerda aún no se ha afinado. Puede inicializar una sola instancia del sintonizador con el siguiente código:

<!-- Crea un canvas donde se renderizará el afinador -->
<canvas id="guitar-tuner" height="300"></canvas>

<script>
    var Settings = {
        container: document.getElementById("guitar-tuner"),
        backgroundColor: "white", // or hex colors "#ffffff"
        notOkayColor: "orange",
        okayColor: "green",
        fontColor: "black"
    };

	function initializeTuner() {
        // Cree una instancia única o múltiple de afinadores a la vez
		var tuners = [
			new OnlineTuner.Controller.GuitareTuner(
                new OnlineTuner.Widget.CircleWidget(
                    Settings.container, 
                    Settings.backgroundColor, 
                    Settings.notOkayColor, 
                    Settings.okayColor, 
                    Settings.fontColor
                )
            )
		];
		
        // Inicialice el sintonizador con las devoluciones de llamada
		new OnlineTuner.Analyser(tuners).install(function() {
            console.log("Succesfully initialized");
            
		}, function(errorMessage) {
            console.error("Oops, this shouldn't happen", errorMessage);
		});
	}
  
    // Renderice el afinador de guitarra en el lienzo ejecutando la función
    initializeTuner();
</script>

Al ejecutar el fragmento en el navegador, se generará un gráfico simple que cambia cada vez que toca una cuerda cerca del micrófono (consulte la imagen del artículo).

3. Varias instancias de sintonizador

Si está dispuesto a mostrar varios gráficos de sintonizador, que funcionan de la misma manera, simplemente empuje otro widget de círculo al código de inicialización y agregue otro lienzo:

<!-- Crea un lienzo donde se renderizará el afinador -->
<canvas id="guitar-tuner" height="300"></canvas>

<!--Crea un lienzo donde se renderizará el segundo sintonizador -->
<canvas id="second-guitar-tuner" height="300"></canvas>

<script>
    var Settings = {
        container: document.getElementById("guitar-tuner"),
        backgroundColor: "white", // or hex colors "#ffffff"
        notOkayColor: "orange",
        okayColor: "green",
        fontColor: "black"
    };

    var SettingsSecondTuner = {
        container: document.getElementById("guitar-tuner"),
        backgroundColor: "white", // or hex colors "#ffffff"
        notOkayColor: "red",
        okayColor: "#69934d",
        fontColor: "black"
    };

	function initializeTuners() {
        // Cree una instancia única o múltiple de sintonizadores a la vez
		var tuners = [
            // Primer afinador
			new OnlineTuner.Controller.GuitareTuner(
                new OnlineTuner.Widget.CircleWidget(
                    Settings.container, 
                    Settings.backgroundColor, 
                    Settings.notOkayColor, 
                    Settings.okayColor, 
                    Settings.fontColor
                )
            ),
            // Segundo sintonizador
            new OnlineTuner.Controller.GuitareTuner(
                new OnlineTuner.Widget.CircleWidget(
                    SettingsSecondTuner.container, 
                    SettingsSecondTuner.backgroundColor, 
                    SettingsSecondTuner.notOkayColor, 
                    SettingsSecondTuner.okayColor, 
                    SettingsSecondTuner.fontColor
                )
            )
		];
		
        // Inicialice el afinador con las devoluciones de llamada
		new OnlineTuner.Analyser(tuners).install(function() {
            console.log("Succesfully initialized");
            
		}, function(errorMessage) {
            console.error("Oops, this shouldn't happen", errorMessage);
		});
	}
  
    // Renderice el afinador de guitarra en el lienzo ejecutando la función
    initializeTuners();
</script>

Ejemplo en vivo

Tome su guitarra y toque algunos acordes (o cuerdas sueltas) usando la siguiente demostración en vivo del afinador de guitarra:

Conclusiones

Aunque hay otras implementaciones increíbles que funcionan tan bien como este complemento, como la demostración de Guitar Tune del equipo de Google Chrome :

Este complemento es uno de los más sencillos de implementar como puede ver.

Que te diviertas ❤️!