Write a song in JavaScript

Write a song in JavaScript and play it with Audio API. Now you will can share your song as a package.json

Transcript

1. Write a Song
 In JavaScript Daijiro Wachi / @watilde UtrechtJS - 14th Jan, 2016
2. $ whoami Daijiro Wachi / @watilde Relocated here ! from Japan " Lead JS Developer @BoosterMedia Kapsalon
3. I <3 JS and OSS
4. Write a song
 in JavaScript ❓
5. Music Score in a JSer eyes
7. Large application
9. Spaghetti code
10. Less is more
 Simple example
11. Main song data
12. Musical interval Note value
13. Tempo
14. Key
 Time Signature
15. Meta data + Title + Description + Author
16. { “name”: “Super Mario Bros”, “description”: “Main Theme Song”, “author”: “Koji Kondo”, “main”: “Main-Song-Data” } 1 2 3 4 5 6 Music Score is……
17. Main song data
18. Main song data
19. Main song data 8th note
20. Main song data E F# D 8th note
21. Octave number http://sonic-cat.com/
22. Main song data E5 F#4 D4 8th note
23. Main song data E5 F#5 D5 8th note 
 [E5,F#5,D5], 1/8 

24. func([E5, F#5, D5], 1 / 8, 200); // => Convert to Audio and Play it! 1 2 Notes Phonetic
 value Tempo in JavaScript
25. [E5,F#4,D4] => [87, 78, 74] texts => Note Number
26. [87, 78, 74] => 660.7534209026169 370.83531912688807 294.3321878444925 => Audio frequency
27. 60 / tempo * Phonetic value * 44100(sampleRate) Phonetic value => Sine wave length
28. var data = buf.getChannelData(0); for(var i = 0; i < length; i++) { data[i] = Math.sin( (2 * Math.PI) * nn * (i / sampleRate) ); } => Sine wave
29. currentTime += 60 / tempo * Phonetic value Current time++
30. Demo time
31. beeplay({bpm: 50, volume: 0.5}) .play(["E5", "F#4", "D4"], 1/8) .play(["E5", "F#4", "D4"], 1/8) .play(null, 1/8) .play(["E5", "F#4", "D4"], 1/8) .play(null, 1/8) .play(["C5", "F#4", "D4"], 1/8) .play(["E5", "F#4", "D4"], 1/8) .play(null, 1/8) .play(["G5", "B4", "G4"], 1/8) .play(null, 3/8) .play(["G4", "G3"], 1/3, "p"); 1 2 3 4 5 6 7 8 9 10 11 12
32. Enjoy watilde/beeplay on GitHub
33. Coming soon: MAJOR UPDATE
34. beeplay({bpm: 50, volume: 0.5}) .play(["E5", "F#4", "D4"], 1/8) .play(["E5", "F#4", "D4"], 1/8) .play(null, 1/8) .play(["E5", "F#4", "D4"], 1/8); 1 2 3 4 5 Song == JavaScript
35. Remember the score data is…… { “name”: “Super Mario Bros”, “description”: “Main Theme Song”, “author”: “Koji Kondo”, “main”: “Main-Song-Data” } 1 2 3 4 5 6
36. { “name”: “Super Mario Bros”, “description”: “Main Theme Song”, “author”: “Koji Kondo”, “main”: “Main-Song-Data.js” } 1 2 3 4 5 6 We are JSer
37. == package.json
38. $ npm install awesome-song beeplay $ emacs index.js var beeplay = require("beeplay"); var song = require("awesome-song"); beeplay({song: song}); $ node index.js => play music
39. 3 plans 1.Support Node.js w/ the sox 2.Support Johnny-five syntax 3.Generate a scaffolding from package.json
40. Dankjewel