Étape 7: Faire du bruit avec Timbre.js
Maintenant que nous avons près de rétroaction en temps réel du bouton presses étant envoyé sur un socket web à notre navigateur, nous sommes prêts à faire que de la musique. Nous allons utiliser une bibliothèque appelée Timbre.js pour manipuler les sons avec nos données du capteur. Commençons par quelque chose de simple : faire un coup de pied de grosse caisse lorsque le bouton est enfoncé.
Tout d’abord, nous devrons ajouter Timbre.js, et il est dépendance, SubCollider.js, dans notre dossier « public/js ». De la racine de votre dossier de projet, exécutez les commandes suivantes pour copier ces fichiers dans votre dossier public 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
Maintenant, nous allons mettre à jour notre fichier index.html pour inclure Timbre.js et SubCollider. Remplacez le contenu de « index.html » avec le code suivant.
<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>
Vous remarquerez que nous importons aussi « js/playsounds.js », qui n’existe pas encore. PlaySounds.js sera le script que nous utilisons pour écouter nos messages de socket et de transmettre ces données à Timbre.js. Créez ce fichier maintenant et ajoutez le code suivant.
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() } }) Nous avons un seul fichier plus, que nous devons mettre à la disposition de notre script, qui est « drumkit.wav ». Il s’agit d’un exemple de fichier fourni par Timbre.js que nous sommes trancher pour obtenir un instrument sonore. Exécutez la commande suivante à partir de votre dossier de projet pour copier ce fichier dans votre dossier public.
curl http://mohayonao.github.io/timbre.js/misc/audio/drumkit.wav -o public/drumkit.wav
Commettre toutes vos modifications, appuyez sur, puis tirez vers le bas votre Edison.
À ce stade, vous devriez être en mesure d’exécuter votre application, rechargez la page, augmentez le volume et entendre un tambour bass coup chaque fois que vous appuyez sur le bouton.
