Kurene https://blog.hatena.ne.jp/Kurene/ Wizard Notes https://www.wizard-notes.com/ javascript WebApp 音楽プログラミング https://wavesurfer-js.org より ユーザが音楽を再生する Web アプリでは、音の出力するだけでなく、 波形描画などで音を可視化したり、操作が分かりやすいGUIを設計する必要があります。 原理的には、Web Audio API において音波形の信号値が格納されている Audio Buffer を利用して、canvas やWebGLなどで波形を描画するという手順になります。 しかし、各ライブラリを理解する必要がある上に、実装するコードが多くなります。 今回は音再生と波形描画、波形上での操作を手軽に実現できる非常に便利なライブラリ wavesurfer.js の使い方・実装… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.wizard-notes.com%2Fentry%2Fjavascript%2Fwavesurfer-js" title="wavesurfer.js：簡単に音声ファイルの再生と波形描画が実装できるJavaScriptライブラリ - Wizard Notes" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/K/Kurene/20220224/20220224010617.png Hatena Blog https://hatena.blog 2022-02-25 00:09:16 rich https://www.wizard-notes.com/entry/javascript/wavesurfer-js 1.0 100%