目录安装 wavesurfer.js常规方式引入正确的引入方式加载插件加载波形数据暴露插件的方法项目安装 wavesurfer.js 在项目中安装 wavesurfer.js npm
在项目中安装 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的文章就介绍到这了,更多相关Nuxt 3 使用 wavesurfer.js内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: 教你如何在Nuxt3中使用wavesurfer.js
本文链接: https://www.lsjlt.com/news/177806.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0