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

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

想查看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()) {amr.play();} else {const { item } = this.props;const that = this;const token = getAccessToken();fetch(`${v1}/wechat/content/${item.id}/media`, {headers: { authorization: `Bearer ${token}` },responseType: 'blob',}).then(res => {that.setState({ data: res })return res.blob()}).then(res => {const reader = new FileReader();reader.readAsDataURL(res);reader.onload = (e) => {that.setState({ img: e.target.result })// amr请求   amr.initWithUrl(e.target.result).then(() => {if (amr.isPlaying()) {amr.onPlay();} else {amr.play();}});// 播放完成自动回到开始播放按钮amr.onEnded(() => {this.setState({amr: new BenzAMRRecorder(),isToggleOn: true,})})}})}this.setState(prevState => ({isToggleOn: !prevState.isToggleOn,}))}// 点击停止播放consol = () => {const { amr } = this.state;this.setState(prevState => ({isToggleOn: !prevState.isToggleOn,}))amr.onPause(() => {console.log(1)})amr.pause();}render() {const { isToggleOn } = this.state;const { item } = this.props;return (<Card size="small" hoverable style={{width:226}}><div style={{ padding: '0px 8px', width: 200, height: 28, backgroundColor: '#eee', borderRadius: "12px" }}>{isToggleOn? (<Row onClick={() => this.change()} style={{ cursor: "pointer" }}><PlayCircleOutlined style={{ fontSize: 19, paddingTop: 5, paddingRight: 2, paddingLeft: 2 }} /><Col span={10} style={{ marginTop: 3, paddingLeft: 6 }}>开始播放</Col><Col style={{ fontSize: 12, marginLeft: 8, marginTop: 5 }}>总时长：{item.v_play_length}&nbsp;S</Col></Row>): (<Row onClick={() => this.consol()}><PauseCircleOutlined style={{ fontSize: 19, paddingTop: 5, paddingRight: 2, paddingLeft: 2 }} /><Col span={10} style={{ marginTop: 3, paddingLeft: 6 }}>停止播放</Col><Col style={{ fontSize: 12, marginLeft: 8, marginTop: 5 }}>总时长：{item.v_play_length}&nbsp;S</Col></Row>)}</div></Card>)}
}

页面展示

此页面样式自己写的，仅做参考
点击按钮就可以播放，播放完会自动暂停，点击暂停按钮也会自动停止；再次点击的话，会重新播放

react如何请求amr文件流接口-优化版相关推荐

java小知识：http请求传输文件流
前文:项目里要给第三方传输图片,对方接口要求传文件流,而不是常用的base64编码,在此记录一下- 直接贴代码吧: import com.alibaba.fastjson.JSONObject; im ...
react集成react-pdf获取文件流预览下载pdf，展示电子签章
1.下载依赖包代码如下(示例): npm install react-pdf 2.引入依赖包代码如下(示例): import { Document, Page } from 'react-pdf' ...
【post请求下载文件流】如何使用post请求下载文件流 blob
最近有个需求,做文件的下载.其实下载没什么要特别说的,之前都是用的get请求,这次不同,后台用的post请求,返回的是数据流,这种post请求下载文件的方式倒是没怎么弄过.记录一下. 接口接口地址为 ...
JAVA 实现返回PDF文件流并进行下载
JAVA 实现返回PDF文件流并进行下载首先确保本地存放pdf 保证通过路径可以拿到文件我这边把pdf放在e盘下的目录 1.前台方法原生ajax 发送请求返回文件流进行下载 function d ...
react接收后端文件_React 文件流实现文件下载
同种方法-两种方案: 第一种:页面上自己手动添加a标签第二种:js自动生成a标签(推荐第二种) 今天在react项目开发过程中,有这样的一个需求就是文件下载. 自己认为:通过接口请求后端发给返给自己 ...
react接收后端文件_React获取Java后台文件流并下载Excel文件流程解析
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
ajax提交用流的方式,ajax 请求后台返回的文件流
download(url) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); // 也可以使用POST方式,根据接口 xhr. ...
js下载get请求返回的文件流（请求头携带token）
需求是下载请求接口返回的文件流 var xhh = new XMLHttpRequest(); xhh.open("get", baseUrl+'/cert/download?na ...
react前端下载后端返回文件流(文件流下载excel、csv)
以前用vue框架的时候,写过不少下载上传的东西,当然包括后端返回文件流供前端下载,现在用react,牵扯到这个功能,又提起来说,有两种下载类型,一种是Excel,一种是Csv. 首先后端返回这种: 或 ...
2021-09-07-OSB学习（接口下载文件--流）
OSB学习(接口下载文件[流的形式]) 什么是使用流文件传输 1.我们要干什么 2.接口开发 2.1.控制台通过执行PL显示流文件信息 2.1.1.创建基本的目录结构 2.1.2.打开项目,然后创建B ...

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

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

页面展示

react如何请求amr文件流接口-优化版相关推荐

最新文章

热门文章

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

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

页面展示

react如何请求amr文件流接口-优化版相关推荐

最新文章

热门文章

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