前言:vue中嵌入使用wavesurfer.js的教程詳見:https://blog.csdn.net/zrcj0706/article/details/104635357
1、Regions插件的使用效果如下圖所示
2、Regions插件的使用見如下代碼
首先import引入插件依賴
import Regions from 'wavesurfer.js/dist/plugin/wavesurfer.regions.js'
<script>中,在WaveSurfer.create方法的plugins中定義Regions插件
this.wavesurfer = WaveSurfer.create({
// 應該在其中繪製波形的CSS選擇器或HTML元素。這是唯一必需的參數。
container: this.$refs.waveform,
plugins: [
// Regions
Regions.create({
regions: [
{
start: 1,
end: 3,
color: 'hsla(400, 100%, 30%, 0.5)'
},
{
start: 5,
end: 7,
color: 'hsla(200, 50%, 70%, 0.4)'
}
],
}),
]
});
3、完整代碼如下:
<template>
<div class="mixin-components-container">
<el-row>
<el-card class="box-card" style="text-align:left">
<div id="waveform" ref="waveform">
<!-- Here be the waveform -->
</div>
<div>
<el-button type="primary" @click="plays"> 播放/暫停</el-button>
</div>
</el-card>
</el-row>
</div>
</template>
<script>
import WaveSurfer from 'wavesurfer.js'
import Regions from 'wavesurfer.js/dist/plugin/wavesurfer.regions.js'
export default {
name: "Details",
// components: { MyWaveSurfer },
data() {
return {
wavesurfer: null,
};
},
mounted() {
this.$nextTick(() => {
console.log(WaveSurfer)
this.wavesurfer = WaveSurfer.create({
// 應該在其中繪製波形的CSS選擇器或HTML元素。這是唯一必需的參數。
container: this.$refs.waveform,
waveColor: 'violet',
// 光標後面的波形部分的填充色。當progressColor和waveColor相同時,完全不渲染進度波
progressColor: 'purple',
backend: 'MediaElement',
// 音頻播放時間軸
mediaControls: false,
// 播放音頻的速度
audioRate: '1',
// 插件:此教程配置了光標插件和時間軸插件
plugins: [
// Regions
Regions.create({
regions: [
{
start: 1,
end: 3,
color: 'hsla(400, 100%, 30%, 0.5)'
},
{
start: 5,
end: 7,
color: 'hsla(200, 50%, 70%, 0.4)'
}
],
}),
]
});
this.wavesurfer.on('error', function(e) {
console.warn(e);
});
this.wavesurfer.load(require('./peaks/sample.mp3'));
})
},
methods: {
// 播放時暫停,播放時暫停
plays() {
this.wavesurfer.playPause()
},
}
}
</script>
<style scoped>
.mixin-components-container {
background-color: #f0f2f5;
padding: 30px;
min-height: calc(100vh - 84px);
}
</style>
4、該插件的官網使用說明:https://wavesurfer-js.org/plugins/regions.html