css中用wave滤镜,使用waveurfer.js为CSS属性设置动画效果

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;

}

Play