前端如何播放二进制音频数据

音频数据

播放数据

javascript 复制代码
const tryListen = async (row) => {
    awakenPlay(row.sid).then((res) => {   // 请求接口,拿到二进制音频数据
      const binaryData = atob(res.data);
      // 将二进制数据转换为 Uint8Array
      const byteArray = new Uint8Array(binaryData.length);
      for (let i = 0; i < binaryData.length; i++) {
        byteArray[i] = binaryData.charCodeAt(i);
      }
      const offset = 42; // 跳过可能的头部数据(假设前 42 字节是 WAV 头部),否则播放开始处有杂音
      // 将 Uint8Array 转换为 Int16Array
      const pcmData = new Int16Array(byteArray.buffer, offset);
      // 创建 AudioContext
      const audioContext = new window.AudioContext();
      // 创建 AudioBuffer
      const audioBuffer = audioContext.createBuffer(1, pcmData.length, 16000); // 单声道,16000 Hz
      const channelData = audioBuffer.getChannelData(0);
      // 将 PCM 数据归一化到 [-1, 1] 范围
      for (let i = 0; i < pcmData.length; i++) {
        channelData[i] = pcmData[i] / 32768.0;
      }

      // 播放音频
      const source = audioContext.createBufferSource();
      source.buffer = audioBuffer;
      source.connect(audioContext.destination);
      source.start();
    });
  };
相关推荐
不会算法的小灰19 分钟前
JavaScript基础详解
开发语言·javascript·udp
十一吖i5 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
徐同保6 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
生莫甲鲁浪戴7 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio
造价女工8 小时前
视频监控系统原理与计量
网络·音视频·状态模式·消防·工程造价
细节控菜鸡9 小时前
【2025最新】ArcGIS for JS 实现随着时间变化而变化的热力图
开发语言·javascript·arcgis
拉不动的猪10 小时前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试
桃子不吃李子10 小时前
nextTick的使用
前端·javascript·vue.js
從南走到北11 小时前
JAVA国际版一对一视频交友视频聊天系统源码支持H5 + APP
java·微信·微信小程序·小程序·音视频·交友
Devil枫12 小时前
HarmonyOS鸿蒙应用:仓颉语言与JavaScript核心差异深度解析
开发语言·javascript·ecmascript