可以将https://github.com/Tuya-Community/tuya-miniapp-demo/blob/test/record/recorderManager/src/pages/Recorder/index.tsx里面的代码替换成下面代码,下面代码播放完成后,会自动上传到服务器,控制台可以看到服务器的pcm下载地址
Code: Select all
import { Button, View, getRecorderManager, authorize, createInnerAudioContext,uploadFile } from '@ray-js/ray'
import React, { FC, useRef, useEffect, useState } from 'react'
import styles from './index.module.less'
let tempFilePath = ""
const Home: FC = () => {
const recorder = useRef()
const audioContext = useRef(null)
const [recordPath, setRecordPath] = useState('')
useEffect(() => {
audioContext.current = createInnerAudioContext({
success: function (res) {
console.log('createInnerAudioContext success', res)
audioContext.current.onTimeUpdate((res) => {
// console.log("onTimeUpdate callback", res);
})
},
fail: function (res) {
console.log('createInnerAudioContext fail', res)
},
complete: function () {
console.log('createInnerAudioContext complete')
},
})
}, [])
const start = () => {
authorize({
scope: 'scope.record',
success(res) {
// 先做监听
// @ts-ignore
recorder.current = getRecorderManager({
success(res) {
console.log('getRecorderManager success ==>', res)
},
// @ts-ignore
fail(params) {
console.log('getRecorderManager fail ==>', params)
},
})
// @ts-ignore
recorder.current.start({
sampleRate: 16000, //采样率
numberOfChannels: 1, //单声道
frameSize: 1024 * 1024, //帧大小
format: 'pcm',
success(res) {
console.log('start =-----------=>', res)
tempFilePath = res.tempFilePath
if (res && res.tempFilePath) {
setRecordPath(tempFilePath)
}
},
fail(params) {
console.log('start fail ==>', params)
},
})
},
})
}
const pause = () => {
// @ts-ignore
recorder.current.pause({
success(res) {
console.log('pause ==>', res)
},
fail(params) {
console.log('pause fail ==>', params)
},
})
}
const resume = () => {
// @ts-ignore
recorder.current.resume({
success(res) {
console.log('resume ==>', res)
},
fail(params) {
console.log('resume fail ==>', params)
},
})
}
const stop = () => {
recorder.current &&
// @ts-ignore
recorder.current.stop({
success(res) {
console.log('stop ==>', res)
if (res && res.tempFilePath) {
setRecordPath(res.tempFilePath)
}
},
fail(params) {
console.log('stop fail ==>', params)
},
})
}
const uploadAudio = (audioPath)=>{
console.log("开始上传文件,audioPath:"+audioPath)
let uploadFileTask = uploadFile({
//url:HttpHost+"/api/AiBigModel/GetAudio",
url:"https://drinksmart.haers.com:8011/api/AiBigModel/GetAudio",
filePath:audioPath,
name:"file",
header:{
'Content-Type': 'multipart/form-data',
},
formData: {
filename: 'record.pcm',
},
complete:()=>{
console.log("上传完成....")
},
success:(res)=>{
console.log("上传成功:",res)
},
fail:(res)=>{
console.log("uploadFile fail:",res)
},
})
uploadFileTask.onProgressUpdate((param)=>{
console.log("onProgressUpdate param:",param)
})
uploadFileTask.onHeadersReceived((param)=>{
console.log("onHeadersReceived param:",param)
})
}
const playAudio = () => {
console.log('playAudio recordPath', recordPath)
audioContext.current.play({
// src: 'https://images.tuyacn.com/rms-static/4681f900-9fa4-11ee-af19-cfa45f6de59e-1703123840144.mp3?tyName=2.mp3',
src: recordPath,
startTime: 0,
loop: false,
playbackRate: 1,
volume: 1,
success: function (res) {
console.log(`audio play success`, res)
uploadAudio(recordPath)
},
fail: function (res) {
console.log(`audio play fail`, res)
},
complete: function (res) {
console.log(`audio play complete`, res)
},
})
}
return (
<View className={styles['container']}>
<Button className={styles['btn']} onClick={start}>
点击开始录音
</Button>
<Button className={styles['btn']} onClick={pause}>
点击暂停录音
</Button>
<Button className={styles['btn']} onClick={resume}>
点击继续录音
</Button>
<Button className={styles['btn']} onClick={stop}>
点击关闭录音
</Button>
<Button className={styles['btn']} onClick={playAudio}>
播放保存的录音
</Button>
</View>
)
}
export default Home