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つのパラメータを弄ることで「ドンッ!!」とか「ほわぁ〜ん」とかいう音を作ることができる。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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