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
   

   View Slide

2. $ whoami
   Daijiro Wachi / @watilde
   Relocated here ! from Japan "
   Lead JS Developer @BoosterMedia
   Kapsalon
   

   View Slide

3. I <3 JS and OSS
   

   View Slide

4. Write a song

   in JavaScript
   ❓
   

   View Slide

5. Music Score
   in a JSer eyes
   

   View Slide

6. View Slide

7. 
   Large
   application
   

   View Slide

8. View Slide

9. 
   Spaghetti
   code
   

   View Slide

10. Less is more

    Simple example
    

    View Slide

11. Main song data
    

    View Slide

12. Musical interval
    Note value
    

    View Slide

13. Tempo
    

    View Slide

14. Key

    Time Signature
    

    View Slide

15. Meta data
    + Title
    + Description
    + Author
    

    View Slide

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……
    

    View Slide

17. Main song data
    

    View Slide

18. Main song data
    

    View Slide

19. Main song data
    8th note
    

    View Slide

20. Main song data
    E
    F#
    D
    8th note
    

    View Slide

21. Octave number
    http://sonic-cat.com/
    

    View Slide

22. Main song data
    E5
    F#4
    D4
    8th note
    

    View Slide

23. Main song data
    E5
    F#5
    D5
    8th note
    

    [E5,F#5,D5], 1/8 

    

    View Slide

24. func([E5, F#5, D5], 1 / 8, 200);
    // => Convert to Audio and Play it!
    1
    2
    Notes
    Phonetic

    value Tempo
    in JavaScript
    

    View Slide

25. [E5,F#4,D4] => [87, 78, 74]
    texts => Note Number
    

    View Slide

26. [87, 78, 74] =>
    660.7534209026169
    370.83531912688807
    294.3321878444925
    => Audio frequency
    

    View Slide

27. 60 / tempo
    * Phonetic value
    * 44100(sampleRate)
    Phonetic value
    => Sine wave length
    

    View Slide

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
    

    View Slide

29. currentTime +=
    60 / tempo * Phonetic value
    Current time++
    

    View Slide

30. Demo time
    

    View Slide

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
    

    View Slide

32. Enjoy
    watilde/beeplay on GitHub
    

    View Slide

33. Coming soon:
    MAJOR UPDATE
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

37. == package.json
    

    View Slide

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
    

    View Slide

39. 3 plans
    1.Support Node.js w/ the sox
    2.Support Johnny-five syntax
    3.Generate a scaffolding from
    package.json
    

    View Slide

40. Dankjewel
    

    View Slide