音频可视化组件

2024-07-09 22:58| 来源: 网络整理| 查看: 265

欢迎使用本组件使用：

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 来进行调用。代码有注释，变量的话看注释创建

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

【本文地址】

公司简介

联系我们