欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

html5使用websocket发送(PCM)音频数据到服务器,再转在wav文件

程序员文章站 2022-07-14 20:45:04
...

PCM格式

html5使用websocket发送(PCM)音频数据到服务器,再转在wav文件

 

 

通过websocket发送音频数据。 

<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
<div>
    <button id="intercomBegin">开始对讲</button>
    <button id="intercomEnd">关闭对讲</button>
</div>
</body>
<script>
    var begin = document.getElementById('intercomBegin');
    var end = document.getElementById('intercomEnd');
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
    var ws = null;//实现WebSocket
    var record=null;//多媒体对象,用来处理音频
    var timeInte = null;//定义一个定时器
    begin.onclick = function() {
        console.log('开始对讲')
    }
    end.onclick = function() {
        console.log('关闭对讲')
        if(ws) {
            ws.close();
            record.stop();
            clearInterval(timeInte);
        }
    }

    function init(rec){
        record = rec;
    }
    if (!navigator.getUserMedia) {
        alert('浏览器不支持音频输入');
    }else{
        navigator.getUserMedia(
            { audio: true },
            function (mediaStream) {
                init(new Recorder(mediaStream));
            },function(error){
                console.log(error)
            }
        )
    }
    //录音对象
    var Recorder = function(stream) {
        var sampleBits = 16;//输出采样数位 8, 16
        var sampleRate = 8000;//输出采样率
        var context = new AudioContext();
        var audioInput = context.createMediaStreamSource(stream);
        var recorder = context.createScriptProcessor(4096, 1, 1);
        var audioData = {
            size: 0          //录音文件长度
            , buffer: []    //录音缓存
            , inputSampleRate: sampleRate    //输入采样率
            , inputSampleBits: 16      //输入采样数位 8, 16
            , outputSampleRate: sampleRate
            , oututSampleBits: sampleBits
            , clear: function() {
                this.buffer = [];
                this.size = 0;
            }
            , input: function (data) {
                this.buffer.push(new Float32Array(data));
                this.size += data.length;
            }
            , compress: function () { //合并压缩
                //合并
                var data = new Float32Array(this.size);
                var offset = 0;
                for (var i = 0; i < this.buffer.length; i++) {
                    data.set(this.buffer[i], offset);
                    offset += this.buffer[i].length;
                }
                //压缩
                var compression = parseInt(this.inputSampleRate / this.outputSampleRate);
                var length = data.length / compression;
                var result = new Float32Array(length);
                var index = 0, j = 0;
                while (index < length) {
                    result[index] = data[j];
                    j += compression;
                    index++;
                }
                return result;
            }, encodePCM: function(){//这里不对采集到的数据进行其他格式处理,如有需要均交给服务器端处理。
                var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);
                var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);
                var bytes = this.compress();
                var dataLength = bytes.length * (sampleBits / 8);
                var buffer = new ArrayBuffer(dataLength);
                var data = new DataView(buffer);
                var offset = 0;
                for (var i = 0; i < bytes.length; i++, offset += 2) {
                    var s = Math.max(-1, Math.min(1, bytes[i]));
                    data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
                }
                return new Blob([data]);
            }
        };
        this.start = function () {
            audioInput.connect(recorder);
            recorder.connect(context.destination);
        }

        this.stop = function () {
            recorder.disconnect();
        }

        this.getBlob = function () {
            return audioData.encodePCM();
        }

        this.clear = function() {
            audioData.clear();
        }

        recorder.onaudioprocess = function (e) {
            audioData.input(e.inputBuffer.getChannelData(0));
        }
    };


    function receive(data) {
        if( typeof e == 'string' && JSON.parse(e).message=='OK'){
            console.log('OK');
        }else{
            var buffer = (new Response(data)).arrayBuffer();
            buffer.then(function(buf){
                console.log("################recv start ####################################");
                var audioContext = new ( window.AudioContext || window.webkitAudioContext )();
                var fileResult =addWavHeader(buf, '8000', '16', '1');//解析数据转码wav
                audioContext.decodeAudioData(fileResult, function(buffer) {
                    _visualize(audioContext,buffer);//播放
                });
                console.log("################recv end ####################################");
            });
        }
    }


    //处理音频流,转码wav
    var addWavHeader = function(samples,sampleRateTmp,sampleBits,channelCount){
        var dataLength = samples.byteLength;
        var buffer = new ArrayBuffer(44 + dataLength);
        var view = new DataView(buffer);
        function writeString(view, offset, string){
            for (var i = 0; i < string.length; i++){
                view.setUint8(offset + i, string.charCodeAt(i));
            }
        }
        var offset = 0;
        /* 资源交换文件标识符 */
        writeString(view, offset, 'RIFF'); offset += 4;
        /* 下个地址开始到文件尾总字节数,即文件大小-8 */
        view.setUint32(offset, /*32*/ 36 + dataLength, true); offset += 4;
        /* WAV文件标志 */
        writeString(view, offset, 'WAVE'); offset += 4;
        /* 波形格式标志 */
        writeString(view, offset, 'fmt '); offset += 4;
        /* 过滤字节,一般为 0x10 = 16 */
        view.setUint32(offset, 16, true); offset += 4;
        /* 格式类别 (PCM形式采样数据) */
        view.setUint16(offset, 1, true); offset += 2;
        /* 通道数 */
        view.setUint16(offset, channelCount, true); offset += 2;
        /* 采样率,每秒样本数,表示每个通道的播放速度 */
        view.setUint32(offset, sampleRateTmp, true); offset += 4;
        /* 波形数据传输率 (每秒平均字节数) 通道数×每秒数据位数×每样本数据位/8 */
        view.setUint32(offset, sampleRateTmp * channelCount * (sampleBits / 8), true); offset +=4;
        /* 快数据调整数 采样一次占用字节数 通道数×每样本的数据位数/8 */
        view.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
        /* 每样本数据位数 */
        view.setUint16(offset, sampleBits, true); offset += 2;
        /* 数据标识符 */
        writeString(view, offset, 'data'); offset += 4;
        /* 采样数据总数,即数据总大小-44 */
        view.setUint32(offset, dataLength, true); offset += 4;
        function floatTo32BitPCM(output, offset, input){
            input = new Int32Array(input);
            for (var i = 0; i < input.length; i++, offset+=4){
                output.setInt32(offset,input[i],true);
            }
        }
        function floatTo16BitPCM(output, offset, input){
            input = new Int16Array(input);
            for (var i = 0; i < input.length; i++, offset+=2){
                output.setInt16(offset,input[i],true);
            }
        }
        function floatTo8BitPCM(output, offset, input){
            input = new Int8Array(input);
            for (var 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;
    }
    //播放音频
    var _visualize = function(audioContext, buffer) {
        var audioBufferSouceNode = audioContext.createBufferSource(),
            analyser = audioContext.createAnalyser(),
            that = this;
        //将信号源连接到分析仪
        audioBufferSouceNode.connect(analyser);
        //将分析仪连接到目的地(扬声器),否则我们将听不到声音
        analyser.connect(audioContext.destination);
        //然后将缓冲区分配给缓冲区源节点
        audioBufferSouceNode.buffer = buffer;
        //发挥作用
        if (!audioBufferSouceNode.start) {
            audioBufferSouceNode.start = audioBufferSouceNode.noteOn //在旧浏览器中使用noteOn方法
            audioBufferSouceNode.stop = audioBufferSouceNode.noteOff //在旧浏览器中使用noteOff方法
        };
        //如果有的话,停止前一个声音
        if (this.animationId !== null) {
            cancelAnimationFrame(this.animationId);
        }
        audioBufferSouceNode.start(0);
        audo.source = audioBufferSouceNode;
        audo.audioContext = audioContext;
    }


    begin.onclick = function() {

        var ws = new WebSocket("ws://127.0.0.1:6200");
        ws.binaryType = 'arraybuffer'; //传输的是 ArrayBuffer 类型的数据
        ws.onopen = function(event) {
            console.log('握手成功');
            //业务命令构建
            var data = {
                "cmd": "jtv",//发送命令
                "id": "018665897939",//发送设备id
                "type": 1,//对讲类型
                "channel": 0//语音通道
            }
            //ws.send(JSON.stringify(data));   //这里是发送消息。不包括音频数据,先注掉
        };
        timeInte=setInterval(function(){
            if(ws.readyState==1){//ws进入连接状态,则每隔500毫秒发送一包数据
                record.start();
                console.log("#######################send Blob start ##############################");
                console.log(record.getBlob());
                ws.send(record.getBlob());    //发送音频数据
                console.log("#######################send Blob end ##############################");
                record.clear();	//每次发送完成则清理掉旧数据
            }
        },500);  //每隔500ms发送一次,定时器

        ///////////////////////////////////////////////////////////////////////
        ws.onmessage = function (evt){

            console.log( "Received Message: " + evt.data);

            receive(evt.data);

        }
        ///////////////////////////////////////////////////////////////////////
    }


</script>
</html>

通过服务器来接收音频数据。这个时间可以以文件形式保存下来为.pcm就可以了。这里就使用工具来接收

 

html5使用websocket发送(PCM)音频数据到服务器,再转在wav文件

 

最后生成pcm文件

 

html5使用websocket发送(PCM)音频数据到服务器,再转在wav文件

 

保存好用.用Audacity工具来播放,看是不是正常的音频文件

 

html5使用websocket发送(PCM)音频数据到服务器,再转在wav文件

 

播放正常。证明是个pcm的音频文件。得到了pcm(裸数据),我们可以做一个把pcm转成wav文件

 

#include <stdio.h>
#include <string.h>

/**
 * Convert PCM16LE raw data to WAVE format
 * @param pcmpath       Input PCM file.
 * @param channels      Channel number of PCM file.
 * @param sample_rate   Sample rate of PCM file.
 * @param wavepath      Output WAVE file.
 */
int simplest_pcm16le_to_wave(const char *pcmpath, int channels, int sample_rate, const char *wavepath)
{

    printf("#########################1111#############################\n");
    typedef struct WAVE_HEADER{
        char    fccID[4];       //内容为""RIFF
        unsigned long dwSize;   //最后填写,WAVE格式音频的大小
        char    fccType[4];     //内容为"WAVE"
    }WAVE_HEADER;

    typedef struct WAVE_FMT{
        char    fccID[4];          //内容为"fmt "
        unsigned long  dwSize;     //内容为WAVE_FMT占的字节数,为16
        unsigned short wFormatTag; //如果为PCM,改值为 1
        unsigned short wChannels;  //通道数,单通道=1,双通道=2
        unsigned long  dwSamplesPerSec;//采用频率
        unsigned long  dwAvgBytesPerSec;/* ==dwSamplesPerSec*wChannels*uiBitsPerSample/8 */
        unsigned short wBlockAlign;//==wChannels*uiBitsPerSample/8
        unsigned short uiBitsPerSample;//每个采样点的bit数,8bits=8, 16bits=16
    }WAVE_FMT;

    typedef struct WAVE_DATA{
        char    fccID[4];       //内容为"data"
        unsigned long dwSize;   //==NumSamples*wChannels*uiBitsPerSample/8
    }WAVE_DATA;

    if(channels==2 || sample_rate==0)
    {
        channels = 2;
        sample_rate = 44100;
    }
    int bits = 16;

    WAVE_HEADER pcmHEADER;
    WAVE_FMT    pcmFMT;
    WAVE_DATA   pcmDATA;

    unsigned short m_pcmData;
    FILE *fp, *fpout;
    printf("#########################2222#############################\n");
    fp = fopen(pcmpath, "rb+");
    if(fp==NULL)
    {
        printf("Open pcm file error.\n");
        return -1;
    }
    fpout = fopen(wavepath, "wb+");
    if(fpout==NULL)
    {
        printf("Create wav file error.\n");
        return -1;
    }
    printf("########################3333##############################\n");
    /* WAVE_HEADER */
    memcpy(pcmHEADER.fccID, "RIFF", strlen("RIFF"));
    memcpy(pcmHEADER.fccType, "WAVE", strlen("WAVE"));
    fseek(fpout, sizeof(WAVE_HEADER), 1);   //1=SEEK_CUR
    /* WAVE_FMT */
    memcpy(pcmFMT.fccID, "fmt ", strlen("fmt "));
    pcmFMT.dwSize = 16;
    pcmFMT.wFormatTag = 1;
    pcmFMT.wChannels = 2;
    pcmFMT.dwSamplesPerSec = sample_rate;
    pcmFMT.uiBitsPerSample = bits;
    /* ==dwSamplesPerSec*wChannels*uiBitsPerSample/8 */
    pcmFMT.dwAvgBytesPerSec = pcmFMT.dwSamplesPerSec*pcmFMT.wChannels*pcmFMT.uiBitsPerSample/8;
    /* ==wChannels*uiBitsPerSample/8 */
    pcmFMT.wBlockAlign = pcmFMT.wChannels*pcmFMT.uiBitsPerSample/8;

    printf("##################4444####################################\n");

    fwrite(&pcmFMT, sizeof(WAVE_FMT), 1, fpout);

    /* WAVE_DATA */
    memcpy(pcmDATA.fccID, "data", strlen("data"));
    pcmDATA.dwSize = 0;
    fseek(fpout, sizeof(WAVE_DATA), SEEK_CUR);
    printf("##################5555####################################\n");
    fread(&m_pcmData, sizeof(unsigned short), 1, fp);
    while(!feof(fp))
    {
        pcmDATA.dwSize += 2;
        fwrite(&m_pcmData, sizeof(unsigned short), 1, fpout);
        fread(&m_pcmData, sizeof(unsigned short), 1, fp);
    }
    printf("##################4444####################################\n");
    /*pcmHEADER.dwSize = 44 + pcmDATA.dwSize;*/
    //修改时间:2018年1月5日
    pcmHEADER.dwSize = 36 + pcmDATA.dwSize;

    rewind(fpout);
    fwrite(&pcmHEADER, sizeof(WAVE_HEADER), 1, fpout);
    fseek(fpout, sizeof(WAVE_FMT), SEEK_CUR);
    fwrite(&pcmDATA, sizeof(WAVE_DATA), 1, fpout);

    fclose(fp);
    fclose(fpout);
    printf("##################6666####################################\n");
    return 0;
}

int main()
{
    simplest_pcm16le_to_wave("E:\\project\\audio\\in.pcm", 2, 44100, "E:\\project\\audio\\out.wav");

    return 0;
}

 

再用Audacity播放out.wav文件,可正常播放。

涉及到音频领域。后面文章,再继讲如何把pcm转在g711a或是aac音频。