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

只如初见0706

于 2020-03-05 14:26:14 发布

阅读量3.4k

点赞数 2

分类专栏： Wavesurfer.js vue

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

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：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

最低0.47元/天解锁文章