2017/11/28

Web Audio APIとVue.jsでADSRエンベロープ(VCA)をコントロールする

前回までにキーボードをつくったりオシレータをつくったりオシロスコープをつくったりした。
今回は音の三要素の最後の1つ、音量をコントロールする。
エンベロープジェネレータを用い、ADSR(Attack/Decay/Sustain/Release)をコントロールするとともに、エンベロープをグラフ表示する。



ADSRとは?


Attack/Decay/Sustain/Releaseの頭文字をとったもので、音量をコントロールする機能。
  • Attack(立ち上がり)
    • 発音(打鍵)されてから最大音量になるまでの時間
  • Decay(減衰)
    • 最大音量になってからSustainのレベルになるまでの時間
  • Sustain(保持)
    • Decay後の音量。発音中はずっとSustainレベルが保持される
  • Release(余韻)
    • 離鍵されてから音量が0になるまでの時間
この4つのパラメータを弄ることで「ドンッ!!」とか「ほわぁ〜ん」とかいう音を作ることができる。

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を使っているのは、要素の生成やイベントハンドリングを楽にするためだ。

2017/11/13

Node.js+Botkit+localtunnelでSlack Interactive Messageを試す

ずいぶん前にSlackにInteractive Messageという機能が追加された。この機能はBotやAppからのリプライにリストやボタンを含めて返すもので、Bot/Appの表現の幅が広がった。

ということで、実際にNode.js+Botkitで試してみようと思う!

ただ、実装しようとググっても、BotkitのExampleを使ってもどうにも動かなくてかなりハマったので、なるべく丁寧に解説しようと思う。


今回使う環境は以下のとおり。
  • Node.js@8.x
  • Botkit@0.6.6
    • Botアプリケーションをつくるためのフレームワーク
  • localtunnel@1.8.3
    • httpsの外部連携(OAuthやリクエストを受け取る)するためにローカル環境を外部に公開するツール
    • HerokuやngrokなどでもOK


2017/11/01

[Vue.js]Vuexを使わずにコンポーネント間のデータやり取り・状態管理する方法3パターン

Vue.jsで小規模なSPAを開発している。Vuexを導入するほどでもなく、Vue.jsの標準機能でコンポーネント間でデータをやりとりする方法がないか考えていた。

親子コンポーネント間についてはProps down/Events upでデータのやりとりができる。
子子コンポーネント間(いわゆる兄弟間)はどうするのが良いのかを3つのパターンを紹介する。

  • $on/$emitでのイベントによるやり取り
  • 親コンポーネントをコントローラにして子コンポーネント間を取り持つ
  • Storeパターンの適用


親子コンポーネント間のデータのやり取りについては、以下の記事を参照してほしい。