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

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

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

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

Want more?

Transcript