欢迎使用本组件

使用：

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

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

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

//这是的loading组件，需要loading的同学替换为你自己的，不需要的直接删除loading相关的代码

// 下面为音频组件

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.到这里使用就成功了，波形图样式的话，目前有三种在组件中，需要那种就注释其它两种就行。欢迎使用本组件

使用：

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

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

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

//这是的loading组件，需要loading的同学替换为你自己的，不需要的直接删除loading相关的代码

// 下面为音频组件

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