如何在 Nuxt 3 中使用 wavesurfer.js

GanymedeNil發表於2023-01-13

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

相關文章