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

2016 HTML5 カンファレンス　LT

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 8FC
   4QFFDI "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. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ ΅΁΅΁-*/&ελϯϓ͋Γ·͢