javascript - Using wavesurfer.js to animate a CSS property - Stack Overflow

admin管理员组

文章数量:1303498

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>)?

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>)?

• javascript
• wavesurfer.js

Share Improve this question Follow edited Jan 7, 2017 at 0:21 approxiblue 7,1221616 gold badges5252 silver badges5959 bronze badges asked Nov 23, 2016 at 10:52 RolandRoland 1,94055 gold badges2222 silver badges3535 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11 +50

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/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

//get the AnalyserNode from wavesurfer
//@see https://developer.mozilla/en-US/docs/Web/API/AnalyserNode
var analyser = wavesurfer.backend.analyser,
  //array to store the frequency data
  //@see https://developer.mozilla/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/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./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>

本文标签： javascriptUsing wavesurferjs to animate a CSS propertyStack Overflow