67
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

Organization

思ったより奥が深いけど、けっこう簡単かもしれないWeb Audio API

Audio要素では物足りない

  • タイミングを正確に制御できない。
  • 一度に再生できる音声の数がかなり限られている。
  • 安定して音をプリバッファする方法がない。
  • リアルタイムでエフェクトをかけることができない。
  • 音を分析する方法がない

つまり、 音をガチャガチャいじくって、アウトプットできるよ!

抜粋:“Web Audio API - オライリー

どこで使えるの?

PC

  • IEは11もNG
    • 次期IEで実装予定
  • それ以外はOK

スマホ

  • iOS6.1
  • Android Chrome
  • Android 標準ブラウザはNG
    • 音がなる場合もあるけど、挙動が不安定。

ローディングはどうやってやんの?

xhrでちまちまやるのもよし。CreateJSのPreloadJS + SoundJSでやるのもよし。

基本

部品をノードでつないでいく

  • 部品がいっぱいあって線でつなぐイメージ
  • 部品の種類
    • 音源になるもの
    • エフェクター
    • 出力先
  • Blenderのノードとかギターのエフェクターみたいなノリ。

Web Audio API - Web API インターフェイス | MDN

音源になるもの

名前 内容
OscillatorNode オシレーター(サイン波とかノコギリ波とかのやつ)
AudioBuffer AudioBufferSourceNodeに入れるバッファ。 context.decodeAudioData(arrayBuffer, success)で作成する
AudioBufferSourceNode xhrとかで取ってきたmp3などのオーディオデータを再生するやつ
MediaElementAudioSourceNode audioタグやvideoタグから再生するやつ
MediaStreamAudioSourceNode MediaStream(マイクとか、カメラとか)を入力ソースにするやつ

エフェクター

名前 内容
BiquadFilterNode ローパスフィルタ、ハイパスフィルタとか
ConvolverNode コンボリューションフィルタ。リバーブなんかができる
DelayNode ディレイかけるだけ
DynamicsCompressorNode コンプレッサー。音の粒をそろえたりする。
GainNode 音量調整するだけ
WaveShaperNode ディストーション
PeriodicWaveNode よくわからん(Used to define a periodic waveform that can be used to shape the output of an OscillatorNode.)

出力先

  • AudioDestinationNode
  • MediaStreamAudioDestinationNode

分析と可視化

  • AnalyserNode

オーディオチャンネルの分岐と合成

名前 内容
ChannelSplitterNode ステレオチャンネルを分割して、片方ずつ処理したいときとかにつかう
ChannelMergerNode 複数のチャンネルをまとめる。

Audio spatialization

空間化

ここが詳しい → 3D 立体音響 - Web Audio API を使用したゲーム用音声の開発

名前 内容
AudioListener 音源を聞いてるひと的な(?)。ドップラー効果とかできる
PannerNode 仮想音源の位置を移動させることで立体音響をつくる。3Dパンニング。

JavaScript による音声処理

名前 内容
ScriptProcessorNode プログラマブルなやつ。input/output両方いける。音声解析とかフィルタ作成、動的に音生成など。

ScriptProcessorNodeはイベントが飛んでくる

  • audioprocess (event)
  • AudioProcessingEvent

これらのノードのパラメータ一覧

Web Audio API 解説 - 18.各ノードのパラメータ一覧 | g200kg Music & Software

mp3の再生までの手順

  • xhrでmp3などをresponseType: 'arraybuffer'でロード (非同期)
  • audioContext.decodeAudioData(arrayBuffer, success, error)でAudioBuffer作成 (非同期)
  • AudioBufferをAudioBufferSourceNodeにぶちこむ
  • 再生!

つかえそうなノード

gainとかpanは置いといて

  • ScriptProcessorNode
    • 音のなるタイミングでイベント → そのイベント中にbufferをいじくって自由に音を作る
  • Biquad Filter
    • ローパスフィルタとか、いろいろフィルタがある
  • Analyser
    • スペクトラム情報が取り出せる
  • WaveShaper
    • ディストーションエフェクト
  • Convolver
    • コンボリューションフィルタ

ライブラリは?

timbre.js
動かない

oampo/Audiolet
動かない

音を出すだけならSoundJSでよし

注意点

  • スマホではタップ操作が必須
    • ローディングは勝手に行っててもよし
    • 音を鳴らすタイミングだけ、タップ操作が必須。一度タップすれば、勝手に鳴らせるようになる。
  • いちどstop()すると、破棄される
    • AudioBufferSourceでも同じで一度 start()して再生し終わるかstop()で止めるともうそのAudioBufferSourceは使えなくなります

デバッグ

FirefoxにWeb Audio用のコンソールがある

Web Audio Editor

Three_jsのお勉強をしています。.png

  • パラメータをいじくれる
  • ノードの追加や変更はできない

おもしろデモサイト

Web Audio Demos

遊べるサンプルがたくさんある

Web Audio Playground
Web_Audio_Playground.png

シンセ + シーケンサー

app_hya_io.png

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
67
Help us understand the problem. What are the problem?