web前端实时音频播放并绘制波形

web前端实时音频播放并绘制波形

初始

最新项目需要用到拉取实时声音流数据播放声音以及显示对应的波形图。如果是声音文件我们可以用 wavesurfer.js这个框架很轻松的绘制波形，但是实时声音怎么转换呢，以下是我的解决方案

1.后端通过websocket推流

后端需要将数据转换成PCM格式

2.前端实现

我们用到下面2个库：
1.pcm-player （播放声音）
2.recorder-core （绘制波形）

安装：

npminstall pcm-player
npminstall recorder-core

1.首先我们先封装websocket（网上也有很多教程），直接上代码

var ws =nulllet lockReconnect =false;/**
 * @param {*} path ws url
 * @param {*} callback 数据处理回调
 * @param {*} isHandleData 是否处理转换数据
 * @returns ws
 */constwebsocket=(path, callback, isHandleData =false)=>{cancel();//取消上一次连接
    ws =newWebSocket(path);
    ws.binaryType ="arraybuffer"// 建立连接
    ws.onopen=(event)=>{
        console.log('websocket 建立连接');// 连接关闭
        ws.onclose=(event)=>{
            console.log('websocket 连接断开,重新连接');reconnect(path, callback);};// 接收到消息
        ws.onmessage=(event)=>{const data =handleData(event, isHandleData);if(callback)callback(data)};};
    ws.onerror=(event)=>{
        console.log('websocket 连接失败,重新连接');reconnect(path, callback);};return ws;}// 重新连接constreconnect=(path, callback)=>{if(lockReconnect){return;}
    lockReconnect =true;setTimeout(function(){
        console.log("重新链接…")
        lockReconnect =false;websocket(path, callback)},2000);}// 处理返回数据consthandleData=(event, isHandleData)=>{const data = isHandleData ?JSON.parse(event.data): event
    return data;}// 取消连接 清除ws实例constcancel=()=>{if(ws){
        ws.onclose=()=>{}
        ws?.close()}
    ws =null}exportdefault websocket

2.在vue中使用完整代码

<template><div id="wave_audio"></div></template><script>import Recorder from'recorder-core'import PCMPlayer from'pcm-player'//需要使用到的音频格式编码引擎的js文件统统加载进来import'recorder-core/src/engine/mp3'import'recorder-core/src/engine/mp3-engine'//以上三个也可以合并使用压缩好的recorder.xxx.min.js//比如 import Recorder from 'recorder-core/recorder.mp3.min' //已包含recorder-core和mp3格式支持//可选的扩展支持项import'recorder-core/src/extensions/wavesurfer.view'import websocket from'./websocket'var player =nullvar wave =nullexportdefault{mounted(){this.initPlay()this.initWave()this.initWebsocket('ws://192.168.8.210:8877/live?url=rtmp://139.224.194.14:10085/hls/wrpYcD27g?sign=wrtY5D27gz&&&ffmpeg=true')},methods:{initPlay(){
      player =newPCMPlayer({encoding:'16bitInt',//编码 可能的值 8bitInt / 16bitInt / 32bitInt / 32bitFloat 默认值：16bitIntchannels:1,// PCM 数据中的通道数sampleRate:32000,// PCM 数据的采样率flushTime:2000,//  以毫秒为单位播放的 PCM 数据的刷新间隔。默认 1000ms})},initWave(){const waveOption ={elem:'#wave_audio',scale:2,//缩放系数，应为正整数，使用2(3? no!)倍宽高进行绘制，避免移动端绘制模糊fps:50,//绘制帧率，不可过高，50-60fps运动性质动画明显会流畅舒适，实际显示帧率达不到这个值也并无太大影响duration:3500,//当前视图窗口内最大绘制的波形的持续时间，此处决定了移动速率direction:1,//波形前进方向，取值：1由左往右，-1由右往左position:0,//绘制位置，取值-1到1，-1为最底下，0为中间，1为最顶上，小数为百分比centerHeight:1,//中线基础粗细，如果为0不绘制中线，position=±1时应当设为0//波形颜色配置：[位置，css颜色，...] 位置: 取值0.0-1.0之间linear:[0,'rgba(14, 224, 238, 1)',1,'rgba(14, 224, 238, .6)'],centerColor:'rgba(14, 224, 238, 1)',//中线css颜色，留空取波形第一个渐变颜色}
      wave = Recorder.WaveSurferView(waveOption)},initWebsocket(url){websocket(url,this.handle)},handle(event){const dataAudio =newUint8Array(event.data)
      player && player.feed(dataAudio)// 播放声音const data =newUint16Array(event.data)
      wave && wave.input(data,20,32000)// 添加波形数据},destroyPlay(){
      player && player.destroy()
      player =null},},beforeDestroy(){this.destroyPlay()},}</script><style lang="less" scoped>
#wave_audio {width:100%;height:100%;}</style>