2017/11/22

Web Audio APIとVue.jsで波形を見るためのオシロスコープをSVGとCanvasでつくる

前回、いろんな音がだせるオシレーターをつくった
音が出せるようになったら、やっぱりどんな波形か見たくなるのが世の常。

ということで、今回はWeb Audio APIとSVG/Canvasをつかってオシロスコープをつくる。
パフォーマンス検証のためSVGとCanvasの双方をつかったが、サンプルが小さかったこともあり違いは見られなかった。(詳細は後述する)

2017/11/21

Web Audio APIとVue.jsでオシレーターをつくる(カスタム波形、正弦波、矩形波、ノコギリ波、三角波)

前回、Web Audio APIとVue.jsでシンプルなシンセサイザーをつくった。ただ「シンプル」ということで正弦波(サイン波)しか鳴らせない。

もっといろんな音を鳴らしたい!

ということで正弦波はもちろん、矩形波、ノコギリ波、三角波、カスタム波形をだせる
オシレーターをつくる。

機能としては以下のとおり。

  • 出す波形を選択できる
    • 正弦波(Sine wave)
    • 矩形波(Squere wave)
    • ノコギリ波(Sawtooth wave)
    • 三角波(Triangle wave)
    • カスタム波形(Custom)
  • 鳴らす周波数を変更できる
  • セント単位で変更できる

2017/11/17

Web Audio APIとVue.jsでシンプルなシンセサイザーをつくる

ブラウザで使えるMinimoogとかいいじゃん!そんなことを思い立ち、Web Audio APIを勉強しはじめた。

今回は、その第一歩として88鍵のキーボードを表示し、クリックしたら音がなるものをつくろうと思う。Vue.jsを使っているのは、要素の生成やイベントハンドリングを楽にするためだ。