vue/javascript-音视频声纹响应组件wavesurfer使用简述

最新推荐文章于 2024-08-09 07:08:08 发布

shinjie1210

最新推荐文章于 2024-08-09 07:08:08 发布

阅读量1.9k

点赞数 1

文章标签： javascript node.js vue.js

本文链接：https://blog.csdn.net/shinjie1210/article/details/120420402

版权

本文简述了如何在Vue.js应用中使用Wavesurfer.js来创建音视频的声纹响应组件。首先介绍了实现效果，接着详细说明了安装和引用Wavesurfer.js的过程，包括DOM结构、关键的官方文档和大佬翻译文档的链接，以及必要的JS和CSS代码。

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

实现效果

左上电池是我扣的datav组件可以忽略

安装/引用组件

npm install wavesurfer.js --save

（datav安装）

npm install @jiaminghi/data-view

在使用界面引用

import WaveSurfer from 'wavesurfer.js' //导入wavesurfer.js
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js' //导入时间轴插件

（datav引用)

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

dom代码

<template>
	<div id="app" >
		<!-- 电池图 -->
		<dv-percent-pond :config="config" style="width:200px;height:100px;" />
		<div slot="header" class="clearfix title">
			<span>播放进度{
  {percent}}%</span>
		</div>
		<el-card >
		<div id="waveform" ref="waveform" @click="getTime">
			<!-- Here be the waveform -->
		</div>
		<div id="wave-timeline" ref="wave-timeline">
			<!--时间轴 -->
		</div>
		</el-card>
		<div>
			<!-- 播放/暂停按钮 -->
			<button @click="playMusic">
				<i class="el-icon-video-play"></i>
				播放 /
				<i class="el-icon-video-pausee"></i>
				暂停
			</button>
		</div>
		<el-row>
			<!-- 进度跳转 -->
			<button  @click="jump">24</button>
			<button  @click="jump">50</button>
		</el-row>
	</div>
</template>