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

6. None

7. Large application

8. None

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