react如何请求amr文件流接口-优化版

本文介绍在React中如何处理企业微信发送的AMR语音消息。由于Web端不直接支持AMR格式,需要借助第三方库来实现播放。通过文件流获取AMR文件,并提供页面展示,点击按钮即可播放和暂停语音。
摘要由CSDN通过智能技术生成

企业微信 语音消息 -优化版

想查看web端react-amr的API可以去看此链接  添加链接描述
简说一下:
  一般我们使用移动端微信发的语音是amr文件不是MP3文件;
  而且web端不支持,所以我们要找对应的amr的三方资源去协助我们开发
  这边是通过文件流来获取,如果你想做调试的话,网上amr的文件资源不好找,你可以使用转换器,将你的MP3文件转换成amr文件到本地就可以使用啦!!!

/**
 * @文件描述  会话管理界面右侧---协助左侧渲染   -语音消息 
 * @创建人和时间  - 2021-04-28
 * @更新人和时间  - 2021-05-11
 * @param {Function} amr - 初始化amr
 * @param {boolean} isToggleOn - 控制播放暂停图标
*/
import React, {
    PureComponent } from 'react';
import BenzAMRRecorder from 'benz-amr-recorder';
import {
    Col, Row, Card } from 'antd';
import {
    PlayCircleOutlined, PauseCircleOutlined } from '@ant-design/icons';
// import amrCeshi from "../../../../assets/audio/amrCeshi.amr"; // 测试使用
import {
    wechatV1 as v1 } from 'services/config';
import {
    getAccessToken } from 'utils/token';

export default class Voices extends PureComponent {
   

  constructor(props) {
   
    super(props);
    this.state = {
   
      amr: new BenzAMRRecorder(),
      isToggleOn: true,  // 控制播放暂停图标
    }
    this.change = this.change.bind(this);
  }

  // 点击开始播放
  change = () => {
   
    const {
    amr } = this.state;
    if (amr.isPaused()) 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值