Question

wavesurfer.js非常适合从音频文件渲染波形，但我想知道是否可以将任何CSS属性设置为波形/光谱仪的幅度/频率的动画，由wavesurfer.js生成？是否有一种我可以分配给另一个参数的变量（例如：<img>的不透明度）？

Answer 1

查看wavesurfer.js，您可以使用wavesurfer.backend.analyser获取AnalyserNode。

注意：您必须检查analyser是AnalyserNode的实例。只有在浏览器支持Web Audio API时才会这样。

从AnalyserNode您可以获得AnalyserNode.frequencyBinCount媒体资源，然后您可以creating a visualisation/animation启动。

我在他们网站的codepen上建立了一个简单的示例（wavesurfer.js examples）。

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>

使用wavesurfer.js为CSS属性设置动画

1 个答案: