JSFiddle - React, Tailwind, and code Playground

Seismic web audio from the IRIS API, mixing both horizontal and vertical channels into a stereo composite

by nathansnider

HTML

<script src="https://cdn.rawgit.com/jquery/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.0/wavesurfer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
<input type="button" id="playButton" value="Play / Pause">
<input type="button" id="saveButton" value="Save Output">
<div id="waveBlock">
  <div id="waveformLeft" class="seismoWav">
    <progress id="progressL" class="progress progress-striped" value="0" max="100"></progress>
  </div>
  <div id="waveformRight" class="seismoWav">
    <progress id="progressR" class="progress progress-striped" value="0" max="100"></progress>
  </div>
  <div id="waveformCenter" class="seismoWav">
    <progress id="progressC" class="progress progress-striped" value="0" max="100"></progress>
  </div>
</div>

CSS

#waveBlock {
  width: 100%;
}

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

.progress {
  position: absolute;
  display: block;
  width: 100%;
  height: 1rem;
  margin-bottom: 1rem;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
}

.progress[value] {
  -webkit-appearance: none;
  color: #0074d9;
  border: 0;
  -moz-appearance: none;
  appearance: none;
}

JavaScript

//wavesurfer for seismic stereo, including vertical component
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:44:49',
  endtime = '2013-05-24T11: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: 'grey',
  audioContext: context,
  hideScrollbar: true
});
var waveRight = WaveSurfer.create({
  container: '#waveformRight',
  waveColor: 'green',
  progressColor: 'grey',
  audioContext: context,
  hideScrollbar: true
});
var waveCenter = WaveSurfer.create({
  container: '#waveformCenter',
  waveColor: 'red',
  progressColor: 'grey',
  audioContext: context
});
waveLeft.load(leftUrl);
waveRight.load(rightUrl);
waveCenter.load(centerUrl);

var skipLength = 0;
var maxpps = 1000;
var buffArray = [{}, {}, {}];

// progress bars, etc.
waveLeft.on('loading', function(percents) {
  document.getElementById('progressL').value = percents;
});
waveLeft.on('ready', function(percents) {
 ...