安装 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. JVM、JDK、JRE你分的清吗

    JVM.JDK.JRE你分的清吗 前言 在我们学习Java的时候,就经常听到"需要安装JDK"."运行需要JRE"."JVM调优"等等,这里 ...

  2. java实现双向链表的增删改查

    双向链表的增删改查 和单链表的操作很像:https://blog.csdn.net/weixin_43304253/article/details/119758276 基本结构 1.增加操作 1.链接 ...

  3. 齐博x1再来个抛砖引玉 内容页根据关键词调用相关内容 新功能哦!

    昨天升级了一个隐藏的功能,今天就简单的做个说明怎么用,反正也不能浪费不是 那就用内容页面关键词读取相关内容为例吧. 前台是你模型中已经存在keywords字段  关键词支持 空格分割,号分割 那么就开 ...

  4. 齐博x1页面不直接报错,如何排查

    有的页面是不会直接报错的,比如像下面这个,这个时候需要你用谷歌或火狐浏览器打开,按F12键进入开发者模式,然后选择Network选项,刷新一下当前的网页,就会看到红色的请求.单独打开他.就可以看到错误 ...

  5. 痞子衡嵌入式:i.MXRT中FlexSPI外设不常用的读选通采样时钟源 - loopbackFromSckPad

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是i.MXRT中FlexSPI外设不常用的读选通采样时钟源 - loopbackFromSckPad. 最近碰到一个客户,他们在 i.MX ...

  6. 《吐血整理》高级系列教程-吃透Fiddler抓包教程(30)-Fiddler如何抓取Android7.0以上的Https包-番外篇

    1.简介 通过宏哥前边几篇文章的讲解和介绍想必大家都知道android7.0以上,有android的机制不在信任用户证书,导致https协议无法抓包.除非把证书装在系统信任的证书里,此时手机需要roo ...

  7. 常用Linux命令(常年更新)

    Linux后台运行脚本: nohup python -u test.py > out.log 2>&1 & nohup sh **.sh > /dev/null 2& ...

  8. 19_Vue如何监测到对象类型数据发生改变的?

    数据更新 关于监视 我们之前讲过,我们在data当中配置的属性,最终会挂载在vue实例身上,而data这个配置项,最终也会在vue身上成为一个新的属性 == _data 当我们在页面DOM当中,去使用 ...

  9. MySQL数据库的性能分析 ---图书《软件性能测试分析与调优实践之路》-手稿节选

    1  .MySQL数据库的性能监控 1.1.如何查看MySQL数据库的连接数 连接数是指用户已经创建多少个连接,也就是MySQL中通过执行 SHOW  PROCESSLIST命令输出结果中运行着的线程 ...

  10. 洛谷 P4135 作诗 题解

    题面. 之前做过一道很类似的题目 洛谷P4168蒲公英 ,然后看到这题很快就想到了解法,做完这题可以对比一下,真的很像. 题目要求区间内出现次数为正偶数的数字的数量. 数据范围1e5,可以分块. 我们 ...