安装 wavesurfer.js
cnpm i wavesurfer.js --save
无 cnpm 的先运行 npm i cnpm -g 全局安装 cnpm
绘制音频波形图
常用的配置参数详见注释。
<template> <div style="padding: 30px"> <div ref="waveform_Ref"></div> <div style="padding: 30px"> <el-button type="primary" size="small" icon="el-icon-video-play" @click="playMusic" v-if="!playing" > 播放 </el-button ><el-button v-if="playing" type="primary" size="small" icon="el-icon-video-pause" @click="playMusic" > 暂停 </el-button> </div> </div> </template> <script> import WaveSurfer from "wavesurfer.js"; export default { data() { return { wavesurfer: null, playing: false, }; }, mounted() { this.$nextTick(() => { this.wavesurfer = WaveSurfer.create({ // 波形图的容器 container: this.$refs.waveform_Ref, // 已播放波形的颜色 // progressColor: "red", // 未播放波形的颜色 // waveColor: "lightgrey", // 波形图的高度,单位为px // height: 10, // 是否显示滚动条,默认为false // scrollParent: true, // 波形的振幅(高度),默认为1 // barHeight: 0.8, // 波形条的圆角 // barRadius: 2, // 波形条的宽度 // barWidth: 1, // 波形条间的间距 // barGap: 3 // 播放进度光标条的颜色 // cursorColor: "red", // 播放进度光标条的宽度,默认为1 // cursorWidth: 10, // 播放进度颜色 // progressColor: "blue", // 波形容器的背景颜色 // backgroundColor: "yellow", // 音频的播放速度 // audioRate: "1", // (与区域插件一起使用)启用所选区域的循环 // loopSelection:false }); this.wavesurfer.load(require("./《祝福你》群星_粤语.mp3")); }); }, methods: { playMusic() { this.wavesurfer.playPause.bind(this.wavesurfer)(); this.playing = !this.playing; }, }, }; </script> <style scoped> </style>
常用方法
播放/暂停
this.wavesurfer.playPause();
停止播放(播放进度光标回到音频起点)
this.wavesurfer.stop();
快进/快退播放
// 从当前位置向后快进2秒播放 this.wavesurfer.skip(2); // 从当前位置向后快退2秒播放 this.wavesurfer.skip(-2);
改变音量
参数值为0到1
– 0为静音
– 0.5为一半音量
– 1为最高音量
this.wavesurfer.setVolume(0.5);
改变音频播放速度
默认为1
this.wavesurfer.setPlaybackRate(2)
缩放波形图
参数是每秒音频的水平像素数。它还会更改参数minPxPerSec并启用该 scrollParent选项。
this.wavesurfer.zoom(88)
指定播放范围
从第10秒开始播放
this.wavesurfer.play(10);
播放第1-10秒之间的音频
this.wavesurfer.play(1, 10);
获取当前播放位置
this.wavesurfer.getCurrentTime()
获取音频片段的持续时间
this.wavesurfer.getDuration();
其他方法
创建播放实例后调用
- cancelAjax() – 取消音频文件加载过程。
- destroy() – 删除事件、元素并断开 Web 音频节点。
- empty() – 清除波形,就像加载了零长度音频一样。
- getActivePlugins() – 返回当前初始化的插件名称映射。
- getBackgroundColor() – 返回波形容器的背景颜色。
- getCursorColor() – 返回指示播放头位置的光标的填充颜色。
- getPlaybackRate() – 返回音频剪辑的播放速度。
- getProgressColor() – 返回光标后面波形的填充颜色。
- getVolume() – 返回当前音频剪辑的音量。
- getMute() – 返回当前静音状态。
- getFilters() – 返回当前设置过滤器的数组。
- getWaveColor() – 返回光标后波形的填充颜色。
- exportPCM(length, accuracy, noWindow, start)– 将 PCM 数据导出为 JSON 数组。可选参数length [number] - default: 1024, accuracy [number] - default: 10000, noWindow [true|false] - default: false,start [number] - default: 0
- exportImage(format, quality, type) – 将波形图像作为数据 URI 或 Blob 返回。
- isPlaying()–true如果当前正在播放则返回,否则返回false。
- load(url, peaks, preload)–URL通过 XHR加载音频。的可选数组peaks。可选preload参数[none|metadata|auto],如果使用后端 MediaElement ,则传递给Audio 元素。
- loadBlob(url)– 从Blob或File对象加载音频。
- on(eventName, callback)– 订阅事件。
- un(eventName, callback) – 取消订阅事件。
- unAll() – 取消订阅所有事件。
- pause() – 暂停播放。
- seekAndCenter(progress)– 寻求进度和中心视图[0…1](0 = 开始,1 = 结束)。
- seekTo(progress)– 寻求进步[0…1](0 = 开始,1 = 结束)。
- setBackgroundColor(color) – 设置波形容器的背景颜色。
- setHeight(height) – 设置波形的高度。
- setFilter(filters)- 用于将您自己的 WebAudio 节点插入图中。请参阅下面的连接过滤器。
- setPlayEnd(position) – 设置播放停止点(以秒为单位)。
- setMute(mute)– 静音当前声音。可以是true静音或false取消静音的布尔值
- setProgressColor(color) – 设置光标后面波形的填充颜色。
- setWaveColor(color) – 设置光标后波形的填充颜色。
- skipBackward()- 倒带skipLength秒。
- skipForward()- 跳过skipLength几秒钟。
- setSinkId(deviceId) - 设置接收器 ID 以更改音频输出设备。
- toggleMute() – 打开和关闭音量。
- toggleInteraction() – 切换鼠标交互。
- toggleScroll()– 切换scrollParent。
常用事件
使用on()和un() 方法订阅和取消订阅各种播放器事件
audioprocess– 在音频播放时持续触发。也在寻找上火。
dblclick – 双击实例时。
destroy – 当实例被销毁时。
error– 发生错误。回调将收到(字符串)错误信息。
finish – 当它完成播放时。
interaction – 与波形交互时。
loading– 使用 fetch 或 drag’n’drop 加载时连续触发。回调将以百分比 [0…100] 接收(整数)加载进度。
mute– 静音更改。回调将收到(布尔值)新的静音状态。
pause – 音频暂停时。
play – 播放开始时。
ready– 加载音频、解码并绘制波形时。使用 MediaElement 时,这会在绘制波形之前触发,请参阅waveform-ready。
scroll- 当滚动条移动时。回调将接收一个ScrollEvent对象。
seek– 在寻求。回调将收到(浮动)进度[0…1]。
volume– 关于音量变化。回调将接收(整数)新卷。
waveform-ready– 在使用 MediaElement 后端绘制波形后触发。如果您使用的是 - - - WebAudio 后端,则可以使用ready.
zoom– 关于缩放。回调将接收(整数)minPxPerSec。
自动播放
this.wavesurfer.load(require("./《祝福你》群星_粤语.mp3")); // 自动播放 let that = this; this.wavesurfer.on("ready", function () { that.wavesurfer.play(); });
谷歌浏览器默认禁止音频自动播放,解除此设置的方法为:
https://blog.csdn.net/weixin_41192489/article/details/127671295
插件–时间轴
<template> <div style="padding: 30px"> <div ref="waveform_Ref"></div> <div ref="timeline_Ref"></div> <div style="padding: 30px"> <el-button type="primary" size="small" icon="el-icon-video-play" @click="playMusic" v-if="!playing" > 播放 </el-button ><el-button v-if="playing" type="primary" size="small" icon="el-icon-video-pause" @click="playMusic" > 暂停 </el-button> </div> </div> </template> <script> import WaveSurfer from "wavesurfer.js"; //导入插件--时间轴 import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js"; export default { data() { return { wavesurfer: null, playing: false, }; }, mounted() { this.$nextTick(() => { this.wavesurfer = WaveSurfer.create({ container: this.$refs.waveform_Ref, plugins: [ //插件--时间轴的配置 Timeline.create({ container: this.$refs.timeline_Ref, fontSize: 14, //主要时间标签颜色 primaryColor: "#9191a5", //主要时间文字颜色 primaryFontColor: "#9191a5", //次要时间标签颜色 secondaryColor: "#9191a5", //次要时间文字颜色 secondaryFontColor: "#9191a5", }), ], }); this.wavesurfer.load(require("./《祝福你》群星_粤语.mp3")); }); }, methods: { playMusic() { this.wavesurfer.playPause(); this.playing = !this.playing; }, }, }; </script>
插件–指针轴
<template> <div style="padding: 30px"> <div ref="waveform_Ref"></div> </div> </template> <script> import WaveSurfer from "wavesurfer.js"; // 导入插件--指针轴 import CursorPlugin from "wavesurfer.js/dist/plugin/wavesurfer.cursor.js"; export default { data() { return { wavesurfer: null, }; }, mounted() { this.$nextTick(() => { this.wavesurfer = WaveSurfer.create({ container: this.$refs.waveform_Ref, plugins: [ // 插件--指针轴的配置 CursorPlugin.create({ showTime: true, opacity: 1, customShowTimeStyle: { "background-color": "#000", color: "#fff", padding: "2px", "font-size": "10px", }, }), ], }); this.wavesurfer.load(require("./《祝福你》群星_粤语.mp3")); }); }, }; </script>
插件–标注
<template> <div style="padding: 30px"> <div ref="waveform_Ref"></div> </div> </template> <script> import WaveSurfer from "wavesurfer.js"; // 导入插件--标注 import markers from "wavesurfer.js/dist/plugin/wavesurfer.markers.js"; export default { data() { return { wavesurfer: null, }; }, mounted() { this.$nextTick(() => { this.wavesurfer = WaveSurfer.create({ container: this.$refs.waveform_Ref, plugins: [ // 插件--标注的配置 markers.create({ markers: [ { time: 15, label: "第15秒", color: "red", }, { time: 40, label: "第40秒", color: "blue", position: "top", }, ], }), ], }); this.wavesurfer.load(require("./《祝福你》群星_粤语.mp3")); }); }, }; </script>
新增标注
this.wavesurfer.addMarker({ time: 60, label: "第60秒", color: "blue", position: "top", });
插件–区域
官方文档 https://wavesurfer-js.org/plugins/regions.html
<template> <div style="padding: 30px"> <div ref="waveform_Ref"></div> </div> </template> <script> import WaveSurfer from "wavesurfer.js"; // 导入插件--区域 import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.min.js"; export default { data() { return { wavesurfer: null, }; }, mounted() { this.$nextTick(() => { this.wavesurfer = WaveSurfer.create({ container: this.$refs.waveform_Ref, plugins: [ // 插件--区域的配置 RegionsPlugin.create({ regionsMinLength: 2, regions: [ { start: 10, end: 30, loop: false, color: "hsla(400, 100%, 30%, 0.5)", }, { start: 50, end: 70, loop: false, color: "hsla(200, 50%, 70%, 0.4)", minLength: 1, maxLength: 5, }, ], dragSelection: { slop: 5, }, }), ], }); this.wavesurfer.load(require("./《祝福你》群星_粤语.mp3")); }); }, }; </script>
新增区域
this.wavesurfer.addRegion({ start: 2, // 区域开始时间 end: 10,// 区域结束时间 color: "red",// 区域颜色 drag: false,// 是否可拖拽 loop: false,// 是否循环播放 resize: false,// 是否可改变大小 minLength: 1, // 区域最小值 maxLength: 5, // 区域最大值 });
清除区域
this.wavesurfer.clearRegions()
绘制视频波形图
https://wavesurfer-js.org/example/video-element/index.html
绘制渐变色的炫彩波形图
https://wavesurfer-js.org/example/gradient-fill-styles/index.html
改变左右声道
https://wavesurfer-js.org/example/panner/index.html
更多功能
详见官网文档 https://wavesurfer-js.org/docs/
实战范例
多区域音频标注(含区域实时切换显示)
https://blog.csdn.net/weixin_41192489/article/details/127671570