安装 wavesurfer.js

在项目中安装 wavesurfer.js

npm install --save wavesurfer.js

常规方式引入

如果你的根目录中没有 components 目录则需要创建该目录,并在此目录中创建 WaveSurfer.vue 内容如下:

<template>
<div ref="wavesurferMain"></div>
</template>
<script setup>
import WaveSurfer from 'wavesurfer.js' const props = defineProps({
src:{
type:String,
required:true
},
options:{
type:Object,
}
});
const wavesurferMain = ref(null);
const waveSurfer = ref(null); let options = props.options;
let wsOptions = Object.assign({
container: wavesurferMain.value
},
options); waveSurfer.value = new WaveSurfer.create(wsOptions);
waveSurfer.value.load(props.src);
</script>

然后我们集成该组件,在这个例子中我们将在 app.vue 直接引用,并且我将测试音频文件 demo.wav,放在根目录的public 中。

<template>
<div>
<WaveSurfer src="/demo.wav":options="waveSurferOption" />
</div>
</template>
<script setup>
const waveSurferOption = {
height: 340,
progressColor: '#e03639',
waveColor: '#e7e7e7',
cursorColor: '#FFDDDD',
barWidth: 2,
mediaControls: true,
backend: 'MediaElement',
scrollParent:true,
xhr: {
mode: 'no-cors'
}
};
</script>

现在执行 npm run dev ,页面将报错 self is not defined

这是因为在 setup 这个生命周期中,DOM 节点并未创建,所以我们需要在mounted 阶段进行导入。

正确的引入方式

更改 WaveSurfer.vue 文件内容如下:

<template>
<div ref="wavesurferMain"></div>
</template>
<script setup>
const props = defineProps({
src:{
type:String,
required:true
},
options:{
type:Object,
}
}); const wavesurferMain = ref(null);
const waveSurfer = ref(null); onMounted(async ()=>{
const WaveSurfer = (await import('wavesurfer.js')).default;
const options = props.options;
const wsOptions = Object.assign({
container: wavesurferMain.value
},
options);
waveSurfer.value = new WaveSurfer.create(wsOptions);
waveSurfer.value.load(props.src);
});
</script>

现在你应该能看到已经可以正常加载了。

加载插件

加载方式和插件一样,官方的插件在 wavesurfer.js/dist/plugin 目录下,这个例子将加载时间线插件如下:

<template>
<div ref="wavesurferMain"></div>
<div ref="waveTimeline"></div>
</template>
<script setup>
const props = defineProps({
src:{
type:String,
required:true
},
options:{
type:Object,
}
}); const wavesurferMain = ref(null);
const waveTimeline = ref(null);
const waveSurfer = ref(null); onMounted(async ()=>{
const WaveSurfer = (await import('wavesurfer.js')).default;
const Timeline = (await import('wavesurfer.js/dist/plugin/wavesurfer.timeline')).default;
const options = props.options;
const wsOptions = Object.assign({
container: wavesurferMain.value,
plugins:[
Timeline.create({container:waveTimeline.value})
]
},
options);
waveSurfer.value = new WaveSurfer.create(wsOptions);
waveSurfer.value.load(props.src); });
</script>

加载波形数据

如果音频文件过大,使用插件原生的波形生成方式会非常慢。这个时候可以通过服务端生成波形数据,并让插件直接通过波形数据进行渲染。具体生成方式可以参考官方的解决方案FAQ。在这个项目中,生成波形数据文件后,我把它移动到项目的public中,更改 WaveSurfer.vue 内容如下:

<template>
<div ref="wavesurferMain"></div>
<div ref="waveTimeline"></div>
</template>
<script setup>
const props = defineProps({
src:{
type:String,
required:true
},
peaksData:{
type:String,
},
options:{
type:Object,
}
}); const wavesurferMain = ref(null);
const waveTimeline = ref(null);
const waveSurfer = ref(null); onMounted(async ()=>{
const WaveSurfer = (await import('wavesurfer.js')).default;
const Timeline = (await import('wavesurfer.js/dist/plugin/wavesurfer.timeline')).default;
const options = props.options;
const wsOptions = Object.assign({
container: wavesurferMain.value,
plugins:[
Timeline.create({container:waveTimeline.value})
]
},
options);
waveSurfer.value = new WaveSurfer.create(wsOptions);
fetch(props.peaksData)
.then(response => {
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
return response.json();
})
.then(peaks => {
waveSurfer.value.load(props.src,peaks.data);
})
.catch((e) => {
console.error('error', e);
}); });
</script>

app.vue 中变更如下:

<template>
<div>
<WaveSurfer src="/demo.wav" peaks-data="/demo.json" :options="waveSurferOption" />
</div>
</template>
<script setup>
const waveSurferOption = {
height: 340,
progressColor: '#e03639',
waveColor: '#e7e7e7',
cursorColor: '#FFDDDD',
barWidth: 2,
mediaControls: false,
backend: 'MediaElement',
scrollParent:true,
xhr: {
mode: 'no-cors'
}
}
</script>

暴露插件的方法

现在我们只是正常初始化插件并让它加载了音频文件,目前我们并不能操作它。

因为 Vue3 中,默认并不会暴露 <script setup> 中声明的绑定。我们需要使用 defineExpose 来暴露对应的属性。WaveSurfer.vue 如下变更:

<template>
<div ref="wavesurferMain"></div>
<div ref="waveTimeline"></div>
</template>
<script setup>
const props = defineProps({
src:{
type:String,
required:true
},
peaksData:{
type:String,
},
options:{
type:Object,
}
}); const wavesurferMain = ref(null);
const waveTimeline = ref(null);
const waveSurfer = ref(null); onMounted(async ()=>{
// 省略逻辑 });
defineExpose(
{
waveSurfer
}
)
</script>

app.vue 中我们可以这样调用:

<template>
<div>
<WaveSurfer ref="refWaveSurfer" src="/demo.wav" peaks-data="/demo.json" :options="waveSurferOption"/>
<button @click="play">play</button>
<button @click="pause">pause</button>
</div>
</template>
<script setup>
const waveSurferOption = {
height: 340,
progressColor: '#e03639',
waveColor: '#e7e7e7',
cursorColor: '#FFDDDD',
barWidth: 2,
mediaControls: false,
backend: 'MediaElement',
scrollParent:true,
xhr: {
mode: 'no-cors'
}
}
const refWaveSurfer = ref(null); function play() {
refWaveSurfer.value.waveSurfer.play(); // 调用播放方法
} function pause(){
refWaveSurfer.value.waveSurfer.pause(); // 调用暂停方法
}
</script>

项目

你可以在以下仓库看到完整的示例

https://github.com/AnyStudy/nuxt-3-wavesurfer-demo

如何在 Nuxt 3 中使用 wavesurfer.js的更多相关文章

  1. 如何在 Windows 10 中搭建 Node.js 环境?

    [编者按]本文作者为 Szabolcs Kurdi,主要通过生动的实例介绍如何在 Windows 10 中搭建 Node.js 环境.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 在本文中 ...

  2. 如何在vue项目中使用md5.js及base64.js

    一.在项目根目录下安装 npm install --save js-base64 npm install --save js-md5 二.在项目文件中引入 import md5 from 'js-md ...

  3. 如何在nuxt中添加proxyTable代理

    背景 在本地开发vue项目的时候,当你习惯了proxyTable解决本地跨域的问题,切换到nuxt的时候,你会发现,添加了proxyTable设置并没有什么作用,那是因为你是用的vue脚手架生成的vu ...

  4. [译]How to Install Node.js on Ubuntu 14.04 如何在ubuntu14.04上安装node.js

    原文链接为 http://www.hostingadvice.com/how-to/install-nodejs-ubuntu-14-04/ 由作者Jacob Nicholson 发表于October ...

  5. 如何在Google Map中处理大量标记(ASP.NET)(转)

    如何在Google Map中处理大量标记(ASP.NET)(原创-翻译) Posted on 2010-07-29 22:04 Happy Coding 阅读(8827) 评论(8) 编辑 收藏 在你 ...

  6. 如何在NodeJS项目中优雅的使用ES6

    如何在NodeJS项目中优雅的使用ES6 NodeJs最近的版本都开始支持ES6(ES2015)的新特性了,设置已经支持了async/await这样的更高级的特性.只是在使用的时候需要在node后面加 ...

  7. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  8. 应用wavesurfer.js绘制音频波形图小白极速上手总结

    一.简介 1.1  引   人生中第一份工作公司有语音识别业务,需要做一个web网页来整合语音引擎的标注结果和错误率等参数,并提供人工比对的语音标注功能(功能类似于TranscriberAG等),(博 ...

  9. 在 Ionic2 TypeScript 项目中导入第三方 JS 库

    原文发表于我的技术博客 本文分享了在Ionic2 TypeScript 项目中导入第三方 JS 库的方法,供参考. 原文发表于我的技术博客 1. Typings 的方式 因在 TypeScript 中 ...

  10. nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案

    node本身并不支持es6语法,我们通常在vue项目中使用es6语法,是因为,我们使用babel做过处理, 为了让项目支持es6语法,我们必须同时使用babel 去启动我们的程序,所以再启动程序中加 ...

随机推荐

  1. HTML基础知识(3)浮动、塌陷问题

    1.浮动 1.1 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  2. 齐博X1-栏目的调用1

    本节来说明下系统提供的几个栏目调用的方法 一节我们制作了一个公共导航,本节我们在首页index中演示下栏目的相关调用 至于其他的数据内容,参考第二季的标签调用即可,直接{qb:tag}调用就可以调用出 ...

  3. 自己动手写线程池——向JDK线程池进发

    自己动手写线程池--向JDK线程池进发 前言 在前面的文章自己动手写乞丐版线程池中,我们写了一个非常简单的线程池实现,这个只是一个非常简单的实现,在本篇文章当中我们将要实现一个和JDK内部实现的线程池 ...

  4. AgileBoot - 如何集成内置数据库H2和内置Redis

    本项目地址: github: https://github.com/valarchie/AgileBoot-Back-End gitee: https://gitee.com/valarchie/Ag ...

  5. JQuery中的DataTables表格插件

    一.DataTables表格插件的简介 DataTables是一个jQuery的表格插件.它具有以下特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定 ...

  6. 泛化之美 —— C++11 可变参数模板的妙用

    概述 首先这篇文章出自博客园作者:[qicosmos ],我对本文的实例代码进行了学习.思考和整理纠正,理清了文章的全部细节,觉得这是一篇让我受益匪浅的文章.之所以会接触「可变参数模板」这部分的内容, ...

  7. JSP Webshell免杀设计

    JSP Webshell免杀设计 @author:drag0nf1y 介绍 什么是Webshell? 被服务端解析执行的php.jsp文件 什么是RCE? remote command execute ...

  8. 类的编写模板之简单Java类

    简单Java类是初学java时的一个重要的类模型,一般由属性和getter.setter方法组成,该类不涉及复杂的逻辑运算,仅仅是作为数据的储存,同时该类一般都有明确的实物类型.如:定义一个雇员的类, ...

  9. 不用终端运行 Vue项目 基于Pycharm

    不用终端运行 Vue项目 基于Pycharm 如下图展示 接下来 然后单击右上角运行 即可完成运行

  10. Java单例模式,看这一篇就够了

    在创建型设计模式中,我们第一个学习的是单例模式(Singleton Pattern),这是设计模式中最简单的模式之一. 单例是什么意思呢? 单例就是单实例的意思,即在系统全局,一个类只创建一个对象,并 ...