摘要:格式文件中不包含頭部信息,播放器無法知道采樣率,聲道數,采樣位數,音頻數據大小等信息,導致無法播放。
本文記錄一點工作經歷,探討音頻文件的格式前言
更多訪問我的博客
最近在整理音視頻編程的知識,回憶起半年多,有一次需求是在后臺播放某來源的 pcm 文件,當時處理方法用了點技巧,記錄下來
背景:業務需求,在web后臺里播放 pcm 文件,文件不大(約300KB,已知 pcm 的參數采樣率16000,采樣位數16,聲道數1
如何播放瀏覽器是無法直接播放 pcm 音頻的,因為 pcm 是比較原始的音頻格式:
PCM(Puls Code Modulation)全稱脈碼調制錄音,PCM錄音就是將聲音的模擬信號表示成0,1標識的數字信號,未經任何編碼和壓縮處理,所以可以認為PCM是未經壓縮的音頻原始格式。PCM格式文件中不包含頭部信息,播放器無法知道采樣率,聲道數,采樣位數,音頻數據大小等信息,導致無法播放。
如何讓瀏覽器識別 pcm瀏覽器可以播放另一種音頻格式:WAV格式全稱為WAVE,前面提到只需要在PCM文件的前面添加WAV文件頭,就可以生成WAV格式文件
所以我的解決方法是給 pcm 添加 wav header,接下來就是 browser javascript 的實踐編碼了
javascript 如何處理文件流js 在處理文件流、網絡數據,常用到 ArrayBuffer 類型,關于 ArrayBuffer 類型的API調用方法,需要事先多了解。
第一步,ajax異步獲取網絡 pcm 文件的 ArrayBuffer
const getWebFileArrayBuffer = async (url) => { return await fetch(url).then(response => response.arrayBuffer()) }
第二步,對獲取的 pcm 文件流 ArrayBuffer 添加 wav header,我們先弄明白 header 的構造:
看以上圖片,我們需要將獲取到的 pcm data 添加 44 bytes 的 header,根據 header 的結構,對齊、緊湊地填充信息,在 javascript 中,需要使用 DataView 類型幫助我們進行字節填充的操作,注意DataView提供的 API 默認使用 little end 的數據格式,需要額外定義 big end 格式填充字節的方法。
以下以代碼來說明如何一步一步填充字節信息:
const getWebPcm2WavArrayBuffer = async (url) => { const bytes = await getWebFileArrayBuffer(url) return addWavHeader(bytes, 16000, 16, 1) // 這里是當前業務需求,特定的參數,采樣率16000,采樣位數16,聲道數1 } const addWavHeader = function (samples, sampleRateTmp, sampleBits, channelCount) { let dataLength = samples.byteLength /* 新的buffer類,預留 44 bytes 的 heaer 空間 */ let buffer = new ArrayBuffer(44 + dataLength) /* 轉為 Dataview, 利用 API 來填充字節 */ let view = new DataView(buffer) /* 定義一個內部函數,以 big end 數據格式填充字符串至 DataView */ function writeString (view, offset, string) { for (let i = 0; i < string.length; i++) { view.setUint8(offset + i, string.charCodeAt(i)) } } let offset = 0 /* ChunkID, 4 bytes, 資源交換文件標識符 */ writeString(view, offset, "RIFF"); offset += 4 /* ChunkSize, 4 bytes, 下個地址開始到文件尾總字節數,即文件大小-8 */ view.setUint32(offset, /* 32 */ 36 + dataLength, true); offset += 4 /* Format, 4 bytes, WAV文件標志 */ writeString(view, offset, "WAVE"); offset += 4 /* Subchunk1 ID, 4 bytes, 波形格式標志 */ writeString(view, offset, "fmt "); offset += 4 /* Subchunk1 Size, 4 bytes, 過濾字節,一般為 0x10 = 16 */ view.setUint32(offset, 16, true); offset += 4 /* Audio Format, 2 bytes, 格式類別 (PCM形式采樣數據) */ view.setUint16(offset, 1, true); offset += 2 /* Num Channels, 2 bytes, 通道數 */ view.setUint16(offset, channelCount, true); offset += 2 /* SampleRate, 4 bytes, 采樣率,每秒樣本數,表示每個通道的播放速度 */ view.setUint32(offset, sampleRateTmp, true); offset += 4 /* ByteRate, 4 bytes, 波形數據傳輸率 (每秒平均字節數) 通道數×每秒數據位數×每樣本數據位/8 */ view.setUint32(offset, sampleRateTmp * channelCount * (sampleBits / 8), true); offset += 4 /* BlockAlign, 2 bytes, 快數據調整數 采樣一次占用字節數 通道數×每樣本的數據位數/8 */ view.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2 /* BitsPerSample, 2 bytes, 每樣本數據位數 */ view.setUint16(offset, sampleBits, true); offset += 2 /* Subchunk2 ID, 4 bytes, 數據標識符 */ writeString(view, offset, "data"); offset += 4 /* Subchunk2 Size, 4 bytes, 采樣數據總數,即數據總大小-44 */ view.setUint32(offset, dataLength, true); offset += 4 /* 數據流需要以大端的方式存儲,定義不同采樣比特的 API */ function floatTo32BitPCM (output, offset, input) { input = new Int32Array(input) for (let i = 0; i < input.length; i++, offset += 4) { output.setInt32(offset, input[i], true) } } function floatTo16BitPCM (output, offset, input) { input = new Int16Array(input) for (let i = 0; i < input.length; i++, offset += 2) { output.setInt16(offset, input[i], true) } } function floatTo8BitPCM (output, offset, input) { input = new Int8Array(input) for (let i = 0; i < input.length; i++, offset++) { output.setInt8(offset, input[i], true) } } if (sampleBits == 16) { floatTo16BitPCM(view, 44, samples) } else if (sampleBits == 8) { floatTo8BitPCM(view, 44, samples) } else { floatTo32BitPCM(view, 44, samples) } return view.buffer }
第三步,在瀏覽器播放 pcm 轉出的 wav 的文件流 ArrayBuffer
先轉成 base64 格式
const getWebPcm2WavBase64 = async (url) => { let bytes = await getWebPcm2WavArrayBuffer(url) return `data:audio/wav;base64,${btoa(new Uint8Array(bytes).reduce((data, byte) => { return data + String.fromCharCode(byte) }, ""))}` }
將 base64 字符串放入組件中,這里以 react/ant design 的組件為例,封裝一個方法
const playWebPcm = async (url) => { try { let pcmBase64 = await fileServer.getWebPcm2WavBase64(url) Modal.info({ title: "播放音頻", content: ( ), onOk () {}, okText: "關閉", }) } catch (err) { console.error(err) message.error("預載音頻文件失敗") } }Reference
音頻格式簡介和PCM轉換成WAV,Java版本
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101326.html
摘要:以下就是用這種方法時應用所作的處理判斷要播放的音樂播放當前音樂在音樂播放完后繼續播放在應用程序中斷時作的操作是恢復時的操作是判斷要播放的音樂循環播放另一種辦法就是調用回調函數如或。 BREW中支持的音頻格式主要分為兩類:基于MIDI的文件格式和特殊編碼的音頻文件格式。基于MIDI的文...
摘要:純實現端錄音功能,功能并不是特別多,逐步增加中,詳細地址。使用轉碼到并播放小文件,大文件使用。其他資源基于阿里云實現簡單的語音識別功能學習與音頻播放實現音頻數據收集實現數據編碼轉化到格式與播放 純js實現web端錄音功能,功能并不是特別多,逐步增加中,詳細地址:github。 getUserMedia在非localhost和127的情況下,需要開啟https,由于騰訊云的沒備案,dem...
閱讀 2907·2021-10-19 10:09
閱讀 3125·2021-10-09 09:41
閱讀 3370·2021-09-26 09:47
閱讀 2687·2019-08-30 15:56
閱讀 590·2019-08-29 17:04
閱讀 979·2019-08-26 11:58
閱讀 2505·2019-08-26 11:51
閱讀 3352·2019-08-26 11:29