人が頑張れるのはせいぜい3ヶ月から半年だそうです。継続できるゆるさが大事。

ごとう

Webエンジニアになって3ヵ月が経ちました。新しいことに挑戦して成長していることを実感できて楽しいです。日を追ってやりたいことが増えていきます。

バックエンドエンジニアで入社しましたが、最近はフロントエンドの技術にも興味があります。ヘッドレスCMSとjavascript のフレームワークの組み合わせ（バックエンドのプログラムを自分で書かない構成）で何かできればなと思ってます。それでも結局はバックエンドの勉強をすることになります。バックエンドの情報をみているとやっぱりバックエンドも手を動かして書いてみたくなります。そうなるとRubyとかPythonも勉強したくなります。Laravelも面白い機能が追加されていて目移りします。

バックエンドとかフロントエンドとか関係なくWebの技術はどれも面白いと思うのです。そんな中でいいなと思うものがありました。それはWeb Audio APIです。

Web Audio API について

Web Audio APIとは

Web Audio API は音声操作をオーディオコンテキスト内の操作として実現し、モジュラールーティングできるようにデザインされています。基本的な操作は オーディオノードとして表現されています。これを接続することで、オーディオグラフを作成します。チャンネル構成の異なる複数の音源も 1 つのコンテキスト内で扱えます。この構成によって、複雑で動的な音声操作を実現できるようになっています。

https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API

難しいこと書いてますが、一言で表すならWeb Audio API は動的に音を操る技術ということでしょうか。

音声を再生するだけなら音声ファイル置いとけばいいんですけど、クライアントの動作に合わせて音を鳴らしたり、音源を加工したいならこれを使うわけですね。

体感してみる

Tone.jsの公式にあるdemosページからWeb Audio APIを体感してみてほしいです。Tone.jsはWeb Audio APIを扱うためのjavascript ライブラリです。

Get started | Learning Music (Beta)

https://learningmusic.ableton.com

Explore the fundamentals of music via Ableton's interactive website. Experiment with beats, melody, harmony, basslines, and song structure in your web browser.

一つ目に紹介したデモは”Drums”, “Bass”, “Chords”, “Melodies”を好きな組み合わせで再生できるものです。任意のタイミングで再生ボタンを押しても、それぞれの音源が曲として適切なタイミングで鳴るようにプログラミングされてますね。

YUME

http://www.unseen-music.com/yume/

Interactive music exploration, Yume by Helios.

2つ目に紹介したデモは矢印アイコンを操作するとそれぞれの音源のバランスが変わるようです。（音楽は詳しくないので何というのかあまりわかりません。）それだけでなく音源にかかるエフェクトも変化するようです。

demos

https://tonejs.github.io/demos

Tone.js の公式にはまだまだ沢山のデモがありますので、お気に入りのものが見つかるはずです！！

所感

Web Audio APIどうでしたか。かなり素敵ですよね。これらのデモについて言葉で少し説明してみましたが、Web Audio APIを通して伝わったものは言語化し難いものです。なんというか、僕はいい体験をさせてもらったなと思います。
Webサイトがもたらす体験。これをテーマに自分の手でなにか作れたらいいなと思いながら、毎日勉強しています。かっこいいもの、人の心を動かすものがつくりたいです。

今回もふわふわした自分の気持ちばかり書きましたが、次回はエンジニアらしい技術記事が書けるように準備したいと思います！！

WEBサイトなどのご相談はこちらからどうぞ

お問合せはこちら