react-taro小程序-录音播放

目录

一、Taro提供的API进行录音和播放操作。以下是一个简单的示例代码

二、class组件示例

一、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;