wavesurfer.js非常适合从音频文件渲染波形,但我想知道是否可以将任何 CSS 属性设置为由 wavesurfer.js 生成的波形/光谱图的幅度/频率?是否有一种变量可以分配给另一个参数(例如: an 的不透明度<img>
)?
问问题
1653 次
1 回答
12
查看 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>
于 2017-01-05T11:15:06.313 回答