一、 介绍
wavesurfer.js是一种可自定义的音频波形可视化，构建在 Web 音频 API和HTML5 画布之上。
使用wavesurfer.js，您可以创建从 HTML5 音频播放器到复杂 DJ 应用程序等任何内容。
二、 使用方法
1、 引入
2、 创建容器
3、 编写jsvarwavesurfer=WaveSurfer.create({
container:'#waveform',
waveColor:'violet',
progressColor:'purple'
});
4、 加载播放的音频wavesurfer.load('audio.wav');
三、 浏览器支持
wavesurfer.js在现代支持网络音频的浏览器上运行，包括火狐、Chrome、Safari(桌面和手机)和歌剧。
四、 下面是我封装的使用方法
1、 css.music-list-all{width:100%;display:-webkit-inline-box;background:#03a9f4;height:65px;margin:0auto;text-align:center;margin-bottom:9px;border-radius:8px;line-height:60px;cursor:pointer;}
.music-list-all>div>img{cursor:pointer;width:57%;}
.music-list-all>div:nth-child(1){width:8%;}
.music-list-all>div:nth-child(2){width:80%;}
.music-list-all>div:nth-child(3){
width:12%;}
2、 html
00:12
3、 js
varwavesurferAll=newArray();
//创建波形图
$('.wavesurfer').each(function(k,v){
wavesurferAll['#list'+$(this).attr('wavesurfer-id')]=createMusicPic($(this).attr('wavesurfer-id'));
});
$('.music-play').click(function(){
var_this=$(this);
varaudio_id=_this.attr('audio-id');
varcurrentPlayAudio=wavesurferAll['#list'+audio_id];
varplayer=_this.parent();
if(player.attr('music-status')=='false'){
player.attr('music-status','true');
currentPlayAudio.play();
_this.attr('src','/static/images/music/pause2.png');
}else{
player.attr('music-status','false');
currentPlayAudio.pause();
_this.attr('src','/static/images/music/play2.png');
}
currentPlayAudio.on("seek",()=>{
currentPlayAudio.play();
_this.find('img').attr('src','/static/images/music/pause2.png');
});
currentPlayAudio.on("finish",()=>{
currentPlayAudio.pause();
_this.find('img').attr('src','/static/images/music/play2.png');
});
});
//音频轨道波形图
functioncreateMusicPic(audio_id){
if(!$('#list'+audio_id).attr('audio-src'))returnfalse;
//音频轨道
letwavesurfer=WaveSurfer.create({
container:'#list'+audio_id,
barWidth:1,
height:65,
waveColor:'#ffffff',
progressColor:'#6b6464',
cursorColor:'#6b6464',
cursorWidth:1
});
wavesurfer.load($('#list'+audio_id).attr('audio-src'));
returnwavesurfer;
}
