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

更新時間：2023年01月15日 14:47:25 作者：GanymedeNil

這篇文章主要介紹了如何在 Nuxt 3 中使用 wavesurfer.js,本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

安裝 wavesurfer.js

在項目中安裝 wavesurfer.js

npm install --save wavesurfer.js

常規(guī)方式引入

如果你的根目錄中沒有 components 目錄則需要創(chuàng)建該目錄，并在此目錄中創(chuàng)建 WaveSurfer.vue 內(nèi)容如下：

<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>

現(xiàn)在執(zhí)行 npm run dev ，頁面將報錯 self is not defined。
這是因為在 setup 這個生命周期中，DOM 節(jié)點并未創(chuàng)建，所以我們需要在mounted 階段進行導入。

正確的引入方式

更改 WaveSurfer.vue 文件內(nèi)容如下：

<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>

現(xiàn)在你應該能看到已經(jīng)可以正常加載了。

加載插件

加載方式和插件一樣，官方的插件在 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>

加載波形數(shù)據(jù)

如果音頻文件過大，使用插件原生的波形生成方式會非常慢。這個時候可以通過服務端生成波形數(shù)據(jù)，并讓插件直接通過波形數(shù)據(jù)進行渲染。具體生成方式可以參考官方的解決方案FAQ。在這個項目中，生成波形數(shù)據(jù)文件后，我把它移動到項目的public中，更改 WaveSurfer.vue 內(nèi)容如下：

<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>

暴露插件的方法

現(xiàn)在我們只是正常初始化插件并讓它加載了音頻文件，目前我們并不能操作它。
因為 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 中我們可以這樣調(diào)用：

<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();  // 調(diào)用播放方法 
}  
  
function pause(){  
  refWaveSurfer.value.waveSurfer.pause();  // 調(diào)用暫停方法
}  
</script>

項目

你可以在以下倉庫看到完整的示例

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

到此這篇關于如何在 Nuxt 3 中使用 wavesurfer.js的文章就介紹到這了,更多相關Nuxt 3 使用 wavesurfer.js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue組件通信中非父子組件傳值知識點總結
在本篇文章里小編給大家整理的是關于Vue組件通信中非父子組件傳值知識點總結，有興趣的朋友們學習下。
2019-12-12
解決vue build打包之后首頁白屏的問題
下面小編就為大家分享一篇解決vue build打包之后首頁白屏的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue3的動態(tài)組件是如何工作的
這篇文章主要介紹了vue3的動態(tài)組件是如何工作的，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下
2021-03-03
vue+elementUI中el-radio設置默認值方式
這篇文章主要介紹了vue+elementUI中el-radio設置默認值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-12-12
淺談一下Vue生命周期中mounted和created的區(qū)別
每一個vue實例從創(chuàng)建到銷毀的過程，就是這個vue實例的生命周期,在這個過程中，他經(jīng)歷了從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程,那么這些過程中，具體vue做了些啥，我們今天來了解一下
2023-05-05
使用Bootstrap4 + Vue2實現(xiàn)分頁查詢的示例代碼
本篇文章主要介紹了使用Bootstrap4 + Vue2實現(xiàn)分頁查詢的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
詳解Vue 匿名、具名和作用域插槽的使用方法
這篇文章主要介紹了Vue 匿名、具名和作用域插槽的使用方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-04-04
vue3.0基于views批量實現(xiàn)動態(tài)路由的方法(示例代碼)
以前vue項目中也有很多實現(xiàn)動態(tài)路由的方法,比如有一些項目涉及權限的可能會使用api請求路由數(shù)據(jù)在來createRouter,或者本地構建使用routes.push來動態(tài)構建路由, 今天介紹一種新的方式來基于某個文件夾批量構建動態(tài)路由的方法,感興趣的朋友一起看看吧
2024-12-12
vue中的proxyTable反向代理(親測有用)
這篇文章主要介紹了vue中的proxyTable反向代理(親測有用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
基于Vue2實現(xiàn)印章徽章組件
這篇文章主要介紹了如何基于vue2實現(xiàn)簡單的印章徽章控件,文中通過示例代碼講解詳細,具有一定的學習價值,需要的朋友們下面就跟隨小編來一起學習學習吧
2023-10-10