Stap 7: Maken lawaai met Timbre.js
Nu dat we in de buurt van real-time feedback van knop indrukt wordt verzonden via een web-socket naar onze browser, we zijn klaar om te zetten die in sommige muziek. We gaan gebruiken van een bibliotheek genoemd Timbre.js voor het bewerken van geluiden met onze sensorgegevens. Laten we beginnen met iets simpels: maken van een grote trom kick wanneer de knop wordt gedrukt.
Eerst zullen we moeten toevoegen Timbre.js, en het is afhankelijkheid, SubCollider.js, naar onze ' publiek/js'-map. In de hoofdmap van uw projectmap, voer de volgende opdrachten om deze bestanden te kopiëren naar de map openbare 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
Nu, laten we werken onze index.html bestand tot Timbre.js en SubCollider. De inhoud van 'index.html' vervangen door de volgende code.
<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>
U zult merken dat we ook importeert 'js/playsounds.js', die nog niet bestaat. Playsounds.js zullen het script die we gebruiken om te luisteren naar onze socket-berichten en die gegevens doorgeven aan Timbre.js. Maak dit bestand nu, en voeg de volgende code.
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() } }) We hebben een meer bestand dat we nodig beschikbaar te stellen aan onze script, dat is 'drumkit.wav'. Dit is een voorbeeldbestand geboden door Timbre.js dat we zijn snijden omhoog om een instrument geluid. Voer de volgende opdracht uit uw projectmap Kopieer dit bestand naar de map ' publiek '.
curl http://mohayonao.github.io/timbre.js/misc/audio/drumkit.wav -o public/drumkit.wav
Plegen van al uw wijzigingen, duwen, dan pull-down op uw Edison.
Op dit punt, moet u zitten kundig voor stormloop uw app, reload naar de pagina, het volume en een bass drum kick telkens als u op de knop horen.
