使用wavesurfer.js為CSS屬性設置動畫

Question

wavesurfer.js非常適合從音頻文件中渲染波形，但我想知道是否可以將任何CSS屬性設置為波形/光譜儀的幅度/頻率，由wavesurfer.js生成？ 是否有一種我可以分配給另一個參數的變量（例如： <img>的不透明度）？

Answer 1

看着wavesurfer.js，你可以得到AnalyserNode使用wavesurfer.backend.analyser 。

注意：您必須檢查analyser是否是AnalyserNode的實例。 只有在瀏覽器支持Web Audio API時才會這樣。

從AnalyserNode您可以獲取AnalyserNode.frequencyBinCount屬性，然后您可以開始創建可視化/動畫 。

我在他們網站上的wavesurfer.js示例中構建了一個簡單的示例（ codepen ）。

 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>