WaveSurfer Example

by Luke Marlow

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/wavesurfer.min.js"></script>

<div class="container">
  <div class="well">
  <div class="loader" data-id="2345678">Load mah bob</div>
    <div id="waveform"></div>
  </div>
  <div style="text-align: center">
    <button class="btn btn-primary btn-play"><i class="glyphicon glyphicon-play"></i> Play</button>
    <button class="btn btn-primary btn-pause"><i class="glyphicon glyphicon-pause"></i> Pause</button>
  </div>
</div>

CSS

body{
  background-image: url(http://medio-core.net/static/images/tile.png);
}
.container {
  margin-top: 50px;
}
.well{background:#fff;position:relative;}
.loader {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:168px;
  line-height:168px;
  z-index:10;
  text-align:center;
  }

JavaScript

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

wavesurfer.on('ready', function(){
 $('.loader[data-id="..."]').hide();
});

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

$('.btn-play').click(function() {
  wavesurfer.play()
});

$('.btn-pause').click(function() {
  wavesurfer.pause()
});