triBlog

トリアナのブログ。

コラム
フロントエンド

面白い技術があるから勉強したい

人が頑張れるのはせいぜい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 ライブラリです。

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

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

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

所感

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

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

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

記事を書いた人

バックエンドエンジニアごとう
ごとう バックエンドエンジニア

鍋沼なるものがあるらしいです。ハマりそうです。

ごとう バックエンドエンジニア

鍋沼なるものがあるらしいです。ハマりそうです。

ページ上部へ