音声ファイルを解析して波形を出力 - js

4693 ワード
HTML JavaScript HTTPS wavesurfer.js HTML テキストリンク

説明

音声ファイルを解析して波形をブラウザに出力してみたいと思います。音声ファイルは、どこにあってもいいけれど（自分のサーバーの中とか）httpもしくはhttps通信が出来る環境でなければいけません。

実装自体はwavesurfer.jsという素晴らしいフレームワークを用いて比較的簡単に実装をすることができます。比較的...いや本当に簡単です！。

環境

  • https
  • http
  • javascript
  • wavesurfer.js
  • Google Chrome

実行

実際に実行してみるとこのようになります。波形の色を代えたり再生位置を直感的に操作したりすることができます。

たったこれだけ

たった6行で音声ファイルを解析して波形を出力することが出来るようになります。

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'black',
  progressColor: 'purple'
});
wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

実装

サウンド素材、CDNが消えない限りコピペで動くはず。もし自分でwavesurfer.jsを使いたければクローンとかして自分でパスを指定してください。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>

<div id="waveform"> </div>

<div style="text-align: center">
  <button class="btn btn-primary" onclick="wavesurfer.playPause()">
    <i class="glyphicon glyphicon-play"></i>Play</button>
</div>

<script language="JavaScript">

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'black',
  progressColor: 'purple'
});

wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

</script>
</body>
</html>