vue3 ant ts 集成wavesurfer

本文主要是介绍vue3 ant ts 集成wavesurfer，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现功能有：音词同步，倍速播放，拖拽播放，快进\退 ，重播，显示总 时长，关闭页面时关闭声音等功能

package.json 引入 "wavesurfer.js": "^7.7.14",

父页面引入自己封的 MyWaveSurfer.vue

 <!--    waveSrc 录音地址参数 --><WaveSurfer :waveSrc="model['fsFilepath']"></WaveSurfer><script lang="ts" setup>import WaveSurfer from "@/views/recordCdr/MyWaveSurfer.vue";

MyWaveSurfer.vue

<template><a-card><Spin :tip="null" :spinning="loadLoading"><div :class="`wave-surfer`"  id="waveform" ></div><!-- <div id="wave-timeline" ref="wave-timeline" style="height: 0px;"> --><!--时间轴 --></div></Spin></a-card><a-card style="height: 62px"><div style="float: left;" v-if="playMs"><div style=";float: left">播放：&nbsp;&nbsp;</div><Icon icon="ant-design:play-circle-outlined"  title="播放" class="playIcon" style="font-size: 32px;color: #2e9aff"   @click="playMusic()"> </Icon></div><div style="float: left;" v-if="!playMs"><div style="float: left">暂停：&nbsp;&nbsp;</div><Icon icon="ant-design:pause-circle-outlined" title="暂停"    style="font-size: 30px;color: #2e9aff" @click="downMusic()"></Icon></div><div style="float: left;margin-left: 5%;"> 倍速：&nbsp;&nbsp;<a-select style="width: 90px;" :disabled="false" v-model:value="speedValue"  @change="speedClick"><a-select-option   value="1">1.0px</a-select-option><a-select-option v-for="item in options" :key="item.value"  :value="item.value">{{ item.text }}</a-select-option></a-select></div><div style="float: left;margin-left: 5%;"><Icon icon="ant-design:notification-filled" title="声音"     style="float: left;font-size: 29px;;color: #2e9aff" @click="downMusic()"></Icon><a-slider style="float: left;width: 200px"  v-model:value="voiceValue"   @afterChange="setVolume"  /></div><div style="float: left;margin-left: 5%;"><div style="float: left;margin-top: 2px">快退/快进 ：&nbsp;&nbsp;</div><Icon icon="ant-design:fast-backward-filled" title="快退"     style="float: left;font-size: 29px;;color: #2e9aff" @click="rew()"></Icon><div style="float: left;margin-top: 2px"> &nbsp;&nbsp;--&nbsp;&nbsp;</div><Icon icon="ant-design:fast-forward-filled" title="快进"     style="float: left;font-size: 29px;;color: #2e9aff" @click="speed()"></Icon></div><div style="float: left;margin-left: 5%;"><div style="float: left;margin-top: 2px">重播 ：&nbsp;&nbsp;</div><Icon icon=&

这篇关于vue3 ant ts 集成wavesurfer的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---