脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Nuxt 3 使用 wavesurfer.js

教你如何在 Nuxt 3 中使用 wavesurfer.js

 更新时间：2023年01月15日 14:47:25   作者：GanymedeNil  
这篇文章主要介绍了如何在 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的文章就介绍到这了,更多相关Nuxt 3 使用 wavesurfer.js内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue中混入mixin的用法介绍

    Vue中混入mixin的用法介绍

    混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
    2022-10-10
  • 浅谈vue后台管理系统权限控制思考与实践

    浅谈vue后台管理系统权限控制思考与实践

    这篇文章主要介绍了浅谈vue后台管理系统权限控制思考与实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vuex的核心概念和基本使用详解

    vuex的核心概念和基本使用详解

    这篇文章主要为大家介绍了vuex的核心概念和基本使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • 实现一个Vue版Upload组件

    实现一个Vue版Upload组件

    这篇文章主要介绍了实现一个Vue版Upload组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-08-08
  • vant list组件滚动保留滚动条位置

    vant list组件滚动保留滚动条位置

    这篇文章主要介绍了vant list组件滚动保留滚动条位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue使用WebSocket模拟实现聊天功能

    vue使用WebSocket模拟实现聊天功能

    这篇文章主要介绍了vue使用WebSocket模拟实现聊天功能,通过创建node服务和server.js文件实例代码相结合给大家介绍的非常详细，需要的朋友可以参考下
    2021-08-08
  • vue eslint简要配置教程详解

    vue eslint简要配置教程详解

    这篇文章主要介绍了vue eslint简要配置,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-07-07
  • vue-devtools的安装步骤

    vue-devtools的安装步骤

    vue-devtools 是一款基于chrome游览器的插件，用于调试vue应用，这篇文章分步骤给大家介绍了vue-devtools的安装方法，需要的朋友参考下吧
    2018-04-04
  • vue实现点击某个div显示与隐藏内容功能实例

    vue实现点击某个div显示与隐藏内容功能实例

    最近做项目有用到某个div显示与隐藏内容,所以下面这篇文章主要给大家介绍了关于vue实现点击某个div显示与隐藏内容功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 基于Vue实现封装一个虚拟列表组件

    基于Vue实现封装一个虚拟列表组件

    正常情况下，我们对于数据都会分页加载，最近项目中确实遇到了不能分页的场景，如果不分页，页面渲染几千条数据就会感知到卡顿，使用虚拟列表就势在必行了。本文主要介绍了如何基于Vue实现封装一个虚拟列表组件，感兴趣的可以了解一下
    2023-03-03

最新评论