wavesurfer.js【保存版】音源の波形表示&プレイヤー機能を簡単に実装するライブラリのまとめ

<script src="https://unpkg.com/wavesurfer.js"></script>

<div id="wave"></div>

var wavesurfer = WaveSurfer.create({
  container: '#wave',
});
wavesurfer.load('http://sample.com/file.mp3');

<button onclick="wavesurfer.playPause()">再生・停止</button>

<div id="wave"></div>
<button onclick="wavesurfer.playPause()">再生・停止</button>

<script src="https://unpkg.com/wavesurfer.js"></script>
<script>
var wavesurfer = WaveSurfer.create({
  container: '#wave',
});
wavesurfer.load('http://sample.com/file.mp3');
</script>

var wavesurfer = WaveSurfer.create({
  container: '#wave',
  キー : 指定したい値,
  キー : 指定したい値,
});

var waveCustom = WaveSurfer.create({
  container: '#wave_custom',
  barWidth: 10,
  backgroundColor: '#fffaf0',
  barGap: 10,
  barRadius: 3,
  cursorColor: '#8b4513',
  waveColor: '#d2b48c',
  progressColor: '#ff8c00',
  splitChannels: true,
});

<script>
wavesurfer.load('http://sample.com/file.mp3');
</script>

<button onclick="wavesurfer.playPause()">再生・停止</button>

<div id="wave_methods"></div>
<button id="waveMethodsPlay">再生する</button><br>
ボリューム：<input type="range" id="volume" value="50">

<!-- wavesurfer.jsの読み込み -->
<script src="https://unpkg.com/wavesurfer.js"></script>

<!-- jQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function(){
  //波形の描画
  var waveMethods = WaveSurfer.create({
    container: '#wave_methods',
  });
  //音源ファイルの読み込み
  waveMethods.load('http://sample.com/file.mp3');

  //再生・停止の切り替え
  $('#waveMethodsPlay').on('click', function(){
    if(waveMethods.isPlaying() === false) {
     $('#waveMethodsPlay').text('停止する');
     waveMethods.play();
    } else {
     $('#waveMethodsPlay').text('再生する');
     waveMethods.pause();
    }
  });

　//音量の調整
  $('#volume').on('change', function(){
    let volume = $(this).val() / 100;  //0〜1の間の値になるように調整
    waveMethods.setVolume(volume);
  });
});
</script>

<div class="wrapper">
  <div id="wave_events" class="hide"></div>
  <div id="loading">
    <div class="bar"><p></p></div>
    <span>0%</span>
  </div>
</div>

<!-- wavesurfer.jsの読み込み -->
<script src="https://unpkg.com/wavesurfer.js"></script>

<!-- jQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
var waveEvents = WaveSurfer.create({
  container: '#wave_events',
});
waveEvents.load('http://sample.com/file.mp3');

//ロード中の処理
waveEvents.on('loading', function(percent){
  //読み込みが完了した割合を表示
  $('#loading span').text(percent+'%');
  //読み込み割合に応じてバーの長さを調整
  $('#loading p').css('width', percent + '%');
});

//読み込み完了時
waveEvents.on('ready', function() {
  //ロード表示を消す
  $('#loading').remove();
  //波形の非表示を解除
  $('#wave_events').removeClass('hide');
});
</script>

.wrapper {
  position: relative;
}

/* 最初は波形部分を隠しておく */
#wave_events.hide {
  opacity: 0;
}

/* ロード表示を波形部分の上に置く */
#loading {
  position: absolute;
  top: 20px;
  right: 30px;
}

/* ロード表示のバーのベース部分 */
#loading .bar {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 10px;
  background-color: #dfdfdf;
}

/* ロード表示のバーの読み込んだ部分 */
#loading .bar p {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;  /* JS側で長さを調整するので最初は0%でOK */
  height: 10px;
  background-color: #333333;
}

/* %表示をするところ */
#loading span {
  width: 100px;
  text-align: right;
}