使用JS显示Mp3音频的波形图实例页面

回到相关文章 »

展示

播放 暂停

代码

CSS代码：
.waveform {
    max-width: 800px;
    height: 150px;
    margin: auto;    
}
HTML代码：
<div id="waveform" class="waveform"></div>
<a href="javascript:" id="btnPlay" role="button">播放</a>
<a href="javascript:" id="btnPause" role="button">暂停</a>
JS代码：
var wavesurfer = WaveSurfer.create({
    container: '#waveform'
});
wavesurfer.load('./zxx-comic-01.mp3');
// 播放和暂停
btnPlay.addEventListener('click', function () {
    wavesurfer.play();
});
btnPause.addEventListener('click', function () {
    wavesurfer.pause();
});