p5.jsでHTML5を使って簡単に音楽アプリを作ろう

 p5.jsでHTML5を使って簡単に音楽アプリを作ろう

2016 HTML5 カンファレンス LT

Edf8a6f885ce049d71c7a957865c5643?s=128

FirstFourNotes,LLC

September 03, 2016
Tweet

Transcript

  1.  )5.-$0/'&3&/$& 'JSTU'PVS/PUFT --$ QKTͰ)5.-Λ࢖ͬͯ ؆୯ʹԻָΞϓϦΛ࡞Ζ͏

  2. ձࣾ঺հ ԻָΛԋ૗͢Δਓɺௌ͘ਓ͕࢖͑ΔΑ͏ͳָ͍͠αʔϏεΛ։ൃதɻ ۙ೔ϦϦʔε༧ఆɻ 'JSTU'PVS/PUFT --$ IUUQGJSTUGPVSOPUFTDPN

  3. ձࣾ঺հ ελʔτΞοϓ΁ͷ ٕज़ίϯαϧˍٕज़ࢧԉ ͳͲ΋͍ͯ͠·͢ɻ

  4. ϝϯόʔ঺հ̍ ϑΫγϟνϣʔ αʔόʔαΠυɾΠϯϑϥ୲౰ "84 ("& EPDLFS΋Ζ΋Ζ ອըɺΠϥετɺσβΠϯ ౦༸ܦࡁΦϯϥΠϯͰ ΤϯδχΞ͋Δ͋Δ̐ίϚອը ࿈ࡌͯ͠·͢ʂ

    ΅΁΅΁ IUUQUPZPLFJ[BJOFUDBUFHPSZEJBSZ
  5. ϝϯόʔ঺հ̎ γϟνϣʔ ిࢠ޻࡞͔ΒϑϩϯτΤϯυ։ ൃɺϩϘοτΞϓϦ·Ͱ୲౰ ࣥචɺ຋༁ɺେֶͰڭ͑ͨΓ͠ ͯ·͢ QKTͷຊࣥච͠·ͨ͠ʂ ༝୩ ఩෉ IUUQTXXXBNB[PODPKQEQ

  6. QKTͱ͸ʁ ▪ +BWB4DSJQUͰը૾΍ΞχϝʔγϣϯͳͲΛ؆୯ʹ࢖͑Δ Α͏ʹͨ͠ϑϨʔϜϫʔΫ ▪ ಈըɾԻͳͲ΋ѻ͑·͢ ▪ ࡞ͬͨ΋ͷ͸8FCϒϥ΢βͰಈ͖·͢ ▪ IUUQPUPSPOFUQMBOLT

    1SPDFTTJOHʢϓϩηογϯάʣ͕ϕʔε 1SPDFTTJOHͱ͸ɺσβΠφ΍ΞʔςΟετ޲͚ ʹ։ൃ͞Εͨϓϩάϥϛϯάݴޠ QKTͰ͸ɺ1SPDFTTJOHҎ্ͷ֦ு͕͞Ε͍ͯ ͯɺ)5.-ͱ+BWB4DSJQU͕Մೳʹ͢Δػೳͷ΄ ͱΜͲ͕ѻ͑·͢
  7. QKTͱ)5.- ▪ )5.-ͷػೳΛϥοϓͯ͠ɺ΍͘͞͠࢖͑ΔΑ͏ʹ͍ͯ͠Δ – Πϕϯτͳ͠ͰϚ΢ε΍λονύωϧ͕ѻ͑Δ – ͓·͡ͳ͍ͳ͠ʹΧϝϥ΍ϚΠΫΛ࢖͑Δ – ΞχϝʔγϣϯͷϨϯμϦϯάϧʔϓ͕༻ҙ͞Ε͍ͯΔ QKTͷओͳػೳ

    ରԠ͢Δ)5.-ͷػೳ %άϥϑΟοΫε $BOWBT Ξχϝʔγϣϯ ʵ ΦʔσΟΦ 8FC "VEJP"1* ಈը 7JEFPཁૉ Χϝϥ 6TFS .FEJB %0.ૢ࡞ %0.ૢ࡞ εϚʔτϑΥϯʢ޲͖ɺՃ଎౓ɺճసʣ %FWJDF"1*ͷҰ෦ 8FC"1*ͷݺͼग़͠ 9.-)UUQ3FRVFTU Ի੠߹੒ɺೝࣝ $POUSJCVUFE 8FC4QFFDI "1* εϓϥΠτ $POUSJCVUFE ʵ "SEVJOP࿈ܞ $POUSJCVUFE ʵ
  8. σϞΞϓϦ σδλϧϋϯυϕϧ

  9. σϞ

  10. ΞϓϦͷߏ଄ ▪ ΦʔσΟΦͱεϚϗΛ࢖ͬͨσϞΞϓϦ ΦγϨʔλʔ USJ0TD Τϯϕϩʔϓ FOW λονύωϧ εϚϗΛৼΔ 音階設定

    スタート triOsc = new p5.Oscillator("triangle"); triOsc.amp(env); triOsc.start(); env = new p5.Env(); env.setADSR(attackTime, decayTime, susPercent, releaseTime); env.setRange(attackLevel, releaseLevel); function touchStarted() { keys.forEach(function(k) { if (!found && dist(x, y, k.x, k.y) < k.radius) { triOsc.freq(midiToFreq(one_oct_midi_note[k.note])); } ); } function deviceShaken() { env.play(triOsc); }
  11. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ ΅΁΅΁-*/&ελϯϓ͋Γ·͢