更新记录

1.0.0（2023-10-17）

微信小程序音频可视化，音频波形图，组件传参方式为typeScript 方式。组件中有三种绘制样式，第一二种已被注释，需要哪种注释其它两种即可； 1.如绘制样式无法满足，可自行在 draw（）方法中新增。

平台兼容性

欢迎使用本组件

使用：

1.在那个页面使用就引入组件，挂载使用。

import AudioVisuali from "./components/audioVisuali/index.vue"; import Loading
from "./components/loading2.vue";

2.在 template 中使用，传参为音频地址 url ，组件中就会接收参数进行分析。组件中有 loading 参数，为传递到父级的 loading 变量值

//这是的loading组件，需要loading的同学替换为你自己的，不需要的直接删除loading相关的代码
<Loading
  v-show="audioLoading"
  class="audioLoad"
  :style="!audioLoading ? 'display:none' : ''"
></Loading>
// 下面为音频组件
<AudioVisuali
  v-show="!audioLoading"
  :url="url"
  ref="audios1"
  :style="audioLoading ? 'display:none' : ''"
  style="width: 100%;position: absolute;"
></AudioVisuali>

3.随便写一个 button 按钮，控制音频的播放、暂停，事件通过 ref 来进行调用。代码有注释，变量的话看注释创建

// 播放 暂停 playVoice(index){ let audios = this.$refs.audios1; // 获取dom
if(this.audioIndex!=index) { // 这里是因为我有多个音频才做判断
this.audioIndex=index; // 赋值当前点击的音频index if(audios.audioCtxThis!=null)
{ // 音频上下文，不为null（你也可以直接写audios.audioCtxThis判断） //
控制音频结束，且赋值为null audios.audioCtxThis.close() audios.audioCtxThis=null
} this.audioIsPlay = false; // 是否播放的参数，赋值false未播放 this.audioLoading
= true; // loading赋值为加载中true } setTimeout(() => { if(!this.audioIsPlay) {
// 判断是否播放中 audios.playVoice() // 调用子组件中的播放方法 } else {
audios.pauseVoice() // 调用子组件中的暂停方法 } }, 100); }

4.到这里使用就成功了，波形图样式的话，目前有三种在组件中，需要那种就注释其它两种就行。