JSFiddle - React, Tailwind, and code Playground

Wavesurfer web audio filters (NOT working in v1.1.1)

by nathansnider

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.1/wavesurfer.min.js"></script>
<input type="button" id="playButton" value="Play / Pause">
<div id="waveBlock">
  <div id="waveformLeft" class="seismoWav">
  </div>
  <div id="waveformRight" class="seismoWav">
  </div>
  <div id="waveformCenter" class="seismoWav">
  </div>
</div>

CSS

#waveBlock {
  width: 100%;
}

#waveformLeft,
#waveformRight,
#waveformCenter {
  position: relative;
}

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext;

var network = 'IU',
  station = 'MBWA',
  location = '00',
  channel = 'BH',
  chL = '1',
  chR = '2',
  chC = 'Z',
  starttime = '2013-05-24T05:54:49',
  endtime = '2013-05-24T07:44:49',
  centerGain = 0.3; //mix proportion of center-panned vertical component

var leftUrl = 'http://service.iris.edu/irisws/timeseries/1/query?net=' + network + '&sta=' + station + '&loc=' + location + '&cha=' + channel + chL + '&starttime=' + starttime + '&endtime=' + endtime + '&output=audio&audiosamplerate=44100&demean=true';

var rightUrl = 'http://service.iris.edu/irisws/timeseries/1/query?net=' + network + '&sta=' + station + '&loc=' + location + '&cha=' + channel + chR + '&starttime=' + starttime + '&endtime=' + endtime + '&output=audio&audiosamplerate=44100&demean=true'

var centerUrl = 'http://service.iris.edu/irisws/timeseries/1/query?net=' + network + '&sta=' + station + '&loc=' + location + '&cha=' + channel + chC + '&starttime=' + starttime + '&endtime=' + endtime + '&output=audio&audiosamplerate=44100&demean=true'

var context = new AudioContext();

var waveLeft = WaveSurfer.create({
  container: '#waveformLeft',
  waveColor: 'blue',
  progressColor: '#CCCCFF',
  audioContext: context
});
var waveRight = WaveSurfer.create({
  container: '#waveformRight',
  waveColor: 'green',
  progressColor: '#CCFFCC',
  audioContext: context
});
var waveCenter = WaveSurfer.create({
  container: '#waveformCenter',
  waveColor: 'red',
  progressColor: '#FFCCCC',
  audioContext: context
});
waveLeft.load(leftUrl);
waveRight.load(rightUrl);
waveCenter.load(centerUrl);

function playPauseAll() {
  waveLeft.playPause();
  waveRight.playPause();
  waveCenter.playPause();
}

var playButton = document.getElementById("playButton");
playButton.addEventListener("click", function() {
  playPauseAll();
});

/////////////////////////////////////////////////////////////////////////////////////////////
//set up web audio...