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

音频数据

播放数据

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();
    });
  };
相关推荐
lemon_yyds35 分钟前
Vue 项目嵌入 React H5 技术方案
vue.js·react.js
szp200542 分钟前
Cache API 会丢掉 URL 里的 #:我的 9 个模型分块一直写在同一条缓存上
javascript·浏览器
keyipatience1 小时前
TypeScript学习(1)
前端·javascript·学习·typescript·html·css3
xifangge20252 小时前
基于 JavaScript 实现 CNC 数控切削参数与螺纹公差纯前端核算引擎
开发语言·前端·javascript
honkun62 小时前
vue 表格组件 vxe-table 修改滚动条样式,修改滚动条样式,统一宽度、颜色与自动隐藏
前端·javascript·vue.js
FRing033 小时前
JavaScript入门到精通二十四(正则表达式、元字符、修饰符)
开发语言·前端·javascript·正则表达式
大明二代4 小时前
从 RAG 到有记忆的 Agent:Mastra Memory 与 PostgreSQL 实战
前端·javascript·人工智能
小羊没烦恼!4 小时前
C#综合揭秘——Entity Framework 并发处理详解
java·开发语言·前端·javascript·数据库·mysql·c#
OpsEye5 小时前
模型能力波动怎么办?网关侧做模型质量监控与自动切换
javascript·ai编程
PHP是世界上最好的语言6 小时前
React接入PDF批注:保存后重新打开,确认改动没有丢
react.js