React で Audio Worklet を使いこなしたい

この記事は『CRESCO Advent Calendar 2021』 3日目の記事です。

ずいぶんとマニアックな記事になってしまいました。

突然ですが、皆さんは Web Audio API の Audio Worklet という機能をご存じでしょうか。

Audio Worklet は Web Audio API に定義されていないユーザー任意の音声処理を行う機能になります。

もちろん音声処理そのものは手動で実装する必要があるのですが、Audio Worklet を用いればそういった手動の実装を緩和しつつ、Web Audio APIの機能(Audio Node)の1つとして登録・使用することができ非常に便利です。

この記事では、Audio Worklet が内部でどのような処理を行っているのか、実装例を見ながら紹介していきたいと思います。

続きを読む

React.jsでWeb Audio APIを使ってみる

タイトルの通りです。

ReactアプリにWeb Audio API を導入しようと思ったのですが、意外に苦労したので、忘れないようブログとして残すことにしました。

なのでこの記事をおすすめできるのは、次のような方だと思っています。

  • React の知識そこそこ
  • Web Auido API に対して無知
  • 音声の加工処理には興味ある

ちなみに Web Audio API とはブラウザで音声処理を行うための機能のことです。基本的には再生中の音声をその場で加工する仕組みになっています。ただ単に音声処理したいだけ(再生が不要)の場合、少し扱いが特殊になるので注意しましょう。

続きを読む

ようこそ!2020年、Webフロントエンドの世界へ

こんにちは、UXデザインセンターのsgi-changです。

ついに2020年。

数字だけ見るとものすごく未来を感じてしまうのは私だけでしょうか。

今回は、とても魅力的なWebのフロントエンドの世界(以下、Webは略)をご紹介したいと思います。

当記事の対象は、

社内でフロントエンドエンジニアが不足している。

いきなりフロントエンドやれと言われた。

サーバーサイドしか知らない。

SPAって何?

モダンWebって何?

どうしていいか分からない。

といった今までフロントエンドとはあまり縁がなかったけど、

急に関わることになった方を対象にしています。

開発を進める上で参考になれば嬉しいです。

続きを読む