Write a song in JavaScript

Slide 1

Slide 1 text

Write a Song  In JavaScript Daijiro Wachi / @watilde UtrechtJS - 14th Jan, 2016

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

I <3 JS and OSS

Slide 4

Slide 4 text

Write a song  in JavaScript ❓

Slide 5

Slide 5 text

Music Score in a JSer eyes

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Large application

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Spaghetti code

Slide 10

Slide 10 text

Less is more  Simple example

Slide 11

Slide 11 text

Main song data

Slide 12

Slide 12 text

Musical interval Note value

Slide 13

Slide 13 text

Tempo

Slide 14

Slide 14 text

Key  Time Signature

Slide 15

Slide 15 text

Meta data + Title + Description + Author

Slide 16

Slide 16 text

{ “name”: “Super Mario Bros”, “description”: “Main Theme Song”, “author”: “Koji Kondo”, “main”: “Main-Song-Data” } 1 2 3 4 5 6 Music Score is……

Slide 17

Slide 17 text

Main song data

Slide 18

Slide 18 text

Main song data

Slide 19

Slide 19 text

Main song data 8th note

Slide 20

Slide 20 text

Main song data E F# D 8th note

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Main song data E5 F#4 D4 8th note

Slide 23

Slide 23 text

Main song data E5 F#5 D5 8th note   [E5,F#5,D5], 1/8  

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

var data = buf.getChannelData(0); for(var i = 0; i < length; i++) { data[i] = Math.sin( (2 * Math.PI) * nn * (i / sampleRate) ); } => Sine wave

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Demo time

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Enjoy watilde/beeplay on GitHub

Slide 33

Slide 33 text

Coming soon: MAJOR UPDATE

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

{ “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

Slide 37

Slide 37 text

== package.json

Slide 38

Slide 38 text

$ 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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Dankjewel