浅析vue中wavesurfer.js的Timeline插件的使用

最新推荐文章于 2024-08-30 09:39:51 发布

只如初见0706

最新推荐文章于 2024-08-30 09:39:51 发布

阅读量3.2k

点赞数 2

分类专栏： Wavesurfer.js vue

本文链接：https://blog.csdn.net/zrcj0706/article/details/104674012

版权

本文详细介绍了在Vue项目中如何使用wavesurfer.js的Timeline插件，通过实例展示了插件效果，并提供了从引入依赖到具体代码实现的完整步骤。

摘要由CSDN通过智能技术生成

前言：vue中嵌入使用wavesurfer.js的教程详见：https://blog.csdn.net/zrcj0706/article/details/104635357

1、Timeline插件的使用效果如下图所示

2、Timeline插件的使用见如下代码

首先import引入插件依赖

import WaveSurfer from 'wavesurfer.js'//wavesurfer.js依赖
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js' //插件依赖

在<template>中定义插件的位置

<template>
  <div class="mixin-components-container">
    <el-row>
      <el-card class="box-card" style="text-align:left">
        <div id="waveform" ref="waveform">
          <!-- Here be the waveform -->
        </div>
        <div id="wave-timeline" ref="w