點燈坊

失くすものさえない今が強くなるチャンスよ

VAD 取得 WAV 格式檔案

Sam Xiao's Avatar 2024-06-21

由於 VAD 的 onSpeechEnd() 可回傳 Voice Buffer，可直接透過 Voice Buffer 轉成 WAV 格式，不必再透過 Extendable Media Recorder。

Version

Voice Activity Detection for JavaScript 0.7
Vue 2.6

Template

App.vue

<template>
  <div>
    <main class="main">
      <button @click="onTest">VAD Test</button>
    </main>
  </div>
</template>

<script>
import { MicVAD } from '@ricky0123/vad-web'
import { utils } from '@ricky0123/vad-web'

const FILE_NAME = 'sample.wav'

export default {
  name: 'App',
  data: () => ({
    myVad: null,
  }),
  methods: {
    async onTest() {
      console.warn('onTest')
      await this.initVad()
    },
    async initVad() {
      this.myVad = await MicVAD.new({
        async onSpeechStart() {
          console.warn('VAD.onSpeechStart')
        },
        onSpeechEnd(audio) {
          console.warn('VAD.onSpeechEnd')

          let wavBuffer = utils.encodeWAV(audio, 1, 16000, 1, 16)
          let blob = new Blob([wavBuffer])

          let link = document.createElement('a')
          link.href = URL.createObjectURL(blob)
          link.download = FILE_NAME
          link.click()
        },
      })

      console.warn('VAD.start')
      this.myVad.start()
    },
  },
}
</script>

Line 30

onSpeechEnd(audio) {
  console.warn('VAD.onSpeechEnd')

  let wavBuffer = utils.encodeWAV(audio, 1, 16000, 1, 16)
  let blob = new Blob([wavBuffer])

  let link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = FILE_NAME
  link.click()
}
  • onSpeecEnd() 提供了 audio array，可由 VAD 內建的 utils.encodeWAV() 將 audio array 轉成 WAV 格式

Conclusion

  • 由 VAD 取得 voice buffer 還有另外一個好處，就是不會有一開始落字的問題，若透過 Extendable Media Recorder 取得 voice buffer，由於該套件啟動也需要時間，因此會發現一開始講話會有落字問題

# VAD