react_native_audio_recorder_player_record_and_playback_quickstart.ts

1import React, { useState } from 'react';
2import {
3  SafeAreaView,
4  StyleSheet,
5  Text,
6  TouchableOpacity,
7  View,
8} from 'react-native';
9import AudioRecorderPlayer, {
10  AudioEncoderAndroidType,
11  AudioSourceAndroidType,
12  AVEncoderAudioQualityIOSType,
13  AVEncodingOption,
14} from 'react-native-audio-recorder-player';
15
16const audioRecorderPlayer = new AudioRecorderPlayer();
17
18const App = () => {
19  const [recordSecs, setRecordSecs] = useState(0);
20  const [recordTime, setRecordTime] = useState('00:00:00');
21  const [currentPositionSec, setCurrentPositionSec] = useState(0);
22  const [currentDurationSec, setCurrentDurationSec] = useState(0);
23  const [playTime, setPlayTime] = useState('00:00:00');
24  const [duration, setDuration] = useState('00:00:00');
25
26  const onStartRecord = async () => {
27    const path = 'hello.m4a';
28    const audioSet = {
29      AudioEncoderAndroid: AudioEncoderAndroidType.AAC,
30      AudioSourceAndroid: AudioSourceAndroidType.MIC,
31      AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high,
32      AVNumberOfChannelsKeyIOS: 2,
33      AVFormatIDKeyIOS: AVEncodingOption.aac,
34    };
35    const result = await audioRecorderPlayer.startRecorder(path, audioSet);
36    audioRecorderPlayer.addRecordBackListener((e) => {
37      setRecordSecs(e.currentPosition);
38      setRecordTime(audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)));
39      return;
40    });
41    console.log(result);
42  };
43
44  const onStopRecord = async () => {
45    const result = await audioRecorderPlayer.stopRecorder();
46    audioRecorderPlayer.removeRecordBackListener();
47    setRecordSecs(0);
48    console.log(result);
49  };
50
51  const onStartPlay = async () => {
52    console.log('onStartPlay');
53    const msg = await audioRecorderPlayer.startPlayer();
54    console.log(msg);
55    audioRecorderPlayer.addPlayBackListener((e) => {
56      setCurrentPositionSec(e.currentPosition);
57      setCurrentDurationSec(e.duration);
58      setPlayTime(audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)));
59      setDuration(audioRecorderPlayer.mmssss(Math.floor(e.duration)));
60      return;
61    });
62  };
63
64  const onStopPlay = async () => {
65    console.log('onStopPlay');
66    audioRecorderPlayer.stopPlayer();
67    audioRecorderPlayer.removePlayBackListener();
68  };
69
70  return (
71    <SafeAreaView style={styles.container}>
72      <Text style={styles.title}>Audio Recorder Player</Text>
73      <Text style={styles.txt}>{recordTime}</Text>
74      <View style={styles.viewPlayer}>
75        <TouchableOpacity style={styles.btn} onPress={onStartRecord}>
76          <Text>Record</Text>
77        </TouchableOpacity>
78        <TouchableOpacity style={styles.btn} onPress={onStopRecord}>
79          <Text>Stop</Text>
80        </TouchableOpacity>
81      </View>
82      <View style={styles.viewPlayer}>
83        <Text style={styles.txt}>
84          {playTime} / {duration}
85        </Text>
86        <TouchableOpacity style={styles.btn} onPress={onStartPlay}>
87          <Text>Play</Text>
88        </TouchableOpacity>
89        <TouchableOpacity style={styles.btn} onPress={onStopPlay}>
90          <Text>Stop</Text>
91        </TouchableOpacity>
92      </View>
93    </SafeAreaView>
94  );
95};
96
97const styles = StyleSheet.create({
98  container: {
99    flex: 1,
100    backgroundColor: '#fff',
101    alignItems: 'center',
102    justifyContent: 'center',
103  },
104  title: { fontSize: 20, fontWeight: 'bold', marginBottom: 20 },
105  viewPlayer: { flexDirection: 'row', marginVertical: 10 },
106  btn: { marginHorizontal: 10, padding: 10, backgroundColor: '#ddd' },
107  txt: { fontSize: 18, marginVertical: 10 },
108});
109
110export default App;