前回、いろんな音がだせるオシレーターをつくった。 音が出せるようになったら、やっぱりどんな波形か見たくなるのが世の常。 ということで、今回はWeb Audio APIとSVG/Canvasをつかってオシロスコープをつくる。 パフォーマンス検証のためSVGとCanvasの双方をつかったが、サンプルが小さかったこともあり違いは見られなかった。(詳細は後述する) 音声波形データを取得する OscillatorNodeをAnalyserNodeに繋ぐことで、音声波形や周波数のデータを取得できる。 // Oscillator → Analyser → Speakerの順に繋ぐ const ctx = new AudioContext(); const analyser = ctx.createAnalyser(); analyser.connect(ctx.destination); const o
![Web Audio APIとVue.jsで波形を見るためのオシロスコープをSVGとCanvasでつくる](https://cdn-ak-scissors.b.st-hatena.com/image/square/c82f8f231ac0265837978b7212533985e6267ed6/height=288;version=1;width=512/https%3A%2F%2F3.bp.blogspot.com%2F-Aa70TtcXMuc%2FWhNdm3ViT4I%2FAAAAAAAAG0U%2F8pR5mb1GhTUJqtSQ2OydtaA3rmzo-DqTACPcBGAYYCw%2Fw1200-h630-p-k-no-nu%2Foscillator.png)