web-audio-test-api

Transcript

1. ΢ΣϒΦʔσΟΦ΋ ςετ͍ͨ͠ @mohayonao / Kyoto.js #12
2. @mohayonao • Web Audio APIΛීஈ࢖͍͢Δਓ • ڭ͑ͨΓɺ࡞඼੍࡞Λख఻ͬͨΓ • https://mohayonao.github.io
3. Web Audio API͸ ςετ͠ʹ͍͘
4. ฉ͍ͯςετ • ϒϥ΢βͷίϯιʔϧͰखಈςετ • ୯ମςετ͠΍͍͢ઃܭʢؔ਺Խ / ΫϥεԽʣ • ςετ༻ͷؔ਺Λ window ʹఆٛ͢Δ
5. ฉ͍ͯςετɿίʔυྫ function beep(destination, playbackTime) { const t0 = playbackTime; const t1 = t0 + 0.025; const audioContext = destination.context; const oscillator = audioContext.createOscillator(); const gain = audioContext.createGain(); oscillator.frequency.value = 3520; oscillator.start(t0); oscillator.stop(t1); oscillator.connect(gain); gain.gain.value = 0.1; gain.connect(destination); } window.beepTest = () => { beep(audioContext.destination, audioContext.currentTime); };
6. ฉ͍ͯςετɿςετ߲໨ • ࢥͬͨײ͡ͷԻͳͷ͔ → ड͚ೖΕςετ • ύϥϝʔλ͕ద༻͞ΕΔ͔ → ݁߹ςετ • Τϥʔͳ͘ಈ࡞͢Δ͔ → Ϣχοτςετ
7. ฉ͍ͯςετɿςετछผ • ࢥͬͨײ͡ͷԻͳͷ͔ → ड͚ೖΕςετ • ύϥϝʔλ͕ద༻͞ΕΔ͔ → ݁߹ςετ • Τϥʔͳ͘ಈ࡞͢Δ͔ → Ϣχοτςετ
8. ࣗಈԽ͕Ή͔͍ͣ͠ςετ߲໨ • ࢥͬͨײ͡ͷԻͳͷ͔ → ड͚ೖΕςετ • ύϥϝʔλ͕ద༻͞ΕΔ͔ → ݁߹ςετ • Τϥʔͳ͘ಈ࡞͢Δ͔ → Ϣχοτςετ
9. ࣗಈԽͰ͖ͦ͏ͳςετ߲໨ • ࢥͬͨײ͡ͷԻͳͷ͔ → ड͚ೖΕςετ • ύϥϝʔλ͕ద༻͞ΕΔ͔ → ݁߹ςετ • Τϥʔͳ͘ಈ࡞͢Δ͔ → Ϣχοτςετ
10. CIͰςετ͍ͨ͠
11. CIͰςετ͍ͨ͠ɿํ๏ • ϨϯμϦϯάͨ݁͠ՌΛςετ͢Δ • ೾ܗΛൺֱ͢Δ • Ի੠Λղੳͯ͠ಛ௃Λൺֱ͢Δ • APIΛਖ਼͘͠࢖͍͑ͯΔ͔Λςετ͢Δ
12. ϨϯμϦϯά݁ՌΛςετʁ • ͦ͢͝͏ • ਖ਼ղΛఆٛ͢Δͷ͸Ή͔͍ͣ͠ • ਖ਼ղͦͷ΋ͷ͕͋ΔͳΒͦΕΛ࢖͑͹ྑ͍ • ݫີͳςετ → ࡉ͔ͳௐ੔͕΍Γʹ͘͘ͳΔ • େࡶ೺ͳςετ → ҙຯ͋Δʁ
13. ͦ΋ͦ΋ දݱʹؔ͢Δ෦෼Λ CIͷର৅ʹ͢Δͷ͸ྑ͘ͳ͍
14. APIΛਖ਼͘͠࢖͍͑ͯΔ͔Λ ςετ͢Δ
15. ਖ਼͘͠࢖͍͑ͯΔ͔ • Τϥʔͳ͘ಈ࡞͢Δ • ͓͔͠ͳૢ࡞Λ͍ͯ͠ͳ͍ • ݹ͍APIΛ࢖͍ͬͯͳ͍ • ಺෦ঢ়ଶ͸ࢥͬͨ௨Γʹͳ͍ͬͯΔͷ͔
16. ͜ͷఔ౓ͳΒ Web Audio APIΛ ΤϛϡϨʔτ͢Ε͹Ͱ͖ͦ͏
17. 3೥͘Β͍લʹͭͬͨ͘
18. web-audio-test-api https://github.com/mohayonao/web-audio-test-api
19. web-audio-test-api • ಈతܕνΣοΫ • ΦʔσΟΦάϥϑͷςετ • ಺෦ঢ়ଶͷςετ
20. web-audio-test-api (2016) • ಈతܕνΣοΫ • ΦʔσΟΦάϥϑͷςετ • ಺෦ঢ়ଶͷςετ • ϒϥ΢βؒͷࠩҟΛදݱͰ͖ͳ͔ͬͨ • ৽͍͠࢓༷ʹରԠͰ͖ͳ͔ͬͨ • ͦ΋ͦ΋࢖͍উख͕ΘΔ͍
21. ͭ͘Γͳ͓͠ (2017/01/09-)
22. web-audio-test-api-2 https://github.com/mohayonao/web-audio-test-api-2
23. web-audio-test-api-2 • ϒϥ΢βؒͷ࣮૷ঢ়گͷࠩҟΛ࠶ݱ • ಈతܕνΣοΫ • Deprecated APIͷνΣοΫ • ʢ༧ఆʣΦʔσΟΦάϥϑͷςετ • ʢ༧ఆʣ಺෦ঢ়ଶͷςετ • ʢ༧ఆʣϕετϓϥΫςΟεͷఏڙ
24. ϒϥ΢β͝ͱͷ࣮૷ঢ়گʹ ΋ͱ͍ͮͯAPIΛੜ੒Ͱ͖Δ
25. ϒϥ΢βؒͷ࣮૷ঢ়گͷࠩҟ • ఏڙ͞Ε͍ͯΔϝιου΍ϓϩύςΟ͕ҧ͏ • ΫϥεπϦʔ͕ҧ͏ • ໭Γ஋͕ҧ͏ • ϝιουͷΦʔόʔϩʔυ͕ҧ͏
26. Chrome 55Λ࠶ݱ require("web-audio-test-api").createAPI("chrome:55").install(); const audioContext = new AudioContext(); const oscillator = new OscillatorNode( audioContext, { frequency: 880 } ); const gain = new GainNode( audioContext, { gain: 0.25 } ); oscilator.start(audioContext.currentTime); oscillator.connect(gain).connect(audioContext.destination);
27. Chrome 55Λ࠶ݱ • ৽͍͠API͕࢖͑Δ • ΫϥεπϦʔͷมߋ • new OscillatorNode(audioContext) ͱ͔ • connect chain ͕࢖͑Δ • ͳͲ
28. Safari 10Λ࠶ݱ require("web-audio-test-api").createAPI("safari:10").install(); const audioContext = new webkitAudioContext(); const oscillator = audioContext.createOscillator(); const gain = audioContext.createGain(); oscillator.frequency.value = 880; oscillator.start(audioContext.currentTime); oscillator.connect(gain); gain.gain.value = 0.25; gain.connect(audioContext.destination);
29. Safari 10Λ࠶ݱ • ݹ͍API͕࢒͍ͬͯΔ • ৽͍͠API͕શવ࢖͑ͳ͍
30. Ͳͷϒϥ΢βͰಈ͔͘ςετ [ "chrome", "firefox", "edge", "safari" ].forEach((name) => { const api = WebAudioTestAPI.createAPI(name); try { api.install(); do_test(); } finally { api.uninsall(); } });
31. Ͳͷϒϥ΢βͰಈ͔͘ςετ • ࢖͏ػೳͷؔ܎Ͱಈ࡞ର৅ϒϥ΢βΛ
 ݶఆ͢ΔͳΒɺͱΓ͋͑ͣଞͷϒϥ΢βͰ࣮ߦ Ͱ͖ͳͯ͘΋ྑ͍ • ࣮ࡍʹςετ͢Δͱ͖͸ੜ੒͢ΔAPI͝ͱʹ
 ผϓϩηεͰ·ͬ͞Βͷঢ়ଶͰ΍Δͷ͕ྑ͍ • ࣮ࡍͷͱ͜Ζ Safari Ͱಈ͚͹ଞͷ؀ڥͰ΋ಈ͘
32. ·ͱΊ • Իͦͷ΋ͷΛࣗಈςετ͢Δͷ͸ྑ͘ͳ͍ • ςετͱͯ͠هड़͠ʹ͍͘ • Իͷௐ੔ͳͲ͕΍Γʹ͘͘ͳΔ • खಈςετ͕༗ޮ • ਖ਼͘͠APIΛ࢖͏͜ͱ͸࣮͸Ή͔͍ͣ͠ • ͚ͩ͜͜Λςετͯ͠΋·͋·͋ޮՌ͕͋Δ
33. ҎԼ͸Լॻ͖ʹ͸͚͋ͬͨͲ ௕͘ͳΓͦ͏ͳͷͰ LT࣌ͷεϥΠυ͔Βল͍ͨ web-audio-test-api-2ͷ
 ࣮૷ͷઆ໌Ͱ͢
34. ϒϥ΢βؒͷ࣮૷ঢ়گͷࠩҟ • ఏڙ͞Ε͍ͯΔϝιου΍ϓϩύςΟ͕ҧ͏ • ΫϥεπϦʔ͕ҧ͏ • ໭Γ஋͕ҧ͏ • ϝιουͷΦʔόʔϩʔυ͕ҧ͏
35. ࣮૷ͷҧ͍Λௐࠪ͢Δ
36. web-audio-api-spec-checker https://github.com/mohayonao/web-audio-api-spec-checker
37. ࣮૷ͷҧ͍ΛJSONԽ { "/BaseAudioContext": { "global": false, "protected": true }, "/BaseAudioContext/createBuffer": {}, "/BaseAudioContext/createIIRFilter": {}, "/BaseAudioContext/decodeAudioData": { "promise": true } } { "/AudioContext": { "global": "webkitAudioContext" }, "/AudioContext/createBuffer": { "mixToMono": true }, "/AudioContext/createJavaScriptNode": {}, "/AudioContext/decodeAudioData": {} } Safari 10 Chrome 55
38. JSONΛݩʹAPIΛಈతੜ੒ • ΫϥεΛಈతʹੜ੒͢Δ • εʔύʔΫϥε͸ͦͷ࣌ʹࢦఆ͢Δ • ܧঝؔ܎ʹͳ͍ϝιου͸ϛοΫεΠϯ • ෆཁͳϝιου͸ϓϩτλΠϓ͔Β࡟আ
39. Ϋϥεੜ੒
40. εʔύʔΫϥε͸Ҿ਺Ͱ౉͢ function create(api, BaseAudioContext) { class AudioContext extends BaseAudioContext { getOutputTimestamp() { return { contextTime: 0, performanceTime: 0 }; } createJavaScriptNode(...args) { return new api.ScriptProcessorNode(this, ...args); } } return AudioContext; }
41. ͍Βͳ͍ͷ͸ޙͰফ͢ function create(api, BaseAudioContext) { class AudioContext extends BaseAudioContext { getOutputTimestamp() { return { contextTime: 0, performanceTime: 0 }; } createJavaScriptNode(...args) { return new api.ScriptProcessorNode(this, ...args); } } return AudioContext; } const AudioContext = create(api, BaseAudioContext); delete AudioContext.prototype["createJavaScriptProcessor"];
42. ಈతܕνΣοΫ
43. ಈతܕνΣοΫ • JSDocͰܕ৘ใΛهड़͢Δ • BabelϓϥάΠϯͰΞαʔγϣϯΛ௥Ճ • ΞΠσΞͷݩʹͳͬͨϥΠϒϥϦ • https://github.com/azu/jsdoc-to-assert
44. ಈతܕνΣοΫɿJSDocͰॻ͘ function create(api, BaseObject) { class AudioBuffer extends BaseObject { /** * @param {integer} channel * @return {Float32Array} */ getChannelData(channel) { void(this, channel); return new Float32Array(this.length); } } return AudioBuffer; }
45. ಈతܕνΣοΫɿBabelͰม׵ function create(api, BaseObject) { class AudioBuffer extends BaseObject { getChannelData(channel) { if (typeof api.typecheck === "function") { api.typecheck( "/AudioBuffer/getChannelData", "integer", channel, "channel" ); } void(this, channel); return new Float32Array(this.length); } } return AudioBuffer; }
46. Deprecated APIͷνΣοΫ
47. Deprecated APIͷνΣοΫ • JSDocͰഇࢭΛهड़͢Δ • ࣮૷ঢ়گఆٛJSONʹϦϦʔε೔Λ௥Ճ • BabelϓϥάΠϯͰΞαʔγϣϯΛ௥Ճ
48. JSDocͰॻ͘ function create(api, AudioScheduledSourceNode) { class OscillatorNode extends AudioScheduledSourceNode { /** * @deprecated 2012-12-13 - use 'start([when])' instead * @param {number} when * @return {void} */ noteOn(when = 0) { void(this, when); } } return OscillatorNode; }
49. BabelͰม׵ function create(api, AudioScheduledSourceNode) { class OscillatorNode extends AudioScheduledSourceNode { noteOn(when = 0) { if (api.released && "2012-12-13" <= api.released) { throw new TypeError(` Failed to execute 'noteOn' on 'OscillatorNode': The 'noteOn' has been deprecated since 2012-12-13, use 'start([when])' instead. `.trim().replace(/^\s+/gm, "\t\t")); } void(this, when); } } return OscillatorNode; }
50. ͦͷଞͷΞαʔγϣϯ • ίπίπॻ͔͘͠ͳ͍ • ஋ͷൣғνΣοΫͱ͔ • ঢ়ଶͷνΣοΫͱ͔ • มͳૢ࡞ͱ͔
51. ·ͱΊ • JSDoc + BabelϓϥάΠϯ • ΞαʔγϣϯίʔυΛࣗಈ࣮૷Ͱָ͖ͯ