Write a song in JavaScript

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

1d5ca7d8f17f15de4272e1ec7ef7abac?s=128

Daijirō Wachi

January 14, 2016
Tweet

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