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

by OKUNOKENTARO

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

8FC.VTJDͱ͸

Slide 6

Slide 6 text

8FC.VTJD w 8FC ʢϒϥ΢βʣ ͰԻΛѻ͏ٕज़શମʹ͍ͭͯͷ௨শ w 8FC.VTJDͱ͍͏໊শͷ࢓༷͕ଘࡏ͢ΔΘ͚Ͱ͸ͳ͍ w ओʹɺ ͍͔ͭ͘ͷԻָ ɾ Ի੠΍ؔ࿈ػثΛѻ͏"1*Λࢦ͢

Slide 7

Slide 7 text

8FC.VTJDϋοΧιϯ

Slide 8

Slide 8 text

8FC.VTJDϋοΧιϯ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

8FC.VTJDʹؔ͢Δٕज़ w 8FCඪ४ͷओཁͳ΋ͷͱ ͯ࣍͠ͷͭ w 8FC"VEJP"1* ʢ΢ΣϒΦʔσΟ Φ"1*ʣ w 8FC্ͰԻ੠Λѻ͏ͨΊͷ"1* w 8FC.*%*"1* ʢ΢ΣϒϛσΟ"1*ʣ w 8FC্Ͱ.*%*ϓϩ τίϧΛ੍ޚ͢ΔͨΊͷ"1*

Slide 11

Slide 11 text

8FC.VTJDʹؔ͢Δٕज़ w 8FCඪ४Ͱ͸ͳ͍֤ࣾఏڙͷٕज़ͱ ͯ͠ྫ͑͹ʜ w ϠϚϋגࣜձࣾ70$"-0%6$&3 w ࣗಈ࡞ۂ"1* w גࣜձࣾ/55υίϞEPDPNP%FWFMPQFSTVQQPSU w Ի੠ೝࣝ"1*ɺ Ի੠߹੒"1*ͳͲ

Slide 12

Slide 12 text

ͲΜͳ΋ͷ͕࡞ΕΔ ʁ w εϚʔ τσόΠεͷ܏͖ηϯαʔΛ࢖ָͬͨثͷ։ൃ w ෳ਺ਓ͕ಉ࣌ʹૢ࡞Ͱ͖ΔԻ੍ָ࡞ΞϓϦέʔγϣϯ w ՎࢺΛೖྗͨ͠Βɺ ͦͷՎࢺʹ߹ͬͨۂΛੜ੒ͯ͘͠ΕΔπʔϧ w Իָͱ͸ແؔ܎ͷ*P5σόΠεΛ.*%*ίϯ τϩʔϥʔͰ੍ޚ

Slide 13

Slide 13 text

.*%*ίϯ τϩʔϥʔͱ͸

Slide 14

Slide 14 text

8FC.*%*"1*

Slide 15

Slide 15 text

8FC.*%*"1* w 8$ʹͯ8% ʢ࡞ۀ૲ߘʣ ͱͳ͍ͬͯΔ"1* w ࣮૷ϒϥ΢β͸$ISPNFͷΈ ʢ೥݄࣌఺ʣ w https://www.w3.org/TR/webmidi/ w 51"$"VEJP8(ʹͯ  'JSFGPY͕ରԠΛද໌ w ෳ਺ϒϥ΢βʹΑΔ࣮૷ࣄྫ͕ੜ·ΕΔͷͰ  ࠓޙ$3 ʢקࠂީิʣ ʹਐΉݟࠐΈ

Slide 16

Slide 16 text

.*%*ͱ͸ w .VTJD*OTUSVNFOU%JHJUBM*OUFSGBDF w ిࢠָثͷԋ૗σʔλΛػثؒͰσδλϧసૹ͢ΔͨΊͷੈքڞ௨ن֨ w ೥ʹ·ͱΊΒΕɺ ೥ʹൃද͞Εͨ࢓༷ w ϩʔϥϯ υɺ ϠϚϋɺ ίϧάɺ ΧϫΠͳͲͷ೔ຊࠃ಺ָثϝʔΧʔΛத৺ʹ  ࠃ಺֎ͷָثϝʔΧʔʹΑͬͯࡦఆ w ָثؒͷ௨৴Ҏ֎ʹ΋ɺ ΧϥΦέɺ ίϯαʔ τͷর໌΍ө૾ػثͷ੍ޚʹ΋  ࢖༻͞ΕΔ

Slide 17

Slide 17 text

.*%*ͷ࠷৽ࣄ৘ w 5IF.*%*.BOVGBDUVSFST"TTPDJBUJPO .." ͸  ೥݄ɺ .*%*ن֨ͷେ෯Ξοϓσʔ τͷܭըΛൃද w ԼҐޓ׵ੑΛ࣋ͨͤͭͭɺ Α Γݱ୅తʹɺ ؆୯ʹར༻Ͱ͖ΔΑ ͏ͳ࢓༷ʹ w .."ʹ͸ָثϝʔΧʔΒʹՃ͑ͯ  (PPHMF "QQMFͱ͍ͬͨϒϥ΢βϕϯμʔ΍  "CMFUPO /BUJWF*OTUSVNFOUTͱ͍ͬͨιϑ τ΢ΣΞϝʔΧʔ΋Ճໍ

Slide 18

Slide 18 text

w .*%*ن্֨Ͱ΍Γ ͱ Γ ͞ΕΔσʔλͰ͸ɺ ओʹ.*%*ϝ οηʔδ͕ѻΘΕΔ w .*%*ϝ οηʔδ͸͢΂ͯόΠ τྻͰѻΘΕΔ w ϚʔΫΞοϓݴޠ΍+40/ͷΑ ͏ͳɺ ਓؒʹͱͬͯཧղ͠΍͍͢σʔλͰ͸ͳ͍ w ,CQTγϦΞϧసૹΛ࣮ݱ͢ΔͨΊͷޮ཰ԽΛ࠷༏ઌʹͨ͠ܗࣜ .*%*ϝ οηʔδͱ͸

Slide 19

Slide 19 text

.*%*ϝ οηʔδ௨৴ͷ࢓૊Έ .*%*ίϯ τϩʔϥʔ γϯηαΠβʔ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

8FC.*%*"1*ͷͭͷ੹຿ ઀ଓ͞Ε͍ͯΔ.*%*ೖग़ྗͷ؅ཧ w ෺ཧతͳػث͚ͩͰͳ͘ɺ Ծ૝తͳσόΠεΛؚΊͯ ͦͷೖग़ྗʹର͢Δɺ .*%*ϝ οηʔδͷૹड৴ w .*%*͸ҰछͷΠϕϯ τۦಈͳͷͰ  .*%*ϝ οηʔδΛड৴ͨ͠ͱ͖ඞͣ͠΋ָثΛ໐Β͢ඞཁ͸ͳ͍ w ͜ΕΛ׆༻ͯ͠.*%*ίϯ τϩʔϥʔͰඇԻָͷ*P5σόΠε੍ޚ΋Ͱ͖Δ

Slide 23

Slide 23 text

8FC.*%*"1*ͷ࢖͍ํ

Slide 24

Slide 24 text

.*%*ೖग़ྗσόΠεͷऔಘ w window.navigator.requestMIDIAccess()Λ࢖͏ w Promise͕ฦ٫͞ΕΔ w ඇಉظղܾޙͷ஋ʹ͸.*%*ೖྗݩͷMapͱ.*%*ग़ྗઌͷMapؚ͕·ΕΔ (async () => { const midi = await window.navigator.requestMIDIAccess(); console.log(midi.inputs); console.log(midi.outputs); })();

Slide 25

Slide 25 text

.*%*ग़ྗઌσόΠεͷऔಘ w .*%*ϝ οηʔδͷѼઌͱͳΔ.*%*ग़ྗઌσόΠεΛऔಘ͢Δ w outputsϓϩύςΟ͸Iterableܕͱͳ͍ͬͯΔ w Array.from(midi.outputs.values())[0]ͱ͢Ε͹  ઌ಄ͷ.*%*ग़ྗઌ͕औಘͰ͖Δ

Slide 26

Slide 26 text

.*%*ϝ οηʔδΛૹ৴͢Δ w औಘͨ͠.*%*ग़ྗઌʹ.*%*ϝ οηʔδΛૹ৴͢Δʹ͸  send()ϝ ιο υΛ࢖༻͢Δ (async () => { const midi = await window.navigator.requestMIDIAccess(); const output = Array.from(midi.outputs.values())[0]; output.send([0x90, 0x45, 0x7f]); })();

Slide 27

Slide 27 text

.*%*ϝ οηʔδΛड৴͢Δ (async () => { const midi = await window.navigator.requestMIDIAccess(); const input = Array.from(midi.inputs.values())[0]; input.onmidimessage = midiEvent => { // do something }; })(); w ϒϥ΢βͰड৴͢Δͱ͖͸.*%*ೖྗݩʹରͯ͠  input.onmidimessageϋϯ υϥΛ࢖༻͢Δ

Slide 28

Slide 28 text

w .*%*ϝ οηʔδ͸ଟ͘ͷ৔߹  ϝ οηʔδ͝ͱʹόΠ τ༻͍Δ w 0x90 νϟϯωϧͷԻΛग़ͤ  0x45 ϥͷԻͰ  0x7f ͷڧ͞Ͱ w ৄ͠ ͘͸ ʰ8FC.*%*"1*Λѻ͏ͨΊͷ.*%*جૅ஌ࣝʱ Ͱݕࡧ  https://qiita.com/okunokentaro/items/efaeb1124591e84fe9d3 .*%*ϝ οηʔδͷҙຯ

Slide 29

Slide 29 text

8FC"VEJP"1*

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

ϒϥ΢βͰԻΛѻ͏௿ϨΠϠʔ"1* w ࠓޙɺ 8FC35$ 8FC93ͱ͍ͬͨଞͷ"1*ͱ࿈ܞ͠ɺ   Իʹؔ͢Δ௿ϨΠϠʔΛ୲౰͢Δ"1*ʹͳΔݟࠐΈ w 8FC"TTFNCMZ XBTN ͱ࿈ܞ͢Δ࢓༷ͷࡦఆ༧ఆ ʢਪଌʣ w 6OJUZͳͲͷήʔϜʹ͓͍ͯɺ ϛ υϧ΢ΣΞΛհͣ͞ʹ  ௚઀ωΠςΟ ϒ"1*Λ࢖༻Ͱ͖ΔΑ ͏ʹ͢Δɺ ͳͲ w λάͱͷ࢓༷ࡦఆ໘Ͱͷ࿈ܞ͸ෆे෼ w ࠓޙɺ ԻपΓͷػೳ֦ு͸8FC"VEJP"1*Λલఏʹ͞Εͦ͏ ʢਪଌʣ

Slide 32

Slide 32 text

ϒϥ΢βͰԻ੠ϑΝΠϧΛϩʔ υ͢Δ 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); });

Slide 33

Slide 33 text

8FC"VEJP"1*ͷΠϯλϑΣʔε w 8FC"VEJP"1*Ͱ͸ΧςΰϦɺ ͷΠϯλϑΣʔε͕نఆ͞Ε͍ͯΔ  ͦͷҰ෦Λ঺հ w OscillatorNode  प೾਺Λࢦఆͯ͠೾ܗΛग़ྗɺ γϯηαΠβʔͳͲʹ࢖͏ w BiquadFilterNode  ԻͷՃ޻ʹ࢖༻ɺ άϥϑΟ οΫ ɾ ΠίϥΠβͷ։ൃͳͲʹ΋࢖͏ w PannerNode  ۭؒ಺ͰͷԻͷৼΔ෣͍ΛऔΓѻ͏ɺ 8FC93΍%ήʔϜͳͲͰ࢖༻

Slide 34

Slide 34 text

"VEJP8PSLMFU w 8FC"VEJP"1*͕ఆٛ͢Δඪ४ͷΠϯλϑΣʔεͷ૊Έ߹ΘͤͰ͸  ࣮ݱࠔ೉ͳॲཧʹ͍ͭͯɺ   ௚઀α΢ϯ υσʔλʹΞΫηεͯ͠ԋࢉ͢ΔͨΊͷ࢓૊Έ w ϝΠϯεϨο υͰѻͬͯ͠· ͏ ͱɺ ඳըॲཧΛ݉ͶΔεϨο υͷͨΊ  ൃԻʹ໰୊͕ى͖Δ w ΦʔσΟ Φ༻ͷεϨο υͰಈ࡞͢ΔAudioWorkletΛ࢖༻͢Δ w ͢ͰʹXBTNͱ૊Έ߹ΘͤΔ໠ऀ͕ੈքʹଟ਺

Slide 35

Slide 35 text

%FNP http://g200kg.github.io/WebAudioDesigner/

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

$44Ͱѻ͏Ի੠ͷ֓೦

Slide 39

Slide 39 text

ʻ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()Λ࢖͏ ͜ͱͰ  ཁૉͱ࿈ܞͰ͖Δ

Slide 40

Slide 40 text

4FMFDUPST-FWFMٙࣅΫϥε w 3FTPVSDF4UBUF1TFVEPT w ಈը΍Ի੠ͷ࠶ੜঢ়ଶʹؔ͢ΔٖࣅΫϥεͷ࢓༷ w :playing :paused w 5JNFEJNFOTJPOBM1TFVEPDMBTTFT w ࣌ܥྻΛѻ͏ٖࣅΫϥεͷ࢓༷ w 8FC755 8FC7JEFP5FYU5SBDLT Ͱͷɺ ಡΈ্͛΍ಈըࣈນͰͷར༻Λ૝ఆ w :current :past :future

Slide 41

Slide 41 text

8FC.VTJDͷ͜Ε͔Β w 8FC"VEJP"1*ʹΑΔ  ήʔϜ΍8FC93ʹ͓͚Δ#(.΍ޮՌԻͷදݱɺ 8FC35$ͰͷԻ੠௨৴ w 8FC.*%*"1*ʹΑΔ  ଟ࠼ͳػث੍ޚɺ ԕִૢ࡞ɺ ԋ૗ͷಉظ w ؔ࿈αʔϏε΍αʔ υύʔςΟ"1*ͱͷ࿈ܞͰ  8FCͰͷԻָ͸͞Βʹ͓΋͠Ζ͘ ͳΔ ʂ

Slide 42

Slide 42 text

·ͣ͸༡ΜͰΈͯ ͍ͩ͘͞ 5IBOLZPV