1、安装wavesurfer
npm install wavesurfer.js
2、在页面导入
import WaveSurfer from "wavesurfer.js"
//注:由于我使用了光标,所以引入了光标插件,具体根据需要自行引入
import CursorPlugin from "wavesurfer.js/dist/plugin/wavesurfer.cursor.js";
3、创建wavesurfer
createWaveSurfer(blob){
this.$nextTick(() => {
this.wavesurfer = WaveSurfer.create({
// 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。
container: this.$refs.waveform,
// 光标的填充颜色,指示播放头的位置。
cursorColor: "red",
// 更改波形容器的背景颜色。
backgroundColor: "transparent",
// 光标后的波形填充颜色。
waveColor: ["rgba(120, 130, 150, 0.25)"],
height:'64',
barWidth:2,
barGap:4,
// 光标后面的波形部分的填充色 (注:我这里使用的是渐变色,具体可参考官方文档 https://wavesurfer-js.org/example/gradient-fill-styles/index.html)
progressColor: ["#8A27A3", "#725FBC", "#5F9BBC", "#14C3CE" ," #5F9BBC", "#725FBC","#8927A3"],
backend: "MediaElement",
// 音频播放时间轴
mediaControls: false,
// 播放音频的速度
audioRate: "1",
// 配置光标插件
plugins: [
// 光标插件
CursorPlugin.create({
showTime: true,
opacity: 1,
customShowTimeStyle: {
"background-color": "#000",
color: "#fff",
padding: "2px",
"font-size": "10px",
},
}),
],
});
//三种加载音频方法
// 1、特别提醒:此处需要使用require(相对路径),否则会报错,可测试用读取本地音频文件
this.wavesurfer.load(require("../mp3/test.mp3"));
// 2、读取网络地址,接口返回链接地址可使用此方法
this.wavesurfer.load("xxx.mp3"));
// 3、(接下面第四步) 接口返回文件流,将文件流转化为blob,再将blob转换为URL
//可参考 https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
const objectURL = URL.createObjectURL(blob)
this.wavesurfer.load(objectURL);
});
},
4、获取接口返回文件(注:我这边接口返回的是文件流)
getSoundRecord() {
let url = process.env.VUE_APP_BASE_API + '/common-api/getSoundRecord';
const obj = await axios({
method: "get",
url:url,
params:{
callId:'302204121408075700002',
},
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
'Authorization':sessionStorage.getItem('token')
},
responseType: "blob"
}).then(res => {
// 文件字符内容转变成blob地址
let blob = new Blob([res.data]);
//获取到blob后,调用创建方法回传blob
this.createWaveSurfer(blob)
})
},
5、在mounted调用方法,一进入页面就可以加载音频
mounted() {
this.getSoundRecord()
},
以上就是wavesurfer.js播放音频文件方法,其他功能可具体参考 wavesurfer.js接口文档