Visualizer実装-3

参考を探す

AudioContextとcanvasを中心としたキーワードでgooglingを行いました.
reactionを用いた可視化ソースコードが見つかった.
ブログにはReact and CanvasというAudio Visualizerが作成されます.
タイトルがあり、チュートリアルコードも提供されています.
まずブログに従ってコードを書き、理解していないコードを一つ一つ分解します.

ブログの内容ではWEB-AUDIO-APIについてのみ書かれています.

Part1

Part 1は、オーディオファイルを再生するロジックを実現する.
オーディオファイルを別のディレクトリに保存して読み込むと、
new Audio()ジェネレータを使用してオーディオファイルを再生します.
次にボタンを作成し、togglePlay関数を作成してonClickイベントに渡します.

... 
  if(audio.paused) { 
    audio.play(); 
  } else { 
    audio.paused(); 
  } 
... 
render() { 
  return <> 
     <button onClick={this.togglePlay}>재생/일시중지</button> 
   </> 
}

Part2

Part 2はAudioContextを用いて周波数スキームを作成する.
これはcanvasで描画する方向です.
WEB-AUDIO-APIのAudioContextを生成することにより、オーディオソースノードを生成する.
Part 1で生成されたオーディオオブジェクトをcreateMediaElementSourceメソッドで渡します.
ここで、createMediaElementSourceメソッドはAudioContextの
新しいMediaElementAudioSourceNodeの作成に使用します.
次に、createAnalyserメソッドを使用してターゲット周波数アレイを生成します.
createAnalyserメソッドは、オーディオ時間および周波数データを表示することができる.
データ可視化の作成に使用します.
Analyzerノードを以前に作成したMediaElementAudioSourceNodeに接続します.
AudioContextのターゲットをAnalyzerノードに接続します.
componentDidMount関数の内部で実装されます.

    componentDidMount() {
        this.context = new (window.AudioContext || window.webkitAudioContext)();
        this.source = this.context.createMediaElementSource(this.audio);

        this.analyser = this.context.createAnalyser();
        this.source.connect(this.analyser);
        this.analyser.connect(this.context.destination);
        this.frequency_array = new Uint8Array(this.analyser.frequencyBinCount);
    }

次に、canvasタグを使用してアニメーションを実装します.

AudioContext.resume()

コードを実行してオーディオを再生しようとすると、次のエラーが発生しました.

どこでこの間違いを見たことがありますか?以前クローンを受け取ったことがあると思います
他のVisualizerモジュールと同じ警告文です.
ああ...以前は黄色い警告文だったのですが、そのまま通り過ぎてしまい、
これが再生エラーの原因です.
stack overflowでは、オーディオを再生する前に、onClickなどのジェスチャーを使用してください.
resume()メソッドを呼び出すべきです.
Chromeの自動再生ポリシーのリンクを添付して確認し、同様に以下のように説明します.
If an AudioContext is created before the document receives a user gesture, it will be created in the "suspended"state, and you will need to call resume() after the user gesture.
以前AudioContextには3つの状態がありました.
userがジェスチャーを行う前にAudioContextを作成した場合、stateは保留されます.
そのため、警告語とともに音声が再生できない.
オーディオを再生する前にresume()メソッドを使用してオーディオを再生します!

... 
 this.context.resume()
  if(audio.paused) { 
    audio.play(); 
  } else { 
    audio.paused(); 
  } 
... 
render() { 
  return <> 
     <button onClick={this.togglePlay}>재생/일시중지</button> 
   </> 
}

今日はここまで。

正直、可視化を実現しましょう!抽象的に考えるだけで、
実際の論理がどうなるか考えていないので、迷っていますが、やはり人を死なせる道理はありません.
論理については完全に理解していませんでしたが、一つ一つ解かれているようで面白かったです.
まず、一定の分岐があるVisualizerを一時的に保持します.
まず1分間の試聴機能を実現したいです.

コメントサイト

https://medium.com/swlh/create-an-audio-visualizer-with-react-and-canvas-part-1-of-3-da414a1edfed
https://stackoverflow.com/questions/55026293/google-chrome-javascript-issue-in-getting-user-audio-the-audiocontext-was-not
https://developer.chrome.com/blog/autoplay/