運営者情報

運営してるひと: @sters9

       

妻と猫と横浜あたりに住んでいる。最近は Go や Kubernetes や GCP をしています。 PHP や JavaScript もすこし。

プライバシーポリシー

tools.gomiba.co

アーカイブ

2021/07 (2) 2021/06 (5) 2021/05 (10) 2021/04 (1) 2021/03 (8) 2021/02 (12) 2021/01 (8)

2020/05 (2) 2020/04 (2) 2020/02 (2) 2020/01 (1)

2019/12 (3) 2019/11 (2) 2019/10 (5) 2019/09 (3) 2019/07 (6) 2019/06 (4) 2019/04 (3) 2019/01 (2)

2018/12 (6) 2018/10 (4) 2018/09 (6) 2018/08 (7) 2018/07 (16) 2018/06 (7) 2018/05 (7) 2018/04 (5) 2018/03 (3) 2018/02 (10) 2018/01 (6)

2017/12 (8) 2017/11 (6) 2017/10 (10) 2017/09 (12) 2017/08 (12) 2017/07 (3) 2017/06 (1) 2017/01 (4)

2016/12 (5) 2016/10 (3) 2016/09 (1) 2016/07 (2) 2016/06 (1) 2016/04 (1) 2016/02 (1) 2016/01 (2)

2015/12 (1) 2015/10 (1) 2015/09 (3) 2015/06 (1) 2015/01 (1)

2014/08 (2) 2014/07 (3) 2014/05 (1) 2014/01 (7)

2013/12 (2) 2013/11 (4) 2013/10 (1) 2013/09 (1) 2013/08 (3) 2013/07 (4) 2013/06 (5) 2013/05 (2) 2013/04 (7) 2013/03 (1)

ブラウザ上で音をこねこねする

  • Web Audio API - Web API | MDN
  • ブラウザ上だけで音をいろいろこねこねできる
    • AudioContext や各 AudioNode がキモ
    • 基本的にはAudioNodeをつなげていくことでデータを取得したり、設定値に基づいて波形への操作ができる
  • 例えばマイクから入力して、周波数分析をして、Canvasで可視化、みたいなものがシュッと作れる
    • AudioContextを作る
    • AnalyserNodeを作る
    • AudioContextをつかってMediaStreamからMediaStreamAudioSourceNodeを作る(入力になる)
    • MediaStreamAudioSourceNodeにAnalyserNodeをつなげる
    • これでもうUint8Arrayでデータが取れるようになってしまう
    • これを0からネイティブに書こうとすると、特に分析で、自分でFFTするかFFTできるライブラリを入れたりして大変そう(あまりわからない)
      • デバイスの初期化とか開放とかいろいろあって結構たいへんになりそうなイメージ
      • WebAudio APIさまさまや!
  • 入力にはざっくりファイル(バッファ)から、オシレーター発振、MediaElement、MediaStreamが使える
    • ファイル, AudioBufferSourceNode
      • XHR -> ArrayBuffer -> AudioContext.decodeAudioData とやると取れる
    • オシレータ, OscillatorNode
      • 通常はサイン波。OscillatorNode.type を変えられる
      • OscillatorNode.setPeriodicWave() でカスタムした波形も入る(?)
  • 出力先はデフォルト(?)かMediaStreamを選べる
    • AudioDestinationNode
      • AudioContext.destinationに入っている
      • ブラウザのデフォルトの出力先になるのかな
    • MediaStreamAudioDestinationNode
      • AudioContext.createMediaStreamDestinationで取れる
      • MediaStreamAudioDestinationNode.streamとしてMediaStreamが取れる
        • ので、それをaudioやvideoタグのMediaStreamあるいはMediaStreamTrackとして渡せる
  • あとはいろんなAudioNodeが準備されている
    • BiquadFilterNode, フィルタ
    • ConvolverNode, リバーブ
    • DelayNode, ディレイ
    • DynamicsCompressorNode, コンプレッサ
    • GainNode, 音量調節
    • WaveShaperNode, ディストーション
    • AnalyserNode, 分析
    • ChannelSplitterNode, チャンネル分離
    • ChannelMergerNode, チャンネル結合
    • PannerNode, パン
    • StereoPannerNode, ステレオの左右バランス
  • OfflineAudioContextを使うと、オフライン、出力されないAudioContextが作れる
    • これは中にAudioBufferを持っていて、レンダリングがすることでそのAudioBufferにデータが出力される
    • AudioContextはオンラインなので出力があるけど、これはバッファだけのオンメモリなので高速、なのかな
  • Webブラウザ上でシンセサイザー、というのかな、そういうのが作れそう