websocket实现web端的实时pcm音频播放

简介：

PCM是音频编码方式，将模拟音频信号转为数字信号，用于音频录制和存储。高音质、无损编码，但文件体积大，需特定软硬件支持。可使用MPlayer、Audacity播放PCM，用音视频转换器将PCM转为MP3等常见格式。

浏览器是无法直接播放 pcm 音频的，因为 pcm 是比较原始的音频格式。

PCM（Puls Code Modulation）全称脉码调制录音，PCM录音就是将声音的模拟信号表示成0,1标识的数字信号，未经任何编码和压缩处理，所以可以认为PCM是未经压缩的音频原始格式。PCM格式文件中不包含头部信息，播放器无法知道采样率，声道数，采样位数，音频数据大小等信息，导致无法播放。

1.安装插件 pcm-player

pcm-player是一个JavaScript库，用于在浏览器中播放PCM音频文件。PCM是一种数字音频编码格式，它将模拟音频信号转换为数字信号。在Vue中使用PCMPlayer可以让你在Web应用中轻松处理音频播放。

npm install pcm-player

2.引入插件

import PCMPlayer from 'pcm-player'

3.新建 player.js 文件

import PCMPlayer from 'pcm-player'

var websock = null;

var player = new PCMPlayer({ 
    encoding: '16bitInt', // 采样位数
    channels: 1,  // 通道
    sampleRate: 16000,  // 采样率
    flushingTime: 1000,  // pcm刷新间隔
    onstatechange: (node, event, type) => {},  // 播放状态变化事件
    onended: (node, event) => {},  // 播放结束事件
});

function getWebIP() {  //全局参数

    var curIP = "" //ws地址
    initWebSocket(curIP)
}

function initWebSocket(val) { //初始化websocket
    if( typeof(WebSocket) != "function" ) {
       return alert("您的浏览器不支持Websocket通信协议,请更换浏览器后再次使用!")
    }
    
    websock = new WebSocket(val);
    //获得消息事件
    websock.onmessage = function(e) {
        let data = JSON.parse(e.data)
        if(data.result && data.result && data.result!= ""){
            // console.log(data, "获得的消息");
            // 如果你接收到的是pcm数据流，如 "cQBiAEMAIwAgABUA/v/x//z/CAAIAPb//f8S.....",则需要base64ToArrayBuffer方法转换一下形式
            var audioData = base64ToArrayBuffer(data.result)// 创建实例
            player.feed(audioData) // 将PCM音频数据写入pcm-player
        }
       
    }
    //关闭事件
    websock.onclose = function (e) {
        
    }
    //打开事件
    websock.onopen = function () {
        console.info("Socket 已打开");

    }
    //连接发生错误的回调方法
    websock.onerror = function(e) {
         console.log("WebSocket连接发生错误");
    }
}

function base64ToArrayBuffer(base64) {
    const binaryString = window.atob(base64);
    const len = binaryString.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
      bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes;
}


// 发送消息
function send(obj) {
    websock.send(JSON.stringify(obj))
    console.log(JSON.stringify(obj));

}
//关闭
function websocketclose(e) {
    websock.close()
    console.info("Socket 已关闭");

}

//外部页面需要调用的方法
export{
    getWebIP,
    websocketclose
}

4.播放音频

player.continue()

5.暂停音频

player.pause()