vue解决音频可视化播放,使用wavesurfer.js
2021/4/27 10:29:32
本文主要是介绍vue解决音频可视化播放,使用wavesurfer.js,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
原文链接:https://www.jianshu.com/p/1996c7f105e3
上效果:
未播放时
已经播放时
1.安装wavesurfer
npm install wavesurfer.js
2.在页面导入
import WaveSurfer from 'wavesurfer.js'
注:我没有使用时间轴,所以没有引入,如果需要再引入
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js'
3.上源码
<template> <el-row> <el-card class="card" :body-style="{ padding: '10px' }"> <div id="waveform" ref="waveform"> </div> </el-card> </el-row> <div> <el-button type="primary" @click="playMusic"> <i class="el-icon-video-play"></i> 播放 / <i class="el-icon-video-pausee"></i> 暂停 </el-button> </div> </template> <script> import WaveSurfer from "wavesurfer.js"; // import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js"; export default { name: "Details", data() { return { wavesurfer: null, }; }, mounted() { this.$nextTick(() => { this.wavesurfer = WaveSurfer.create({ container: this.$refs.waveform, // waveColor: '#409EFF', barWidth: 1, cursorColor: "black", progressColor: "blue", backend: "MediaElement", // mediaControls: false, audioRate: "1", //使用时间轴插件 }); // 特别提醒:此处需要使用require(相对路径),否则会报错 this.wavesurfer.load(require("../mp3/living.mp3")); }); }, methods: { playMusic() { //"播放/暂停"按钮的单击触发事件,暂停的话单击则播放,正在播放的话单击则暂停播放 this.wavesurfer.playPause.bind(this.wavesurfer)(); }, }, }; </script> <style > .mixin-components-container { width: 100% !important; background-color: #f0f2f5; padding: 30px; /* min-height: calc(100vh - 84px); */ } .el-card__body { width: 100% !important; height: 70px !important; padding: 0 auto !important; } .card { width: 100% !important; height: 70px; } #waveform { height: 70px !important; } wave { height: 50px !important; } </style>
4.注释:
这个插件实在太吊了,官方文档太厉害,上链接:https://wavesurfer-js.org/
我用到了几个方法:
4.1.this.wavesurfer.play(0, 212); 指定开始时间和结束时间,以秒为单位,0秒开始,212秒结束
4.2.this.wavesurfer.on("pause", () => {
console.log('我暂停了')
});
监听暂停
4.3.this.wavesurfer.load(require("../mp3/living.mp3")); 读取目录路径里面的Mp3文件,可以测试用
this.wavesurfer.load('xxx.mp3')); 读取网络地址,有接口就用这个
这篇关于vue解决音频可视化播放,使用wavesurfer.js的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist