目录
一、Taro提供的API进行录音和播放操作。以下是一个简单的示例代码
一、Taro提供的API进行录音和播放操作。以下是一个简单的示例代码
import Taro, { useState } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
function Recording() {
const [isRecording, setIsRecording] = useState(false)
const [audioSrc, setAudioSrc] = useState('')
// 开始录音
function startRecord() {
setIsRecording(true)
Taro.startRecord({
success: (res) => {
console.log(res.tempFilePath) // 打印录音文件路径
setAudioSrc(res.tempFilePath) // 设置state保存录音文件路径
},
fail: () => {
console.log('start record failed')
}
})
}
// 停止录音并播放
function stopAndPlay() {
setIsRecording(false)
Taro.stopRecord()
if (audioSrc) {
const audioContext = Taro.createInnerAudioContext()
audioContext.src = audioSrc // 设置src为刚才保存的tempFilePath
audioContext.play()
audioContext.onEnded(() => {
console.log('audio play ended')
audioContext.destroy() // 销毁上下文对象以释放内存资源
})
}
}
return (
<View>
<Button onClick={startRecord}>开始</Button>
<Button disabled={!isRecording} onClick={stopAndPlay}>停止并播放</Button>
{/* 渲染用于测试的组件 */}
<View>{audioSrc}</View>
</View>
)
}
export default Recording;
二、class组件示例
import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
class Recording extends Component {
constructor(props) {
super(props);
this.state = {
isRecording: false,
audioSrc: ''
};
}
startRecord() {
this.setState({isRecording: true});
Taro.startRecord({
success: (res) => {
console.log(res.tempFilePath); // 打印录音文件路径
this.setState({audioSrc: res.tempFilePath}); // 设置state保存录音文件路径
},
fail: () => {
console.log('start record failed');
}
})
}
stopAndPlay() {
const { audioSrc } = this.state;
if (audioSrc) {
const audioContext = Taro.createInnerAudioContext()
audioContext.src = audioSrc; // 设置src为刚才保存的tempFilePath
audioContext.play();
audioContext.onEnded(() => {
console.log('audio play ended')
audioContext.destroy(); // 销毁上下文对象以释放内存资源
})
}
this.setState({isRecording:false})
Taro.stopRecord();
}
render() {
return (
<View>
<Button onClick={this.startRecord.bind(this)}>开始</Button>
<Button disabled={!this.state.isRecording} onClick={this.stopAndPlay.bind(this)}>停止并播放</Button>
{/* 渲染用于测试的组件 */}
<View>{this.state.audioSrc}</View>
</View>
)
}
}
export default Recording;