Using wavesurfer.js to animate a CSS property

Question

wavesurfer.js is great for rendering a waveform from an audio file, but I'm wondering if it's possible to animate any CSS property to the amplitude/frequency of the waveform/spectrograph, being generated by wavesurfer.js? Is there a sort of variable I can assign to another parameter (for example: the opacity of an <img>)?

Lightly

Answer 1

Looking at wavesurfer.js, you can get AnalyserNode using wavesurfer.backend.analyser.

Note: you will have to check that analyser is an instance of AnalyserNode. It will only be this if the browser supports the Web Audio API.

From AnalyserNode you can get the AnalyserNode.frequencyBinCount property, you can then start creating a visualisation/animation.

I made a simple example (codepen) building on the wavesurfer.js examples on their site.

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

//get the AnalyserNode from wavesurfer
//@see https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode
var analyser = wavesurfer.backend.analyser,
  //array to store the frequency data
  //@see https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getByteFrequencyData
  frequencyData = new Uint8Array(analyser.frequencyBinCount),

  //div to animate and play/pause button
  box = document.getElementById('box'),
  play = document.getElementById('play');

//play button - play pause audio
play.addEventListener('click', function() {
  wavesurfer.playPause();
});

//wavesurfer 'audioprocess' event Fires continuously as the audio plays @see events on wave surfer http://wavesurfer-js.org/docs/events.html
wavesurfer.on('audioprocess', function(e) {

  analyser.getByteFrequencyData(frequencyData);
  //console.log(frequencyData);

  //simple example - get the first value in the array and set the width of the box
  var w = frequencyData[0] * 0.05;
  //apply a scale transform;
  box.style.transform = 'scale(' + w + ',1)';

});

/* add some transition */

.animation {
  margin: 50px auto;
  width: 50px;
  height: 50px;
  background-color: #71C2D0;
  transition: transform 0.1s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<div id="waveform"></div>
<div id="box" class="animation"></div>
<button id="play">Play</button>

Selfregulating

thanks so much! while I don't yet understand every detail, I've managed to adapt your code to animate the opacity of an image, but I'm having problems to use it to animate the CSS3 filter property. – Lightly

Great, you should be able to animate a filter like any other css property e.g. transition : filter 0.5s linear; if you want to use javascript to do it then this may help #20082783 – Selfregulating