1.查看效果图
向前选中：
向后选中：
代码如下（示例）：
<template>
<div class="waveSurfer">
<div class="top">
<span @click="leftSelect">向前选中</span>
<span @click="rightSelect">向后选中</span>
<span @click="Region">标注</span>
</div>
<!-- 时间轴 -->
<div id="wave-timeline" />
<!-- 频谱图 -->
<div id="waveform">
<progress
id="progress"
class="progress progress-striped"
value="0"
max="100"
></progress>
</div>
<div v-show="ppt" id="wave-spectrogram" class="mt-20" />
<!-- 控制按钮 -->
<div class="title">
<ul>
<li>
<span @click="zoomIn"></span>
</li>
<li>
<span @click="rew"></span>
</li>
<li>
<span :class="{ on: isPlay }" @click="plays"></span>
</li>
<li>
<span @click="speek"></span>
</li>
<li>
<span @click="zoomOut"></span>
</li>
<li>
<span @click="replay"></span>
</li>
<li @click="toggleMute" :class="{ on: toggleMutebutton }" class="sound">
<span></span>
</li>
<li>
<input
@mouseup="volumeBarHandle"
v-model="volValue"
type="range"
min="0"
max="1"
value="0.8"
step="0.01"
/>
</li>
<li @click="DoubleSpeed(index)">
{{ speed[index] + " X" }}
</li>
</ul>
</div>
</div>
</template>
<script>
import WaveSurfer from "wavesurfer.js";
import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";
import Regions from "wavesurfer.js/dist/plugin/wavesurfer.regions.js";
export default {
data: function () {
return {
index: 0,
speed: [1.0, 1.5, 2.0, 0.5],
isPlay: false,
ppt: false,
ds: 1.0,
zoomValue: 100,
zoomMin: 100,
fast: 3,
back: 3,
noteData: [],
toggleMutebutton: true,
volValue: 0,
audioUrl: "",
loading: true,
};
},
// computed: {
// // 计算属性的 getter
// getUrl: function() {
// // `this` 指向 vm 实例
// return this.$store.state.voicetrain.url
// }
// },
// watch: {
// getUrl(newUrl) {
// this.loading = true
// this.audioUrl = newUrl
// document.getElementById('waveform').innerHTML = ''
// this.init()
// }
// },
mounted() {
this.audioUrl =
"http://192.168.1.101:8080/api/files/20201104/62afa213458d44b0a99440b33fb694b9";
this.init();
},
methods: {
// 初始化
init() {
document.getElementById("progress").style.display = "block";
this.$nextTick(() => {
this.wavesurfer = WaveSurfer.create({
container: "#waveform",
cursorColor: "#DB7093", // 声波播放进度线color
audioRate: 1,
scrollParent: true,
backend: "WebAudio",
barHeight: 1.5,
waveColor: "#43d996", // 声波color
progressColor: "#43d996", // 已播放声波color
loaderColor: "#8B0000",
hideScrollbar: false,
autoCenter: true,
height: 120,
splitChannels: true,
responsive: true,
minPxPerSec: 1,
plugins: [
Timeline.create({
container: "#wave-timeline",
fontSize: 14,
primaryFontColor: "#9191a5",
secondaryFontColor: "#9191a5",
primaryColor: "#9191a5",
secondaryColor: "#9191a5",
}),
Regions.create({}),
],
});
this.wavesurfer.addRegion({
loop: false,
drag: false,
resize: false,
color: "rgba(254, 255, 255, 0.4)",
});
// 加载进度条
this.wavesurfer.on("loading", function (percents) {
document.getElementById("progress").value = percents;
});
this.wavesurfer.load(this.audioUrl);
this.value = this.wavesurfer.getVolume() * 100; // 获取音量
this.zoomValue = this.wavesurfer.params.minPxPerSec;
this.zoomMin = this.wavesurfer.params.minPxPerSec;
this.wavesurfer.zoom(Number(this.zoomValue));
this.wavesurfer.panner = this.wavesurfer.backend.ac.createPanner();
this.wavesurfer.backend.setFilter(this.wavesurfer.panner);
let _this = this;
_this.wavesurfer.on("ready", function () {
_this.wavesurfer.enableDragSelection({
color: "rgba(0, 180, 0, 0.3)",
});
_this.wavesurfer.clearRegions();
_this.wavesurfer.zoom(_this.zoomValue);
// 音频加载完成
document.getElementById("progress").style.display = "none";
document.getElementById("progress").value = 0;
_this.isPlay = true;
_this.wavesurfer.play(0);
});
document.getElementById("waveform").onclick = function () {
_this.isPlay = false;
_this.wavesurfer.clearRegions();
};
// 更新区域时。回调将接收该Region对象。
// this.wavesurfer.on("region-updated", function (region) {
// region.playLoop(); // 循环播放选中区域
// _this.isPlay = true;
// });
_this.wavesurfer.on("region-created", _this.addRegion);
_this.wavesurfer.on("region-click", _this.editAnnotation);
_this.wavesurfer.on("finish", function () {
_this.wavesurfer.play(0);
});
});
},
addRegion(params) {
this.wavesurfer.clearRegions();
params.handleLeftEl.style.backgroundColor = "transparent";
params.handleRightEl.style.backgroundColor = "transparent";
},
toggleMute() {
if (this.toggleMutebutton) {
this.volumeCached = this.wavesurfer.getVolume();
this.wavesurfer.setVolume(0);
this.toggleMutebutton = false;
this.volValue = 0;
} else {
if (this.volumeCached == 0) this.volumeCached = 1;
this.wavesurfer.setVolume(this.volumeCached);
this.toggleMutebutton = true;
this.volValue = this.volumeCached;
}
},
volumeBarHandle(e) {
if (e.offsetX >= 0 && e.offsetX <= 80) {
this.toggleMutebutton = true;
this.wavesurfer.setVolume(e.offsetX / 80);
} else if (e.offsetX < 0) {
this.toggleMutebutton = false;
this.wavesurfer.setVolume(0);
} else {
this.wavesurfer.setVolume(1);
this.toggleMutebutton = true;
}
},
// 标注
Region() {
console.log(
Object.getOwnPropertyNames(this.wavesurfer.regions.list).length
);
if (
Object.getOwnPropertyNames(this.wavesurfer.regions.list).length == 0
) {
alert("请选择波纹");
return;
}
let start = 0,
end = 0;
for (var k in this.wavesurfer.regions.list) {
let obj = this.wavesurfer.regions.list[k];
start = obj.start.toFixed(2) * 1000;
end = obj.end.toFixed(2) * 1000;
}
console.log(this.wavesurfer);
console.log("开始", start);
console.log("结束", end);
},
// 播放
plays() {
this.isPlay = !this.isPlay;
this.wavesurfer.playPause(); //切换播放，应用播放或暂停
},
// 回退
rew() {
this.wavesurfer.skip(-this.back);
this.goPlay();
},
// 快进
speek() {
this.wavesurfer.skip(this.fast);
this.goPlay();
},
// 重载
replay() {
this.isPlay = true;
this.wavesurfer.stop();
this.wavesurfer.clearRegions();
this.wavesurfer.play(0);
},
// 倍速
DoubleSpeed(index) {
if (index === 3) {
this.index = 0;
this.wavesurfer.setPlaybackRate(this.speed[this.index]);
} else {
this.index = index + 1;
this.wavesurfer.setPlaybackRate(this.speed[this.index]);
}
console.log(this.wavesurfer);
},
// 缩放百分比显示格式
formatZoom(val) {
return val + 100 + " 像素 / 秒";
},
// 点击缩小
zoomIn() {
if (this.zoomValue >= 100) {
return;
}
this.zoomValue += 1;
this.wavesurfer.zoom(this.zoomValue);
},
// 点击扩大
zoomOut() {
if (this.zoomValue < -100) {
return;
}
this.zoomValue -= 1;
this.wavesurfer.zoom(this.zoomValue);
},
// 缩放监听
zoomChange() {
this.wavesurfer.zoom(Number(this.zoomValue));
},
goPlay() {
let start = this.wavesurfer.getCurrentTime();
this.wavesurfer.play(start);
},
// 向前选中
leftSelect() {
let end = this.wavesurfer.getCurrentTime(); // 获取当前播放位置
this.waveRegion(this.wavesurfer, 0, end, "rgba(0,180,0,.3)", true);
},
// 向后选中
rightSelect() {
let start = this.wavesurfer.getCurrentTime(); // 获取当前播放位置
let end = this.wavesurfer.getDuration(); // 获取音频片段的持续时间
this.waveRegion(this.wavesurfer, start, end, "rgba(0,180,0,.3)", true);
},
waveRegion(wavesurfer, start, end, color, clear) {
if (!clear) {
wavesurfer.clearRegions();
}
wavesurfer.addRegion({
start: start,
end: end,
color: color,
drag: false,
});
},
// 区域点击事件新建
saveRegions() {
console.log("声纹点击---");
this.noteData = [];
const _this = this;
this.noteData = Object.keys(_this.wavesurfer.regions.list).map(function (
id
) {
const region = _this.wavesurfer.regions.list[id];
return {
id: id,
edit: false,
start: Math.round(region.start * 10) / 10,
end: Math.round(region.end * 10) / 10,
attributes: region.attributes,
data: { note: region.data.note || "" },
};
});
},
// 区域点击
editAnnotation() {
this.isPlay = false;
},
showNote(region) {
if (!this.showNote.el) {
this.showNote.el = document.querySelector("#subtitle");
}
this.showNote.el.textContent = region.data.note || "–";
},
// 设置音量
setVolume(val) {
console.log(val);
this.wavesurfer.setVolume(val / 100);
},
// 实例点击
clearReagion() {
this.wavesurfer.clearRegions();
},
},
};
</script>
<style lang="scss" scoped>
#waveform {
position: relative;
}
.top {
width: 100%;
flex-basis: 70px;
line-height: 40px;
flex-shrink: 0;
color: white;
text-indent: 15px;
span,
el-slider {
color: rgb(39, 39, 39);
font-size: 13px;
font-weight: 700;
margin-right: 20px;
padding: 4px 10px;
border: 1px solid #ccc;
border-radius: 10px;
}
}
.title {
width: 100%;
flex-basis: 70px;
line-height: 40px;
text-align: left;
flex-shrink: 0;
color: white;
text-indent: 15px;
ul {
list-style-type: none;
padding-inline-start: 0;
.speed {
display: flex;
flex-direction: column;
}
li {
position: relative;
display: inline-block;
cursor: default;
&:hover {
}
&:active {
}
span {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
}
&:nth-child(1) span {
width: 27px;
height: 27px;
background: url("img/缩小.png") right;
background-size: cover;
}
&:nth-child(2) span {
background: url("img/kuaitui_bg.png") right;
background-size: cover;
}
&:nth-child(3) {
span {
background: url("img/bofang_bg.png") right;
background-size: cover;
}
.on {
background: url("img/zanting_bg.png") right;
background-size: cover;
}
}
&:nth-child(4) span {
background: url("img/kuaijin_bg.png") right;
background-size: cover;
}
&:nth-child(5) span {
background: url("img/缩放.png") right;
background-size: cover;
}
&:nth-child(6) span {
background: url("img/zhongbo.png") right;
background-size: cover;
}
&:nth-child(9) {
color: rgb(39, 39, 39);
font-size: 13px;
font-weight: 700;
}
&:nth-child(7) {
background: none;
span {
width: 25px;
height: 25px;
background: url("img/静音.png") no-repeat;
background-size: cover;
}
&.on {
span {
width: 25px;
height: 25px;
background: url("img/喇叭.png") no-repeat;
background-size: cover;
}
}
}
&:nth-child(8) {
width: 80px;
background: none;
input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
width: 80px;
height: 3px;
background-color: #bbbbbb;
position: absolute;
left: 0;
top: -14px;
&::-webkit-slider-thumb {
-webkit-appearance: none;
}
&::-moz-range-trackpseduo {
-moz-appearance: none;
}
&::-ms-track {
width: 100%;
cursor: pointer;
background: transparent; /* Hides the slider so custom styles can be added */
border-color: transparent;
color: transparent;
}
&:focus {
outline: none;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
height: 9px;
width: 9px;
margin-top: -1px;
background: #bbb;
border-radius: 50%;
border: solid 0.125em rgba(205, 224, 230, 0.5);
}
&::-moz-range-thumb {
-moz-appearance: none;
height: 6px;
width: 6px;
margin-top: -1px;
background: #bbb;
border-radius: 50%;
border: solid 0.125em rgba(205, 224, 230, 0.5);
}
&::-ms-track {
-moz-appearance: none;
height: 6px;
width: 6px;
margin-top: -1px;
background: #bbb;
border-radius: 50%;
border: solid 0.125em rgba(205, 224, 230, 0.5);
}
}
}
}
}
}
#wave-timeline {
height: 21px;
}
#waveform {
width: 100%;
flex-basis: 128px;
flex-shrink: 0;
position: relative;
}
#progress {
position: absolute;
width: 100%;
height: 4px;
background: #ccc;
top: 48%;
opacity: 0.7;
z-index: 44;
}
.mt-20 {
margin-top: 20px;
}
.mt-30 {
margin-top: 30px;
}
.waveSurfer {
width: 470px;
}
.waveSurfer >>> .el-slider__runway {
margin: 6px 0;
}
</style>
链接：https://wavesurfer-js.org
到此这篇关于wavesurfer.js绘制音频波形图的实现的文章就介绍到这了,更多相关wavesurfer.js 音频波形图内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码！
