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

音频数据

播放数据

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();
    });
  };
相关推荐
I Am a robert girl8 小时前
打破音频生态壁垒:用 WinAirCast 把 Windows 声音塞进 HomePod
windows·音视频·跨平台开发·音频串流·airplay 2·homepod
揽秀亭长8 小时前
视频转脚本有哪些技术路线?三种常见方案对比分析
人工智能·音视频
VidDown9 小时前
从一堆脚本到能维护的系统:视频处理管道的工程化
服务器·ffmpeg·音视频·视频编解码
轻口味9 小时前
HarmonyOS 7 新特性2:音频编创——轻音台里的降噪、环绕与格式转换
华为·音视频·harmonyos·鸿蒙·音频编创
天天喝旺仔9 小时前
浏览器渲染原理:从解析 HTML/CSS、构建渲染树到重排重绘与首屏优化
前端·javascript·css·性能优化·html
技灵AI9 小时前
Seedance 长剧生产实战:用首尾帧接戏解决角色崩脸与场景漂移(含 return_last_frame 用法与提示词模板)
人工智能·prompt·aigc·音视频
Days205010 小时前
时间胶囊项目正式发布
javascript·gpt·php
朱 欢 庆10 小时前
el-table-v2 虚拟表格组件
前端·javascript·vue.js
OpsEye10 小时前
企业大模型用量成本该如何监控和管控?
javascript·ai编程
杨利杰YJlio10 小时前
ITSK 万能驱动 26V5:新驱动批量更新
前端·javascript·后端