web端vue3使用pcmPlayer播放音频流

最近公司要做一个ai大模型对话结果实时阅读的一个功能，阅读内容是由后端通过websocket推送过来的，
于是在查阅之后决定使用pcmPlayer来实现，播放器仓库地址:https://www.npmjs.com/package/pcm-player

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.pause()
player.continue()