当前位置: 首页 > article >正文

后端接口返回二进制流音频数据,前端 js 如何播放?

一、接口设置

// 语音播放
export const getVoicePlay = (content: string) => {
  return requestVoice({
    url: '/tts/?text_prompt=' + content,
    method: 'get',
    responseType: 'blob', // 返回类型blob
  });
};

二、数据处理播放

 getVoicePlay(item.content).then((res: any) => {
   console.log(res);
   const blob = new Blob([res], { type: 'audio/wav' });
   const localUrl = (window.URL || webkitURL).createObjectURL(blob);
   const audio = document.createElement('audio');
   audio.style.display = 'none'; // 防止影响页面布局
   audio.controls = true;
   document.body.appendChild(audio);
   audio.src = localUrl;
   audio.play();
   
    // 语音播放完毕后,需要手动释放内存
    audio.onended = function () {
      document.body.removeChild(audio);
      URL.revokeObjectURL(localUrl);
    };
 });

感谢

后端返回二进制流音频数据,怎么让其可播放
前端播放二进制语音流


http://www.kler.cn/a/146715.html

相关文章:

  • 智慧环保平台_大数据平台_综合管理平台_信息化云平台
  • 商业物联网详细指南:优势与挑战
  • A037-基于Spring Boot的二手物品交易的设计与实现
  • 找不到vcruntime140.dll怎么办,彻底解决vcruntime140.dll丢失的5种方法
  • 基于多模板配准的心腔分割算法
  • “fc-async”提供了基本的异步处理能力
  • 【源码】医院安全(不良)事件管理系统,11种不良事件类型,覆盖全院全部科室及所有可能发生的不良事件
  • 【nlp】3.3 Transformer论文复现:2. 编码器部分(掩码张量、多头注意力机制、前馈全连接层)
  • 给pycharm项目设置conda环境
  • Edit And Resend测试接口工具(浏览器上的Postman)
  • python+gurobi求解线性规划、整数规划、0-1规划
  • C#-关于日志的功能扩展
  • Linux的基本指令(四)
  • SpringBoot应用手册
  • docker启动容器失败,然后查看日志,docker logs查看容器出现报错:
  • 【Spring Boot】Swagger的常用注解
  • 评测|PolarDB MySQL 版 Serverless
  • 【Axure高保真原型】3D金字塔图_移入显示数据标签
  • C++ 文件和流、异常处理、动态内存、预处理器
  • 嵌入式设备视频编码比较:H.264、H.265、MPEG-2和MJPG
  • Feign接口请求返回异常 no suitable HttpMessageConvert found for response type
  • 卷积神经网络(CNN)车牌识别
  • csgo/steam搬砖项目新手教程
  • 6.12找树左下角的值(LC513-M)
  • TCP知识点
  • PT里如何针对某个模块设置false path