附带音频图的播放器
效果图
前言：
对audio标签修改样式实在痛苦了，直接运用了下wavesurfer.js 效果看起来还行吧！那就废话不多说，上货！
wavesurfer.js官网 : https://wavesurfer-js.org/docs/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/wavesurfer.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="waveform"></div>
<div>
<input type="button" name="start" id="start" value="开始" />
<span id="Play_time">00:00</span>/
<span id="Total_time"></span>
</div>
<script type="text/javascript">
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
//录音文件
wavesurfer.load('2018.wav');
var isGo2 = false;
$("#start").click(function(){
if(isGo2) {
$(this).val("开始");
wavesurfer.playPause();
} else {
$(this).val("停止");
wavesurfer.playPause();
}
isGo2 = !isGo2;
})
// 加载时候
this.wavesurfer.on("loading", percents => {
// 当前加载的进度
this.percent = percents;
});
// 加载成功
this.wavesurfer.on("ready", () => {
this.progress = false;
var seconds= parseInt(wavesurfer.getDuration()); //总时间
var result = '';
var m = Math.floor(seconds/60%60);
var s = Math.floor(seconds%60)
result = "0" + m + ':' + s;
$('#Total_time').html(result)
});
// 播放中
this.wavesurfer.on("audioprocess", () => {
$('#Play_time').html('')
var currentTime = parseInt(this.wavesurfer.getCurrentTime()); //播放时的进度
var flow = '';
//分秒
var Min = Math.floor(currentTime/60%60);
var Sec = Math.floor(currentTime%60);
if(Sec<10){
flow = '00:0' + Sec
}
if(Min<10 && Sec <10) {
flow = '0' + Min + ':' +'0' + Sec
}
if(Sec>=10 && Min <10){
flow = '0' + Min + ':' + Sec
}
$('#Play_time').html(flow)
});
// 结束播放
this.wavesurfer.on("finish", () => {
this.wavesurfer.pause();
});
</script>
</body>
</html>
