Wavesurfer.js 生成音浪波形图 （vue）
代码如下，可直接复制
<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 id="wave-timeline" ref="wave-timeline"><!--时间轴 --></div><div class="buttonBox"><el-button type="primary" @click="rew">后退</el-button><el-button type="primary" @click="plays"><i class="el-icon-video-play"></i>播放 /<i class="el-icon-video-pausee"></i>暂停</el-button><el-button type="primary" @click="speek">前进</el-button><el-button type="primary" @click="replay">重放</el-button><el-tooltipclass="item"effect="dark"content="指定播放"placement="bottom"><el-popover placement="top" width="200" trigger="click"><el-inputv-model="appointTime"placeholder="请输入内容"class="input-with-select"><el-button slot="append" @click="appointPlay">播放</el-button></el-input><el-button slot="reference" circle> 指定播放 </el-button></el-popover></el-tooltip><spanstyle="border: 2px solid #2f4f4f;margin-left: 8px;margin-right: 4px;"/><el-tooltipclass="item"effect="dark"content="音量"placement="bottom"><el-popoverplacement="top-start"trigger="click"style="min-width: 38px; margin-left: 10px"><div class="block" style="width: 42px"><el-sliderv-model="value"verticalheight="100px"@change="setVolume"/></div><el-button slot="reference" circle> 音量 </el-button></el-popover></el-tooltip><el-tooltipclass="item"effect="dark"content="播放倍速"placement="bottom"><el-popoverplacement="top"width="220"trigger="click"style="margin-left: 10px"><el-input-numberv-model="ds"width="180":precision="2":step="0.1":min="0.5":max="2"@change="DoubleSpeed"/><el-button slot="reference" round>{{ds + " X" }}</el-button></el-popover></el-tooltip></div></el-card></el-row></div></template><script>import WaveSurfer from "wavesurfer.js";import CursorPlugin from "wavesurfer.js/dist/plugin/wavesurfer.cursor.js";import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";export default {name: "Details",// components: { MyWaveSurfer },data() {return {wavesurfer: null,// 指定播放功能的播放时间点appointTime: 1,// 播放倍速ds: 1.0,// 设置音量value: 0,};},mounted() {this.$nextTick(() => {console.log(WaveSurfer);this.wavesurfer = WaveSurfer.create({// 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。container: this.$refs.waveform,// 光标的填充颜色，指示播放头的位置。cursorColor: "red",// 更改波形容器的背景颜色。backgroundColor: "gray",// 光标后的波形填充颜色。waveColor: "violet",// 光标后面的波形部分的填充色。当progressColor和waveColor相同时，完全不渲染进度波progressColor: "purple",backend: "MediaElement",// 音频播放时间轴mediaControls: false,// 播放音频的速度audioRate: "1",// 插件：此教程配置了光标插件和时间轴插件plugins: [// 光标插件CursorPlugin.create({showTime: true,opacity: 1,customShowTimeStyle: {"background-color": "#000",color: "#fff",padding: "2px","font-size": "10px",},}),// 时间轴插件Timeline.create({container: "#wave-timeline",}),],});this.wavesurfer.on("error", function (e) {console.warn(e);});this.wavesurfer.load(require("../assets/朴树-平凡之路.mp3"));});},methods: {// 播放时暂停，播放时暂停plays() {this.wavesurfer.playPause();},// 后退，rew() {this.wavesurfer.skip(-3);},// 前进，speek() {this.wavesurfer.skip(3);},// 重放replay() {this.wavesurfer.stop();},// 设置音量：setVolume(val) {this.wavesurfer.setVolume(val / 100);},// 指定播放appointPlay() {this.wavesurfer.play([this.appointTime]);},},};</script><style scoped>.mixin-components-container {background-color: #f0f2f5;padding: 30px;min-height: calc(100vh - 84px);box-sizing: border-box;}.buttonBox {margin-top: 20px;display: flex;justify-content: center;}</style>
