Vue3封裝hooks實現(xiàn)實時獲取麥克風(fēng)音量
之前是在做一個electron項目中需要去檢測音量,檢測音量不是為了證明音量本身,而是去看看麥克風(fēng)是否正常響應(yīng)。
如圖所示:這是一個模仿騰訊會議的音量檢測的UI
在瀏覽器中是無法獲取真實設(shè)備的電平輸入的,所以此方法是通過后去音頻數(shù)據(jù)來計算出音量,并非系統(tǒng)實際音量
使用場景
- 在web端對麥克風(fēng)進行檢測,看看麥克風(fēng)是否有效
- 在electron、Capacitor等以web交互為主開發(fā)的應(yīng)用都可以支持(比如:electron應(yīng)用)
// useVolume.ts import { ref } from 'vue' /** * 實時獲取麥克風(fēng)音量 * 此方法是通過后去音頻數(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 麥克風(fēng)設(shè)備ID,用于指定檢測那個麥克風(fēng)的音量 */ 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, } }
提示:在檢測麥克風(fēng)之前,需要獲取麥克風(fēng)權(quán)限,并且獲取到你正在使用的麥克風(fēng)
到此這篇關(guān)于Vue3封裝hooks實現(xiàn)實時獲取麥克風(fēng)音量的文章就介紹到這了,更多相關(guān)Vue3獲取麥克風(fēng)音量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
瀏覽器事件循環(huán)與vue nextTicket的實現(xiàn)
這篇文章主要介紹了瀏覽器事件循環(huán)(結(jié)合vue nextTicket)的實現(xiàn)方法,需要的朋友可以參考下2019-04-04詳解Vue的watch中的immediate與watch是什么意思
這篇文章主要介紹了詳解Vue的watch中的immediate與watch是什么意思,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12VUE 直接通過JS 修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)中解決方法分析
這篇文章主要介紹了VUE 直接通過JS 修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)中解決方法,結(jié)合實例形式詳細(xì)分析了VUE使用JS修改html對象的值導(dǎo)致沒有更新到數(shù)據(jù)的原因與解決方法,需要的朋友可以參考下2019-12-12用element的upload組件實現(xiàn)多圖片上傳和壓縮的示例代碼
這篇文章主要介紹了用element的upload組件實現(xiàn)多圖片上傳和壓縮的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02vue+bpmn.js實現(xiàn)自定義流程圖的完整代碼
這篇文章主要介紹了vue+bpmn.js實現(xiàn)自定義流程圖的完整代碼,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借價值,需要的朋友參考下吧2024-03-03vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解
這篇文章主要介紹了vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09Vue3.2?新增指令?v-memo?用法詳解(提高性能利器)
v-memo 接受一個依賴的數(shù)組,依賴的數(shù)組變化,v-memo 所對應(yīng)的 DOM 包括子集將會重新渲染,這篇文章主要介紹了Vue3.2?新增指令?v-memo?用法,提高性能的又一利器,需要的朋友可以參考下2022-09-09