Upgrade to Pro — share decks privately, control downloads, hide ads and more …

web-audio-test-api

2e458c4aee2c4352021a2b1f0c6863c5?s=47 mohayonao
January 21, 2017
320

 web-audio-test-api

2e458c4aee2c4352021a2b1f0c6863c5?s=128

mohayonao

January 21, 2017
Tweet

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ϓϥάΠϯ • ΞαʔγϣϯίʔυΛࣗಈ࣮૷Ͱָ͖ͯ