这篇文章给大家介绍了“vue中怎样安装和导入wavesurfer解决音频问题”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

及vue解决音频可视化播放，使用wavesurfer.js问题，效果图如下所示：

上效果：

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>
</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;
  #f0f2f5;
  padding: 30px;
  /* min-height: calc(100vh - 84px); */
}
.el-card__body {
  height: 70px !important;
  padding: 0 auto !important;
.card {
  height: 70px;
#waveform {
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解决音频问题”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript中的Array.from用于什么，写法要注意哪些

  Array.from可以从类似的数组或可迭代对象中创建一个新的、浅拷贝的数组实例。Array.from接收三个参数：必须选择类似数组的对象、加工函数、this作用域。

• 为何vue打包静态文件不可以直接运行？

  这篇文章主要给大家探讨vue打包的静态文件不可以直接运行的问题，对于这个问题一些朋友不是很理解，对此本文我们就来了解看看原因及解决方法，感兴趣的朋友可以参考一下，希望大家阅读完这篇文章能有所收获，下面我们一起来学习一下吧。

• 详解class语法糖，有哪些基础知识要了解

  目录引言class 第一个好：私有变量class 第二个好：super 继承引言在很早以前，写过一篇文章 “类”设计模式和“原型”设计模式——“复制”和“委托”的差异 ，大致意思就是说：代码复用，也就是继承、重写，有两种思路：1. 面向对象的类继承；2. 基于 JavaScript 原型链的原型继承；前者的主要特点是：

• vue怎样实现图片切换，原理和代码是什么

  这篇文章主要为大家详细介绍了vue实现图片切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• vue怎样实现登录切换的功能？

  vue怎样实现登录切换的功能？因为一些系统的用户登录身份不同，所以需要登录切换的功能，例如师生系统的学生和教师登录，本文就给大家分享一下怎样用vue实现简单的登录切换功能。