Paso 7: Hacer ruido con Timbre.js
Ahora que tenemos cerca de retroalimentación en tiempo real del botón de Prensas se envía sobre un zócalo de web en nuestro navegador, estamos listos para hacer algo de música. Vamos a utilizar una librería llamada Timbre.js para manipular sonidos con nuestros datos de los sensores. Vamos a empezar con algo simple: hacer un kick del bombo cuando se presiona el botón.
En primer lugar, tendremos que añadir Timbre.js, y es dependencia, SubCollider.js, a nuestra carpeta ' público/js'. De la raíz de la carpeta del proyecto, ejecutar los siguientes comandos para copiar estos archivos a la carpeta pública javascripts.
mkdir public/js curl http://mohayonao.github.io/timbre.js/timbre.dev.js -o public/js/timbre.dev.js curl https://raw.githubusercontent.com/mohayonao/subcollider.js/master/builds/subcollider.js -o public/js/subcollider.js
Ahora, vamos a actualizar nuestro archivo index.html para incluir Timbre.js y SubCollider. Reemplace el contenido de 'index.html' con el siguiente código.
<html> <script src="https://cdn.socket.io/socket.io-1.3.4.js"></script> <script src="js/timbre.dev.js"></script> <script src="js/subcollider.js"></script> <script src="js/playsounds.js"></script> <body> Hello world! </body> </html>
Usted notará que también estamos importando 'js/playsounds.js', que aún no existe. Playsounds.js será el script que usamos para escuchar nuestros mensajes de zócalo y pasar los datos a Timbre.js. Crear ahora este archivo y agregue el código siguiente.
var BD; T("audio").load("./drumkit.wav", function() { drum = T("lowshelf", {freq:110, gain:8, mul:0.6}, BD).play() BD = this.slice(0, 500).set({bang:false}) }) var socketConnection = io.connect('http://0.0.0.0:8080/soundsocket') socketConnection.on('connect', function () { console.log('connected to socket') }) socketConnection.on('button', function (value) { if (value == 'push') { BD.bang() } }) Tenemos un archivo más, que tenemos que poner a disposición de nuestro script, que es 'drumkit.wav'. Se trata de un archivo de muestra proporcionado por Timbre.js que estamos rebanar hasta conseguir un instrumento de sonido. Ejecute el comando siguiente desde la carpeta del proyecto copiar este archivo a la carpeta pública.
curl http://mohayonao.github.io/timbre.js/misc/audio/drumkit.wav -o public/drumkit.wav
Comprometer a todos los cambios, empuje, luego jale hacia abajo su Edison.
En este punto, debe ser capaz de ejecutar su aplicación, vuelva a cargar la página, subir el volumen y escuchar un tambor bajo retroceso cada vez que presione el botón.
