Afinador de Guitarra – Online Guitar Tuner

Hace unos años hice un Afinador de Guitarra Online en Flash para la web de Liyonel Guitars.

Flash va a morir, de hecho está agonizando ya… en el año 2016 estuvo presente solo en el 10% de las webs y a partir de 2017 Firefox y Chrome empezarán a bloquear el contenido Flash.

Por eso, pensé en hacer un nuevo afinador en HTML5, con algo de CSS3 y con Javascript puro (para evitar la carga de librerías externas).

La idea original era usar canvas para las animaciones, pero lo dejaremos para la siguiente versión y aquí las haremos con CSS y Javascript.

HTML / HTML5

El HTML se divide en tres partes para las que usaremos elementos de HTML5 :

 

header
Aqui pondremos el titulo que iluminaremos con CSS3 cuando suene alguna cuerda, para ello añadiremos con Javascript una clase extra al elemento h1 modificando sus estilos CSS.

 

section
En esta sección van las cuerdas que serán elementos button , también hemos puesto las notas que se iluminarán al tocar cada cuerda. Igualmente con Javascript añadiremos una clase extra a cada elemento para modificar su CSS y aplicar el efecto de iluminado al tocar las cuerdas.

 

footer
En la última parte vamos a poner los controles del afinador; un botón para detener el sonido, otro botón para mantener el sonido, y la púa que hará que suenen las cuerdas onmouseover.

 

CSS / CSS3

Lo único destacable de lo estilos, más allá de imágenes de fondo y posiciones de los elementos, es el iluminado de las notas y el efecto metalizado del texto.

 

Iluminado de notas

Muy simple, con las propiedades color y text-shadow combinadas con la propiedad transition:

 

Efecto metalizado del texto

Algo más elaborado, pero muy fácil tambien, la clave está en las propiedades color, background-color, background-clip y text-shadow.
Para aplicar el efecto de iluminado basta con cambiar las propiedaes background-color y text-shadow en el selector :hover, o añadiendo al elemento una clase con Javascript como en este caso:

 

Javascript

El Javascript son solo un puñado de variables y algunas funciones:

 

Variables

Creamos seis variables para almacenar los sonidos de las cuerdas:

Después podremos acceder a cada sonido para reproducirlo o detenerlo usando el método window.

 

Funciones

Los nombres de las funciones son bastante descriptivos, lo que hacen básicamente es reproducir o detener los sonidos y añadir o quitar clases a elementos dependiendo de las cuerdas que toquemos, con ello cambiamos los estilos de los elementos para, por ejemplo, iluminarlos, y para ello usamos los métodos getElementById y querySelectorAll.

 

getElementById

Como vamos a usar bastante el método getElementById lo podemos acortar en una función, y pasar de esto:

A esto otro;

Con esta simple función:

En el resto de funciones usaremos nuestra función elem() acortando el código resultante.

 

Que suenen las cuerdas…

Una de las funciones clave es clickString que se activará al tocar una cuerda, y funciona de la siguiente manera:

En el HTML se le pasa como argumento el valor del atributo id de la cuerda que se ha tocado:

La función identifica la cuerda y hace el resto:

Empezando por la linea 2:

2. Añadimos la clase imgTitle al título para encenderlo.
3. Nos aseguramos de que el botón solo tiene la clase string, para evitar duplicar clases.
4. Usamos el atributo id del botón para seleccionar el sonido de la cuerda elegida mediante el objeto window y lo detenemos al inicio del sonido con currentTime.
5. Reproducimos el sonido con el método play().
6. Creamos la variable thisNote para encender las notas.
7. Le añadimos la clase playingSound al botón de la cuerda que está sonando, para encenderla.
8. Le añadimos la clase lightOn a la nota de la cuerda que está sonando, para encenderla.
9. Llamamos al método setTimeout, que se ejecutará 4 segundos y medio después…
10. - Si el sonido no está en bucle:
11.   – Quitamos la clase playingSound a la cuerda, para apagarla.
12.   – Cambiamos la clase lightOn por lightOff a la nota, para apagarla.
13.   – Si no hay ningún elemento con la clase playingSound :
14.     – Quitamos la clase imgTitle al título, para apagarlo.
15.   –
16. -
17. Ejecutamos el contenido del método setTimeOut 4 segundos y medio después de llamarlo (cuando el sonido ha dejado de sonar).

 

querySelectorAll

El método querySelectorAll devuelve, en una lista de nodos, todos los elementos del documento que tienen un determinado selector CSS. Se puede acceder a estos nodos mediante números de índice. De manera que:

Nos devolverá una lista de elementos con la clase notas:

Y podemos acceder a ellos mediante números de índice:

 

Que paren las cuerdas…

La función stopStrings funciona con este método:

Empezando por la linea 2:

2. Quitamos la clase imgTitle del título para apagarlo.
3. Detenemos todos los sonidos con el método pause().
4. Creamos la variable auxString que almacena las cuerdas que están sonando.
5. Con un bucle for recorremos la variable:
6. - Si la variable, con su índice, está definida: (esto es para evitar errores en firefox)
7.   – Quitamos la variable playingSound a cada elemento que la tenga, apagándolo.
8. …
9. …
10. Repetimos el proceso para apagar las notas buscando los elementos con la clase lightOn…

 

Demo

Es posible experimentar errores al mostar el código en la demo, es por el ancho del blog que todo a la vez no cabe… ya que el afinador necesita un mínimo de 320 pixels de ancho…

See the Pen Online Guitar Tuner by Josetxu (@josetxu) on CodePen.

…pero puedes probar la demo a tamaño completo:

ver demo grande