html5添加音波波形图,wavesurfer.js绘制音频波形图的实现

1.查看效果图

向前选中：

向后选中：

代码如下(示例)：

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({