Vue3封裝hooks實現(xiàn)實時獲取麥克風音量
之前是在做一個electron項目中需要去檢測音量,檢測音量不是為了證明音量本身,而是去看看麥克風是否正常響應。
如圖所示:這是一個模仿騰訊會議的音量檢測的UI

在瀏覽器中是無法獲取真實設備的電平輸入的,所以此方法是通過后去音頻數(shù)據(jù)來計算出音量,并非系統(tǒng)實際音量
使用場景
- 在web端對麥克風進行檢測,看看麥克風是否有效
- 在electron、Capacitor等以web交互為主開發(fā)的應用都可以支持(比如:electron應用)
// useVolume.ts
import { ref } from 'vue'
/**
* 實時獲取麥克風音量
* 此方法是通過后去音頻數(shù)據(jù)來計算出音量,并非系統(tǒng)實際音量
* @param _audioContext 如果傳入AudioContext,則使用它,否則新建一個音頻來獲取音量大小
* @returns
*/
export const useVolume = () => {
const audioContext = ref<AudioContext | null>()
const analyser = ref<AnalyserNode | null>(null)
const isStart = ref<boolean>(false)
// 音量[0, 100]
const volume = ref<number>(0)
/**
* 開啟音量檢測
* @param _source 數(shù)據(jù)源
* @param _audioContext audio上下文 (用于在錄音的過程中同時去檢測,這樣就不需要再次創(chuàng)建多一個audio上下文)
* @param deviceId 麥克風設備ID,用于指定檢測那個麥克風的音量
*/
const startVolumeCheck = async (
_source?: MediaStreamAudioSourceNode | null,
_audioContext?: AudioContext | null,
deviceId?: string | null,
) => {
if (!audioContext.value) {
if (_audioContext) {
audioContext.value = _audioContext
} else {
audioContext.value = new AudioContext()
}
}
isStart.value = true
const mediaOptions = deviceId
? { audio: { deviceId: deviceId } }
: { audio: true }
let source = _source
if (!source) {
const stream = await navigator.mediaDevices.getUserMedia(mediaOptions)
source = audioContext.value.createMediaStreamSource(stream)
}
analyser.value = audioContext.value.createAnalyser()
analyser.value!.fftSize = 32
source.connect(analyser.value!)
// 創(chuàng)建數(shù)據(jù)緩沖區(qū)
const bufferLength = analyser.value!.frequencyBinCount
const dataArray = new Uint8Array(bufferLength)
// 定義更新音量的函數(shù)
function updateVolume() {
analyser.value!.getByteFrequencyData(dataArray)
let sum = 0
for (let i = 0; i < bufferLength; i++) {
sum += dataArray[i]
}
volume.value = Math.floor((sum / bufferLength / 255) * 100)
if (isStart.value) {
requestAnimationFrame(updateVolume)
} else {
volume.value = 0
}
}
// 開始更新音量
updateVolume()
}
// 暫停檢測
const stopVolumeCheck = () => {
isStart.value = false
analyser.value?.disconnect()
}
return {
startVolumeCheck,
stopVolumeCheck,
volume,
isStart,
}
}
提示:在檢測麥克風之前,需要獲取麥克風權限,并且獲取到你正在使用的麥克風
到此這篇關于Vue3封裝hooks實現(xiàn)實時獲取麥克風音量的文章就介紹到這了,更多相關Vue3獲取麥克風音量內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
通過Vue+axios獲取接口數(shù)據(jù)的示例詳解
這篇文章主要介紹了Vue結合axios獲取笑話接口數(shù)據(jù)的示例,重點講解axios的特性、使用方法及請求方式,演示如何通過get方法獲取數(shù)據(jù)并展示,同時解決this指向問題,感興趣的小伙伴跟著小編一起來看看吧2025-08-08
vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明
這篇文章主要介紹了vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明,具有很好的參考價值,希望大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
vue+openlayers+nodejs+postgis實現(xiàn)軌跡運動效果
使用postgres(postgis)數(shù)據(jù)庫以及nodejs作為后臺,vue和openlayers做前端,openlayers使用http請求通過nodejs從postgres數(shù)據(jù)庫獲取數(shù)據(jù),這篇文章主要介紹了vue+openlayers+nodejs+postgis實現(xiàn)軌跡運動,需要的朋友可以參考下2024-05-05
Element-UI組件實現(xiàn)面包屑導航欄的示例代碼
面包屑導航欄是一種用戶界面組件,用于展示用戶在網站或應用中的路徑,它包括了從主頁到當前頁面的鏈接序列,有助于用戶快速了解和導航至上級頁面,本文就來介紹一下Element-UI組件實現(xiàn)面包屑導航欄的示例代碼,感興趣的可以了解一下2024-09-09

