Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Daijiro Wachi

January 14, 2016
Tweet

More Decks by Daijiro Wachi

Other Decks in Technology

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