Web Musicでは何ができるのか / Web Music latest information

2bedb1eb8f841cd3c3ae584600b016e0?s=47 OKUNOKENTARO
November 24, 2018

Web Musicでは何ができるのか / Web Music latest information

FRONTEND CONFERENCE 2018の登壇にて使用した資料です。

2bedb1eb8f841cd3c3ae584600b016e0?s=128

OKUNOKENTARO

November 24, 2018
Tweet

Transcript

  1. 8FC.VTJDͰ͸Կ͕Ͱ͖Δͷ͔ /PW '30/5&/%$0/'&3&/$& !PLVOPLFOUBSP

  2. ୭ w Ԟ໺ݡଠ࿠!PLVOPLFOUBSP w ΫϨε΢ΣΞ୅ද w ΞϓϦέʔγϣϯ ɾ ΤϯδχΞ

  3. ԿΛ͢Δਓ w ԻָۀքͰ੍࡞΍ελδΦۈ຿ w ઐ໳ֶߍͰ%5.Պߨࢣ ʢ.*%*ݕఆڃࢿ֨ॴ࣋ʣ  w "OHVMBSΛ༻͍ͨେن໛։ൃͷઃܭ΍ίϯαϧςΟ ϯάͳͲ

    w "OHVMBSϢʔβίϛϡχςΟOHLZPUPͷΦʔΨφΠβ w 8FC.VTJDΛѻ͏αʔϏεͷ্ཱͪ͛ͱ։ൃ
  4. w ԻָۀքͰ੍࡞΍ελδΦۈ຿ w ઐ໳ֶߍͰ%5.Պߨࢣ ʢ.*%*ݕఆڃࢿ֨ॴ࣋ʣ  w "OHVMBSΛ༻͍ͨେن໛։ൃͷઃܭ΍ίϯαϧςΟ ϯάͳͲ w

    "OHVMBSϢʔβίϛϡχςΟOHLZPUPͷΦʔΨφΠβ w 8FC.VTJDΛѻ͏αʔϏεͷ্ཱͪ͛ͱ։ൃ ԿΛ͢Δਓ ࠓ೔͸͜͜ͷ࿩͸͠·ͤΜ
  5. 8FC.VTJDͱ͸

  6. 8FC.VTJD w 8FC ʢϒϥ΢βʣ ͰԻΛѻ͏ٕज़શମʹ͍ͭͯͷ௨শ w 8FC.VTJDͱ͍͏໊শͷ࢓༷͕ଘࡏ͢ΔΘ͚Ͱ͸ͳ͍ w ओʹɺ ͍͔ͭ͘ͷԻָ

    ɾ Ի੠΍ؔ࿈ػثΛѻ͏"1*Λࢦ͢
  7. 8FC.VTJDϋοΧιϯ

  8. 8FC.VTJDϋοΧιϯ

  9. 8FC.VTJDϋοΧιϯ w 8FC.VTJD%FWFMPQFST+1ͱ͍͏։ൃऀίϛϡχςΟ͕ओ࠵ w ෆఆظʹ։࠵ w ".&* ʢҰൠࣾஂ๏ਓԻָిࢠࣄۀڠձʣ ͕ڠࢍ͢Δྫ΋͋Γ w

    8FC.VTJDʹؔ͢Δٕज़Λۦ࢖ͯ͠࡞඼Λ։ൃ͢ΔϋοΧιϯ
  10. 8FC.VTJDʹؔ͢Δٕज़ w 8FCඪ४ͷओཁͳ΋ͷͱ ͯ࣍͠ͷͭ w 8FC"VEJP"1* ʢ΢ΣϒΦʔσΟ Φ"1*ʣ  w

    8FC্ͰԻ੠Λѻ͏ͨΊͷ"1* w 8FC.*%*"1* ʢ΢ΣϒϛσΟ"1*ʣ  w 8FC্Ͱ.*%*ϓϩ τίϧΛ੍ޚ͢ΔͨΊͷ"1*
  11. 8FC.VTJDʹؔ͢Δٕज़ w 8FCඪ४Ͱ͸ͳ͍֤ࣾఏڙͷٕज़ͱ ͯ͠ྫ͑͹ʜ w ϠϚϋגࣜձࣾ70$"-0%6$&3 w ࣗಈ࡞ۂ"1* w גࣜձࣾ/55υίϞEPDPNP%FWFMPQFSTVQQPSU

    w Ի੠ೝࣝ"1*ɺ Ի੠߹੒"1*ͳͲ
  12. ͲΜͳ΋ͷ͕࡞ΕΔ ʁ w εϚʔ τσόΠεͷ܏͖ηϯαʔΛ࢖ָͬͨثͷ։ൃ w ෳ਺ਓ͕ಉ࣌ʹૢ࡞Ͱ͖ΔԻ੍ָ࡞ΞϓϦέʔγϣϯ w ՎࢺΛೖྗͨ͠Βɺ ͦͷՎࢺʹ߹ͬͨۂΛੜ੒ͯ͘͠ΕΔπʔϧ

    w Իָͱ͸ແؔ܎ͷ*P5σόΠεΛ.*%*ίϯ τϩʔϥʔͰ੍ޚ
  13. .*%*ίϯ τϩʔϥʔͱ͸

  14. 8FC.*%*"1*

  15. 8FC.*%*"1* w 8$ʹͯ8% ʢ࡞ۀ૲ߘʣ ͱͳ͍ͬͯΔ"1* w ࣮૷ϒϥ΢β͸$ISPNFͷΈ ʢ೥݄࣌఺ʣ  w

    https://www.w3.org/TR/webmidi/ w 51"$"VEJP8(ʹͯ
 'JSFGPY͕ରԠΛද໌ w ෳ਺ϒϥ΢βʹΑΔ࣮૷ࣄྫ͕ੜ·ΕΔͷͰ
 ࠓޙ$3 ʢקࠂީิʣ ʹਐΉݟࠐΈ
  16. .*%*ͱ͸ w .VTJD*OTUSVNFOU%JHJUBM*OUFSGBDF w ిࢠָثͷԋ૗σʔλΛػثؒͰσδλϧసૹ͢ΔͨΊͷੈքڞ௨ن֨ w ೥ʹ·ͱΊΒΕɺ ೥ʹൃද͞Εͨ࢓༷ w ϩʔϥϯ

    υɺ ϠϚϋɺ ίϧάɺ ΧϫΠͳͲͷ೔ຊࠃ಺ָثϝʔΧʔΛத৺ʹ
 ࠃ಺֎ͷָثϝʔΧʔʹΑͬͯࡦఆ w ָثؒͷ௨৴Ҏ֎ʹ΋ɺ ΧϥΦέɺ ίϯαʔ τͷর໌΍ө૾ػثͷ੍ޚʹ΋
 ࢖༻͞ΕΔ
  17. .*%*ͷ࠷৽ࣄ৘ w 5IF.*%*.BOVGBDUVSFST"TTPDJBUJPO .." ͸
 ೥݄ɺ .*%*ن֨ͷେ෯Ξοϓσʔ τͷܭըΛൃද w ԼҐޓ׵ੑΛ࣋ͨͤͭͭɺ

    Α Γݱ୅తʹɺ ؆୯ʹར༻Ͱ͖ΔΑ ͏ͳ࢓༷ʹ w .."ʹ͸ָثϝʔΧʔΒʹՃ͑ͯ
 (PPHMF "QQMFͱ͍ͬͨϒϥ΢βϕϯμʔ΍
 "CMFUPO /BUJWF*OTUSVNFOUTͱ͍ͬͨιϑ τ΢ΣΞϝʔΧʔ΋Ճໍ
  18. w .*%*ن্֨Ͱ΍Γ ͱ Γ ͞ΕΔσʔλͰ͸ɺ ओʹ.*%*ϝ οηʔδ͕ѻΘΕΔ w .*%*ϝ οηʔδ͸͢΂ͯόΠ

    τྻͰѻΘΕΔ w ϚʔΫΞοϓݴޠ΍+40/ͷΑ ͏ͳɺ ਓؒʹͱͬͯཧղ͠΍͍͢σʔλͰ͸ͳ͍ w ,CQTγϦΞϧసૹΛ࣮ݱ͢ΔͨΊͷޮ཰ԽΛ࠷༏ઌʹͨ͠ܗࣜ .*%*ϝ οηʔδͱ͸
  19. .*%*ϝ οηʔδ௨৴ͷ࢓૊Έ .*%*ίϯ τϩʔϥʔ γϯηαΠβʔ

  20. ʮυͷԻΛͷڧ͞Ͱ໐Βͯ͘͠Ε ʂ ʯ .*%*
 ϝ οηʔδ .*%*ϝ οηʔδ௨৴ͷ࢓૊Έ

  21. .*%*ϝ οηʔδ௨৴ͷ࢓૊Έ ʮ0, ʂ ʯ ̇ ʙ

  22. 8FC.*%*"1*ͷͭͷ੹຿  ઀ଓ͞Ε͍ͯΔ.*%*ೖग़ྗͷ؅ཧ w ෺ཧతͳػث͚ͩͰͳ͘ɺ Ծ૝తͳσόΠεΛؚΊͯ  ͦͷೖग़ྗʹର͢Δɺ .*%*ϝ οηʔδͷૹड৴

    w .*%*͸ҰछͷΠϕϯ τۦಈͳͷͰ
 .*%*ϝ οηʔδΛड৴ͨ͠ͱ͖ඞͣ͠΋ָثΛ໐Β͢ඞཁ͸ͳ͍ w ͜ΕΛ׆༻ͯ͠.*%*ίϯ τϩʔϥʔͰඇԻָͷ*P5σόΠε੍ޚ΋Ͱ͖Δ
  23. 8FC.*%*"1*ͷ࢖͍ํ

  24. .*%*ೖग़ྗσόΠεͷऔಘ w window.navigator.requestMIDIAccess()Λ࢖͏ w Promise͕ฦ٫͞ΕΔ w ඇಉظղܾޙͷ஋ʹ͸.*%*ೖྗݩͷMapͱ.*%*ग़ྗઌͷMapؚ͕·ΕΔ (async () =>

    { const midi = await window.navigator.requestMIDIAccess(); console.log(midi.inputs); console.log(midi.outputs); })();
  25. .*%*ग़ྗઌσόΠεͷऔಘ w .*%*ϝ οηʔδͷѼઌͱͳΔ.*%*ग़ྗઌσόΠεΛऔಘ͢Δ w outputsϓϩύςΟ͸Iterableܕͱͳ͍ͬͯΔ w Array.from(midi.outputs.values())[0]ͱ͢Ε͹
 ઌ಄ͷ.*%*ग़ྗઌ͕औಘͰ͖Δ

  26. .*%*ϝ οηʔδΛૹ৴͢Δ w औಘͨ͠.*%*ग़ྗઌʹ.*%*ϝ οηʔδΛૹ৴͢Δʹ͸
 send()ϝ ιο υΛ࢖༻͢Δ (async ()

    => { const midi = await window.navigator.requestMIDIAccess(); const output = Array.from(midi.outputs.values())[0]; output.send([0x90, 0x45, 0x7f]); })();
  27. .*%*ϝ οηʔδΛड৴͢Δ (async () => { const midi = await

    window.navigator.requestMIDIAccess(); const input = Array.from(midi.inputs.values())[0]; input.onmidimessage = midiEvent => { // do something }; })(); w ϒϥ΢βͰड৴͢Δͱ͖͸.*%*ೖྗݩʹରͯ͠
 input.onmidimessageϋϯ υϥΛ࢖༻͢Δ
  28. w .*%*ϝ οηʔδ͸ଟ͘ͷ৔߹
 ϝ οηʔδ͝ͱʹόΠ τ༻͍Δ w 0x90 νϟϯωϧͷԻΛग़ͤ
 0x45

    ϥͷԻͰ
 0x7f ͷڧ͞Ͱ w ৄ͠ ͘͸ ʰ8FC.*%*"1*Λѻ͏ͨΊͷ.*%*جૅ஌ࣝʱ Ͱݕࡧ
 https://qiita.com/okunokentaro/items/efaeb1124591e84fe9d3 .*%*ϝ οηʔδͷҙຯ
  29. 8FC"VEJP"1*

  30. 8FC"VEJP"1* w 8$ʹͯ$3 ʢקࠂީิʣ ͱͳ͍ͬͯΔ"1* w Ϟμϯϒϥ΢βͷશ͕࣮ͯ૷ w https://www.w3.org/TR/webaudio/ w

    3&$ ʢקࠂʣ ʹ޲͚ͯͷ࡞ۀ͕ଓ͘
  31. ϒϥ΢βͰԻΛѻ͏௿ϨΠϠʔ"1* w ࠓޙɺ 8FC35$ 8FC93ͱ͍ͬͨଞͷ"1*ͱ࿈ܞ͠ɺ 
 Իʹؔ͢Δ௿ϨΠϠʔΛ୲౰͢Δ"1*ʹͳΔݟࠐΈ w 8FC"TTFNCMZ XBTN

    ͱ࿈ܞ͢Δ࢓༷ͷࡦఆ༧ఆ ʢਪଌʣ  w 6OJUZͳͲͷήʔϜʹ͓͍ͯɺ ϛ υϧ΢ΣΞΛհͣ͞ʹ
 ௚઀ωΠςΟ ϒ"1*Λ࢖༻Ͱ͖ΔΑ ͏ʹ͢Δɺ ͳͲ w <audio>λάͱͷ࢓༷ࡦఆ໘Ͱͷ࿈ܞ͸ෆे෼ w ࠓޙɺ ԻपΓͷػೳ֦ு͸8FC"VEJP"1*Λલఏʹ͞Εͦ͏ ʢਪଌʣ
  32. ϒϥ΢βͰԻ੠ϑΝΠϧΛϩʔ υ͢Δ const reader = new FileReader(); const audioCtx =

    new AudioContext(); // Web Audio API reader.onload = async readEvent => { const arrayBuffer = readEvent.target.result; const audio = await audioCtx.decodeAudioData(arrayBuffer); console.log(audio); }; window.addEventListener('drop', dragEvent => { const file = dragEvent.dataTransfer.files[0]; reader.readAsArrayBuffer(file); });
  33. 8FC"VEJP"1*ͷΠϯλϑΣʔε w 8FC"VEJP"1*Ͱ͸ΧςΰϦɺ ͷΠϯλϑΣʔε͕نఆ͞Ε͍ͯΔ
 ͦͷҰ෦Λ঺հ w OscillatorNode
 प೾਺Λࢦఆͯ͠೾ܗΛग़ྗɺ γϯηαΠβʔͳͲʹ࢖͏ w

    BiquadFilterNode
 ԻͷՃ޻ʹ࢖༻ɺ άϥϑΟ οΫ ɾ ΠίϥΠβͷ։ൃͳͲʹ΋࢖͏ w PannerNode
 ۭؒ಺ͰͷԻͷৼΔ෣͍ΛऔΓѻ͏ɺ 8FC93΍%ήʔϜͳͲͰ࢖༻
  34. "VEJP8PSLMFU w 8FC"VEJP"1*͕ఆٛ͢Δඪ४ͷΠϯλϑΣʔεͷ૊Έ߹ΘͤͰ͸
 ࣮ݱࠔ೉ͳॲཧʹ͍ͭͯɺ 
 ௚઀α΢ϯ υσʔλʹΞΫηεͯ͠ԋࢉ͢ΔͨΊͷ࢓૊Έ w ϝΠϯεϨο υͰѻͬͯ͠·

    ͏ ͱɺ ඳըॲཧΛ݉ͶΔεϨο υͷͨΊ
 ൃԻʹ໰୊͕ى͖Δ w ΦʔσΟ Φ༻ͷεϨο υͰಈ࡞͢ΔAudioWorkletΛ࢖༻͢Δ w ͢ͰʹXBTNͱ૊Έ߹ΘͤΔ໠ऀ͕ੈքʹଟ਺
  35. %FNP http://g200kg.github.io/WebAudioDesigner/

  36. 8FC.*%*"1*
 ͱ
 8FC"VEJP"1*

  37. %FNP http://ryoyakawai.github.io/x-webmidi/src/hx_webmidi_01.html
 https://korilakkuma.github.io/X-Sound/

  38. $44Ͱѻ͏Ի੠ͷ֓೦

  39. ʻBVEJPʼཁૉͱͷ࿈ܞ const audioCtx = new AudioContext(); const audioEl = document.querySelector('audio');

    const filter = audioCtx.createBiquadFilter(); const mediaSourceNode = audioCtx.createMediaElementSource(audioEl); mediaSourceNode.connect(filter); filter.connect(audioCtx.destination); w createMediaElementSource()Λ࢖͏ ͜ͱͰ
 <audio>ཁૉͱ࿈ܞͰ͖Δ
  40. 4FMFDUPST-FWFMٙࣅΫϥε w 3FTPVSDF4UBUF1TFVEPT w ಈը΍Ի੠ͷ࠶ੜঢ়ଶʹؔ͢ΔٖࣅΫϥεͷ࢓༷ w :playing :paused w 5JNFEJNFOTJPOBM1TFVEPDMBTTFT

    w ࣌ܥྻΛѻ͏ٖࣅΫϥεͷ࢓༷ w 8FC755 8FC7JEFP5FYU5SBDLT Ͱͷɺ ಡΈ্͛΍ಈըࣈນͰͷར༻Λ૝ఆ w :current :past :future
  41. 8FC.VTJDͷ͜Ε͔Β w 8FC"VEJP"1*ʹΑΔ
 ήʔϜ΍8FC93ʹ͓͚Δ#(.΍ޮՌԻͷදݱɺ 8FC35$ͰͷԻ੠௨৴ w 8FC.*%*"1*ʹΑΔ
 ଟ࠼ͳػث੍ޚɺ ԕִૢ࡞ɺ ԋ૗ͷಉظ

    w ؔ࿈αʔϏε΍αʔ υύʔςΟ"1*ͱͷ࿈ܞͰ
 8FCͰͷԻָ͸͞Βʹ͓΋͠Ζ͘ ͳΔ ʂ
  42. ·ͣ͸༡ΜͰΈͯ ͍ͩ͘͞ 5IBOLZPV