オーディオファイルの波形をCanvasに描画する

Webブラウザ上でオーディオファイルを選択し、その波形を上図のように表示する方法について解説します。オーディオの波形を表示する方法は多数ありますが、本記事では筆者が考える最もシンプルな方法を紹介します。 本記事で扱う内容 本記事では以下の内容について解説します。 <input type="file">を用いて、オーディオファイルを選択できるようにする方法 指定したオーディオファイルから波形データを読み取り、Canvasに描画する方法 完成形のコード 先にコードの完成形をCodePenの埋め込みとして提示します。実際にオーディオファイル(.mp3や.wavなど)を選択して動作を確認してみてください。（長い音源だと描画に時間がかかるため、数秒程度の短い音源をお勧めします。） 以降、このコードを部分的に引用しながら解説をしていきます。 ファイルの取り扱い オーディオファイルの取り扱い方法について