安裝 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>
專案
你可以在以下倉庫看到完整的示例