如何在 Nuxt 3 中使用 wavesurfer.js
安装 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的更多相关文章
- 如何在 Windows 10 中搭建 Node.js 环境?
[编者按]本文作者为 Szabolcs Kurdi,主要通过生动的实例介绍如何在 Windows 10 中搭建 Node.js 环境.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 在本文中 ...
- 如何在vue项目中使用md5.js及base64.js
一.在项目根目录下安装 npm install --save js-base64 npm install --save js-md5 二.在项目文件中引入 import md5 from 'js-md ...
- 如何在nuxt中添加proxyTable代理
背景 在本地开发vue项目的时候,当你习惯了proxyTable解决本地跨域的问题,切换到nuxt的时候,你会发现,添加了proxyTable设置并没有什么作用,那是因为你是用的vue脚手架生成的vu ...
- [译]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 ...
- 如何在Google Map中处理大量标记(ASP.NET)(转)
如何在Google Map中处理大量标记(ASP.NET)(原创-翻译) Posted on 2010-07-29 22:04 Happy Coding 阅读(8827) 评论(8) 编辑 收藏 在你 ...
- 如何在NodeJS项目中优雅的使用ES6
如何在NodeJS项目中优雅的使用ES6 NodeJs最近的版本都开始支持ES6(ES2015)的新特性了,设置已经支持了async/await这样的更高级的特性.只是在使用的时候需要在node后面加 ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 应用wavesurfer.js绘制音频波形图小白极速上手总结
一.简介 1.1 引 人生中第一份工作公司有语音识别业务,需要做一个web网页来整合语音引擎的标注结果和错误率等参数,并提供人工比对的语音标注功能(功能类似于TranscriberAG等),(博 ...
- 在 Ionic2 TypeScript 项目中导入第三方 JS 库
原文发表于我的技术博客 本文分享了在Ionic2 TypeScript 项目中导入第三方 JS 库的方法,供参考. 原文发表于我的技术博客 1. Typings 的方式 因在 TypeScript 中 ...
- nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案
node本身并不支持es6语法,我们通常在vue项目中使用es6语法,是因为,我们使用babel做过处理, 为了让项目支持es6语法,我们必须同时使用babel 去启动我们的程序,所以再启动程序中加 ...
随机推荐
- HTML基础知识(3)浮动、塌陷问题
1.浮动 1.1 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- 齐博X1-栏目的调用1
本节来说明下系统提供的几个栏目调用的方法 一节我们制作了一个公共导航,本节我们在首页index中演示下栏目的相关调用 至于其他的数据内容,参考第二季的标签调用即可,直接{qb:tag}调用就可以调用出 ...
- 自己动手写线程池——向JDK线程池进发
自己动手写线程池--向JDK线程池进发 前言 在前面的文章自己动手写乞丐版线程池中,我们写了一个非常简单的线程池实现,这个只是一个非常简单的实现,在本篇文章当中我们将要实现一个和JDK内部实现的线程池 ...
- AgileBoot - 如何集成内置数据库H2和内置Redis
本项目地址: github: https://github.com/valarchie/AgileBoot-Back-End gitee: https://gitee.com/valarchie/Ag ...
- JQuery中的DataTables表格插件
一.DataTables表格插件的简介 DataTables是一个jQuery的表格插件.它具有以下特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定 ...
- 泛化之美 —— C++11 可变参数模板的妙用
概述 首先这篇文章出自博客园作者:[qicosmos ],我对本文的实例代码进行了学习.思考和整理纠正,理清了文章的全部细节,觉得这是一篇让我受益匪浅的文章.之所以会接触「可变参数模板」这部分的内容, ...
- JSP Webshell免杀设计
JSP Webshell免杀设计 @author:drag0nf1y 介绍 什么是Webshell? 被服务端解析执行的php.jsp文件 什么是RCE? remote command execute ...
- 类的编写模板之简单Java类
简单Java类是初学java时的一个重要的类模型,一般由属性和getter.setter方法组成,该类不涉及复杂的逻辑运算,仅仅是作为数据的储存,同时该类一般都有明确的实物类型.如:定义一个雇员的类, ...
- 不用终端运行 Vue项目 基于Pycharm
不用终端运行 Vue项目 基于Pycharm 如下图展示 接下来 然后单击右上角运行 即可完成运行
- Java单例模式,看这一篇就够了
在创建型设计模式中,我们第一个学习的是单例模式(Singleton Pattern),这是设计模式中最简单的模式之一. 单例是什么意思呢? 单例就是单实例的意思,即在系统全局,一个类只创建一个对象,并 ...