WEB端实现PCM裸流播放 |
您所在的位置：网站首页 › 如何使浏览器加速播放音频 › WEB端实现PCM裸流播放 |
WEB端实现PCM裸流播放
|
0x00 序
近日有这样一个需求，在web端播放PCM裸流，即数据提供方给出的都是**.pcm文件，而我们需要在页面上给出该音频的播放控制器（至少可以支持play、pause）。至于为什么不让数据提供方直接给wav文件呢？因为数据提供方是Ng（匿..） 0x01 HTML5 Audio在HTML5标准网页中，我们可以运用 和 元素来实现浏览器兼容的网页声音调用及播放： 标签定义外部（非 HTML）内容的容器，如果浏览器不支持该文件格式，没有插件的话就无法播放该音频元素是一个HTML5元素，在老式浏览器中不起作用以下是示例的调用方法： 上述代码将会提供一个音频播放的控制器，HTML5 元素使用了两个不同的音频格式，会尝试以ogg或mp3来播放音频；如果失败，代码将回退尝试元素。 其中的属性主要有： controls: 唯一可选值为controls，出现controls属性并准确赋值时，音频播放控件将会显示，控件包括：播放、暂停、定位、音量、全屏切换、字幕（如果可用）、音轨（如果可用）。autoplay: 唯一可选值为autoplay，出现autoplay属性并准确赋值时，音频将会自动播放loop: 唯一可选值为loop，出现loop属性并准确赋值时，音频将会循环播放。preload: 可选值有auto(当页面加载后载入整个音频)、meta(当页面加载后只载入元数据)和none(当页面加载后不载入音频) 如果设置了前面的autoplay属性，那么preload将会被忽略。src: 指定音频URL地址，可以是相对的URL也可以是绝对的URL；当然还可以像上述例子一样，用source标签来指定源。 0x02 PCM文件 & WAV文件虽然如上节所述，当前HTML5已经对音频播放提供了很多便利，但是是否就可以满足在0x00中提出的需求呢？答案是否定的：并不支持.pcm文件的播放。 PCM那么PCM文件到底是什么样的格式呢？ PCM（Pulse Code Modulation），也被称为脉码编码调制。PCM文件是模拟音频信号经模数转换（A/D变换）直接形成的二进制序列，该文件没有附加的文件头和文件结束标志。PCM中的声音数据没有被压缩，如果是单声道的文件，采样数据按时间的先后顺序依次存入。 但是只有这些数字化的音频二进制序列并不能够播放，因为任何的播放器都不知道应该以什么样的声道数、采样频率和采样位数播放，这个二进制序列没有任何自描述性。 WAV在这里，就必须要提提WAV文件了。 WAVE（Waveform Audio File Format），又或者是因为扩展名而被大众所知的WAV，也是一种无损音频编码。WAV文件可以当成是PCM文件的wrapper，实际上查看pcm和对应wav文件的hex文件，可以发现，wav文件只是在pcm文件的开头多了44bytes，来表征其声道数、采样频率和采样位数等信息。 由于其具有自描述性，WAV文件可以被基本所有的音频播放器播放，包括HTML5的。 自然而言的认为，若我们需要在web端播放纯纯的PCM码流，是否只需要在其头部加上44bytes转成对应的WAV文件，就可以播放了。 那么这44bytes应该怎么加呢？ WAV文件格式WAV是微软开发的一种声音文件格式，符合RIFF(Resource Interchange File Format)文件规范，用于保存音频信息资源。RIFF文件都在数据块前有文件头。 标准的wav文件格式如下图所示：
举例说明（hex格式）： 52 49 46 46 24 08 00 00 57 41 56 45 66 6d 74 20 10 00 00 00 01 00 02 00 22 56 00 00 88 58 01 00 04 00 10 00 64 61 74 61 00 08 00 00 00 00 00 00 24 17 1e f3 3c 13 3c 14 16 f9 18 f9 34 e7 23 a6 3c f2 24 f2 11 ce 1a 0d
至此，我们已经知道了WAV文件头的格式，感觉就可以通过PCM码流生成对应的WAV格式文件了，那就开动了~ 定义WAV文件头的格式 this.header = { // OFFS SIZE NOTES chunkId : [0x52,0x49,0x46,0x46], // 0 4 "RIFF" = 0x52494646 chunkSize : 0, // 4 4 36+SubChunk2Size = 4+(8+SubChunk1Size)+(8+SubChunk2Size) format : [0x57,0x41,0x56,0x45], // 8 4 "WAVE" = 0x57415645 subChunk1Id : [0x66,0x6d,0x74,0x20], // 12 4 "fmt " = 0x666d7420 subChunk1Size: 16, // 16 4 16 for PCM audioFormat : 1, // 20 2 PCM = 1 numChannels : 1, // 22 2 Mono = 1, Stereo = 2... sampleRate : 8000, // 24 4 8000, 44100... byteRate : 0, // 28 4 SampleRate*NumChannels*BitsPerSample/8 blockAlign : 0, // 32 2 NumChannels*BitsPerSample/8 bitsPerSample: 8, // 34 2 8 bits = 8, 16 bits = 16 subChunk2Id : [0x64,0x61,0x74,0x61], // 36 4 "data" = 0x64617461 subChunk2Size: 0 // 40 4 data size = NumSamples*NumChannels*BitsPerSample/8 };给定了PCM码流和指定了wav文件头中的一些参数后，生成wav文件形式 this.Make = function(data) { if (data instanceof Array) this.data = data; this.header.blockAlign = (this.header.numChannels * this.header.bitsPerSample) >> 3; this.header.byteRate = this.header.blockAlign * this.sampleRate; this.header.subChunk2Size = this.data.length * (this.header.bitsPerSample >> 3); this.header.chunkSize = 36 + this.header.subChunk2Size; this.wav = this.header.chunkId.concat( u32ToArray(this.header.chunkSize), this.header.format, this.header.subChunk1Id, u32ToArray(this.header.subChunk1Size), u16ToArray(this.header.audioFormat), u16ToArray(this.header.numChannels), u32ToArray(this.header.sampleRate), u32ToArray(this.header.byteRate), u16ToArray(this.header.blockAlign), u16ToArray(this.header.bitsPerSample), this.header.subChunk2Id, u32ToArray(this.header.subChunk2Size), (this.header.bitsPerSample == 16) ? split16bitArray(this.data) : this.data ); this.dataURI = 'data:audio/wav;base64,'+FastBase64.Encode(this.wav); };直接给出wav文件的dataURI作为的src var FastBase64 = { chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", encLookup: [], Init: function() { for (var i=0; i> 6] + this.chars[i & 0x3F]; } }, Encode: function(src) { var len = src.length; var dst = ''; var i = 0; while (len > 2) { n = (src[i] 0) { var n1= (src[i] & 0xFC) >> 2; var n2= (src[i] & 0x03) 1) n2 |= (src[++i] & 0xF0) >> 4; dst+= this.chars[n1]; dst+= this.chars[n2]; if (len == 2) { var n3= (src[i++] & 0x0F) > 6; dst+= this.chars[n3]; } if (len == 1) dst+= '='; dst+= '='; } return dst; } // end Encode }如此，便可以通过获取原始PCM码流，给定wav头中的对应参数，生成对应wav文件，并直接给定dataURI作为的src，如此页面上原先就已创建好的音频控制器就可以播放纯纯的PCM了。 0x04 文件和二进制数据的操作但现在又有问题了，数据提供方给出的都是存放在服务器的*.pcm的文件，可以通过url进行下载，但是如何获取到pcm文件的数组形式呢？ 实际上，XMLHttpRequest在Level2的时候就引入了responseType和response两个属性。可以通知浏览器把请求到得数据按照某种格式进行处理。 xhr.responseType：在发送请求之前，根据需求把xhr.responseType设置为”text”、”arraybuffer”、”blob”或者”document”，默认值是”text”。xhr.response：获取了数据之后，根据之前的responseType的值，response属性就是DOMString、ArrayBuffer、Blob或者Document格式的数据。获取文件内容，我们可以通过XHR方案： var xhr = new XMLHttpRequest(); xhr.open('GET', '/path/to/*.pcm', true）; xhr.responseType = 'arraybuffer'; xhr.onload = function (e) { var uInt8Array = new Uint8Array(this.response); // do something } xhr.send(); 0x05 后续后来啊，需求又变了啊.. 要么数据提供方会直接给出wav格式文件..要么是数据方给定pcm文件后，由我们自己转成wav之后再传到服务器上去.. 所以如果能在后端直接转好，也不需要在js端转了呢= = 就写了一个简单的java版本的wav转pcm放到github上去了，可以分析出wav文件的参数，也可以将pcm转为wav文件。 |
【本文地址】
今日新闻 |
推荐新闻 |