Всем привет! Меня зовут Хатам. Я работаю в компании Neti. Когда-то я был верстальщиком сайтов, но мне хотелось развиваться дальше. Поэтому я изучил React и научился делать веб-приложения, а затем решил попробовать свои силы в мобильной разработке. В этой статье я делюсь примерами решений, к которым пришел, работая над задачей одного из клиентов. Надеюсь, что мой опыт будет кому-то полезен.
Проект
Мобильное приложение, предназначенное для быстрой отправки сообщений о проблемах и опасных факторах для жизни и здоровья людей на территории производственного предприятия.
Пользователи: сотрудники компании, подрядчики и гости предприятия.
Платформы: Android, IOS.
Стек технологий: React Native, MobX.
Задача
Возможности, которые необходимо было реализовать:
-
Запись голоса;
-
Отмена записи свайпом вправо с анимацией и изменением иконки;
-
Воспроизведение записанного звука.
Также записанный голос должен был воспроизводиться в админке в браузере.
Вот как это должно работать:
Решение
Я приступил к поиску библиотеки. Из найденных вариантов самым популярным оказался react-native-audio-recorder-player. Основным его плюсом является принцип «2 в 1», то есть запись и воспроизведение записанного аудио.
Сделал два компонента: AudioRecorder и AudioPlayer.
Начнем с AudioRecorder.tsx. Библиотеку нашел, но она не умеет по свайпу отменять запись. Это надо было реализовать самостоятельно.
После долгих поисков и раздумий в голову пришла идея: а что, если этот свайп сделать слайдером? Почему бы и нет: у слайдера есть состояние, которое позволяет плавно анимировать нужный элемент и прописать отмену на определенной позиции. Но чтобы сделать такую кнопку, какая нам нужна, слайдер должен быть нестандартный. Поэтому подключил библиотеку react-native-slider-custom. Скрыл полосу слайдера, сделал кнопку «запись/отмена» с динамичными иконками, сделал абсолютное позиционирование поверх двух блоков: текста и продолжительности записи. Все готово, идея сработала ?
AudioRecorder.tsx
import React, { useEffect, useState } from 'react'; import { PermissionsAndroid, Platform, StyleSheet, Text, ToastAndroid, View } from 'react-native'; import { observer } from 'mobx-react-lite'; import Slider from 'react-native-slider-custom'; import { AudioEncoderAndroidType, AudioSet, AudioSourceAndroidType, AVEncoderAudioQualityIOSType, AVEncodingOption, } from 'react-native-audio-recorder-player'; import { Colors } from '../../../styles/Colors'; import MicroPhoneIcon from '../../svg/MicroPhoneIcon'; import { TextStyle } from '../../../styles/TextStyle'; import RecordingIcon from '../../svg/RecordingIcon'; import TrashIcon from '../../svg/TrashIcon'; import { playerStyles } from './playerStyles'; import { useStores } from '../../../hooks/use-stores'; const CANCEL_RECORDING_SLIDER_VALUE = 0.8; const MAX_AUDIO_DURATION = 180000; // ms = 180000=3m interface IAudioRecorderProps {} const AudioRecorder: React.FC<IAudioRecorderProps> = observer(({}) => { const { audioRecPlayStore: store } = useStores(); const [androidGranted, setAndroidGranted] = useState(false); const [recordSlidingValue, setRecordSlidingValue] = useState(0); const [recordTime, setRecordTime] = useState('00:00:00'); // Effects useEffect(() => { (async () => { if (Platform.OS === 'android') { const hasPermissionWrite = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE); const hasPermissionRecord = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO); if (hasPermissionRecord && hasPermissionWrite) { setAndroidGranted(true); } else { setAndroidGranted(false); } } else { setAndroidGranted(true); } })(); }, []); // Handlers const handleSlidingStart = () => { onStartRecord(); }; const handleSlidingChange = (value: number) => { setRecordSlidingValue(value); }; const handleSlidingComplete = (value: number) => { onStopRecord(value); }; // Actions const onStartRecord = async () => { if (!androidGranted) { if (Platform.OS === 'android') { const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO); if (granted !== PermissionsAndroid.RESULTS.GRANTED) { ToastAndroid.show('Использование микрофона запрещена', ToastAndroid.LONG); return false; } } if (Platform.OS === 'android') { const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE); if (granted !== PermissionsAndroid.RESULTS.GRANTED) { ToastAndroid.show('Запись в хранилише запрещено', ToastAndroid.LONG); return false; } } setAndroidGranted(true); } else { const path = Platform.select({ ios: 'akkerman_voice_message.m4a', android: 'sdcard/akkerman_voice_message.mp4', }); const audioSet: AudioSet = { AudioEncoderAndroid: AudioEncoderAndroidType.AAC, AudioSourceAndroid: AudioSourceAndroidType.MIC, AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high, AVNumberOfChannelsKeyIOS: 2, AVFormatIDKeyIOS: AVEncodingOption.aac, }; await store.audioRecorderPlayer.startRecorder(path, audioSet); store.setIsRecording(true); store.audioRecorderPlayer.addRecordBackListener((e: any) => { setRecordTime(store.audioRecorderPlayer.mmssss(Math.floor(e.current_position))); // Stop and save recording if (e.current_position > MAX_AUDIO_DURATION) { onStopRecord(0); } return; }); } return; }; const onStopRecord = async (value: number) => { const result = await store.audioRecorderPlayer.stopRecorder(); setRecordSlidingValue(0); store.setIsRecording(false); store.audioRecorderPlayer.removeRecordBackListener(); if (value > CANCEL_RECORDING_SLIDER_VALUE) { // Cancel recording store.setAudio(null); } else { // Save recording if (!result.includes('stop')) { store.setAudio({ duration: recordTime, uri: result }); } } }; // Renders return ( <View> <Slider value={recordSlidingValue} minimumTrackTintColor="transparent" maximumTrackTintColor="transparent" onSlidingStart={handleSlidingStart} onSlidingComplete={handleSlidingComplete} onValueChange={handleSlidingChange} customThumb={ store.isRecording ? ( <View style={styles.animatedIconsContainer}> <View style={[styles.animatedIconsBG, { opacity: recordSlidingValue }]} /> <View style={[styles.animatedIconsWrap]}> <MicroPhoneIcon color={Colors.white} style={[styles.animatedIcon, { opacity: 1 - recordSlidingValue }]} /> <TrashIcon style={[styles.animatedIcon, { opacity: recordSlidingValue > CANCEL_RECORDING_SLIDER_VALUE ? 1 : recordSlidingValue }]} /> </View> </View> ) : ( <MicroPhoneIcon /> ) } thumbStyle={[ playerStyles.button, store.isRecording && playerStyles.buttonShadow, { backgroundColor: recordSlidingValue > CANCEL_RECORDING_SLIDER_VALUE ? Colors.error : Colors.primary }, ]} style={styles.swipeableButton} animateTransitions /> <View style={[styles.recorder, { opacity: 1 - recordSlidingValue }]}> <View style={{ flexDirection: 'row', alignItems: 'center' }}> <Text style={{ ...TextStyle.caption, color: Colors.whiteMedium, marginLeft: 40 + 8 }}> {store.isRecording ? 'Вправо для отмены' : 'Зажмите для записи'} </Text> </View> {store.isRecording && ( <View style={{ flexDirection: 'row', alignItems: 'center' }}> <Text style={{ ...TextStyle.body1, marginRight: 10 }}>{recordTime}</Text> <RecordingIcon /> </View> )} </View> </View> ); }); export default AudioRecorder; const styles = StyleSheet.create({ recorder: { height: 40, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }, swipeableButton: { position: 'absolute', top: 0, left: 0, width: '100%', height: 40, zIndex: 1, }, animatedIconsContainer: { width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', }, animatedIconsBG: { position: 'absolute', top: 0, left: 0, bottom: 0, right: 0, backgroundColor: Colors.error, }, animatedIconsWrap: { position: 'relative', width: 24, height: 24, }, animatedIcon: { position: 'absolute', top: 0, left: 0, bottom: 0, right: 0, }, });Для реализации отмены записи воспользовался методом onSlidingComplete у библиотеки слайдера, который срабатывает при отпускании ползунка. Позицию отмены решил сделать 80%. Вынес в константу для удобства CANCEL_RECORDING_SLIDER_VALUE, равный 0.8, потому что слайдер по умолчанию работает от 0 до 1.
При отпускании кнопки записи (ползунка слайдера) вызываем обработчик handleSlidingComplete. Он, в свою очередь, вызывает функцию onStopRecord, передавая туда позицию слайдера на момент отпускания. В функции onStopRecord в зависимости от позиции слайдера делаем проверку: сохранить запись или отменить запись. Чтобы определить, какое действие выполнить, прописываем условие value > CANCEL_RECORDING_SLIDER_VALUE. Если значения слайдера при отпускании кнопки записи больше 0.8 — отменяем запись, если меньше — сохраняем.
Вот и все!
AudioPlayer.tsx
import React, { useCallback, useEffect, useState } from 'react'; import { ActivityIndicator, Platform, Pressable, StyleSheet, Text, View } from 'react-native'; import { observer } from 'mobx-react-lite'; import Slider from 'react-native-slider-custom'; import { useFocusEffect } from '@react-navigation/native'; import { useStores } from '../../../hooks/use-stores'; import { Colors } from '../../../styles/Colors'; import { TextStyle } from '../../../styles/TextStyle'; import PlayIcon from '../../svg/PlayIcon'; import PauseIcon from '../../svg/PauseIcon'; import { playerStyles } from './playerStyles'; interface IAudioPlayerProps { audio?: string; } const AudioPlayer: React.FC<IAudioPlayerProps> = observer(({ audio }) => { const { audioRecPlayStore: store } = useStores(); const [currentPositionSec, setCurrentPositionSec] = useState(0); const [currentDurationSec, setCurrentDurationSec] = useState(0); const [playTime, setPlayTime] = useState('00:00:00'); const [isPlaying, setIsPlaying] = useState(false); const [loading, setLoading] = useState(false); useFocusEffect( React.useCallback(() => { return () => { onStopPlay(); }; }, []), ); useEffect(() => { return () => { onStopPlay(); }; }, []); // Actions const onPlayPause = () => { if (!loading) { if (isPlaying) { onPausePlay(); } else { onStartPlay(); } } }; const onStartPlay = useCallback(async () => { const path = Platform.select({ ios: audio ? audio : 'akkerman_voice_message.m4a', android: audio ? audio : 'sdcard/akkerman_voice_message.mp4', }); setLoading(true); await store.audioRecorderPlayer.startPlayer(path); setLoading(false); setIsPlaying(true); store.audioRecorderPlayer.addPlayBackListener((e: any) => { if (e.current_position === e.duration) { setIsPlaying(false); onStopPlay(); } setCurrentPositionSec(e.current_position); setCurrentDurationSec(e.duration); setPlayTime(store.audioRecorderPlayer.mmssss(Math.floor(e.current_position))); return; }); }, [store.audioRecorderPlayer]); const onPausePlay = async () => { await store.audioRecorderPlayer.pausePlayer(); setIsPlaying(false); }; const onStopPlay = async () => { store.audioRecorderPlayer.stopPlayer(); store.audioRecorderPlayer.removePlayBackListener(); }; // Renders return ( <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <Pressable style={[playerStyles.button, { marginRight: 12 }]} onPress={onPlayPause}> {loading ? <ActivityIndicator size={24} color={Colors.black} /> : isPlaying ? <PauseIcon /> : <PlayIcon />} </Pressable> <View style={{ flex: 1 }}> <Slider maximumValue={Math.floor(currentDurationSec)} value={Math.floor(currentPositionSec)} minimumTrackTintColor={Colors.primary} maximumTrackTintColor={Colors.whiteMedium} thumbStyle={{ width: 12, height: 12, backgroundColor: Colors.primary }} style={{ height: 12 + 8 }} disabled /> <Text style={{ ...TextStyle.caption, color: Colors.white }}>{playTime}</Text> </View> </View> ); }); export default AudioPlayer;Это обычный кастомный аудиоплеер с некоторыми отличиями библиотеки.
Чтобы рекордер и плеер работали совместно, нужно использовать один и тот же экземпляр плеера. Также для хорошего UX нужно было отключить скролл экрана «Создания сообщения о риске» во время записи голоса, чтобы работал только слайдер. Поэтому сделал MobX стор AudioRecPlayStore.ts.
AudioRecPlayStore.ts
import { makeAutoObservable } from 'mobx'; import AudioRecorderPlayer from 'react-native-audio-recorder-player'; import { Nullable } from '../../../types/CommonTypes'; import { IAudioObject } from './AudioRecPlay'; export class AudioRecPlayStore { isRecording = false; audioRecorderPlayer: AudioRecorderPlayer; audio: Nullable<IAudioObject> = null; constructor() { makeAutoObservable(this); this.audioRecorderPlayer = new AudioRecorderPlayer(); } setIsRecording = (state: boolean) => { this.isRecording = state; }; setAudio = (audio: Nullable<IAudioObject>) => { this.audio = audio; }; clear = () => { this.isRecording = false; this.audio = null; }; }В сторе есть следующие свойства:
-
Экземпляр плеера audioRecorderPlayer для переключение из рекордера в плеер и обратно;
-
Состояние записи isRecording для отключения скролла во время записи.
<ScrollView scrollEnabled={!audioRecPlayStore.isRecording}>За рендер рекордера или плеера отвечает компонент MessageAudioMessage.tsx.
MessageAudioMessage.tsx
import React, { useEffect } from 'react'; import { Text, TouchableOpacity, View } from 'react-native'; import { observer } from 'mobx-react-lite'; import { useStores } from '../../../hooks/use-stores'; import InputLabel from '../../InputLabel'; import { messageStyles } from '../messageStyles'; import { Colors } from '../../../styles/Colors'; import { TextStyle } from '../../../styles/TextStyle'; import AudioRecorder from './AudioRecorder'; import AudioPlayer from './AudioPlayer'; import { FIleData } from '../../../modules/message/Message'; import { Nullable } from '../../../types/CommonTypes'; interface IMessageAudioMessageProps { onlyPlayer?: boolean; audio?: Nullable<FIleData>; } const MessageAudioMessage: React.FC<IMessageAudioMessageProps> = observer(({ onlyPlayer, audio }) => { const { audioRecPlayStore: store } = useStores(); useEffect(() => { return () => { store.clear(); }; }, []); const handleRemoveAudio = () => { store.setAudio(null); store.audioRecorderPlayer.stopPlayer(); store.audioRecorderPlayer.removePlayBackListener(); }; return ( <View style={{ ...messageStyles.card, flexDirection: 'row', alignItems: 'center' }}> <View style={{ flex: 1 }}> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}> <InputLabel label="Аудиосообщение" /> {!onlyPlayer && !!store.audio && ( <TouchableOpacity onPress={handleRemoveAudio} activeOpacity={0.8}> <Text style={{ ...TextStyle.subtitle, color: Colors.error, letterSpacing: 0 }}>Удалить</Text> </TouchableOpacity> )} </View> {onlyPlayer ? <AudioPlayer audio={audio?.fullUrl || ''} /> : !!store.audio ? <AudioPlayer /> : <AudioRecorder />} </View> </View> ); }); export default MessageAudioMessage;Были проблемы с воспроизведением записанного голоса на разных платформах из разных платформ: они были несовместимы. Решение есть в самой документации библиотеки рекордера.
сonst audioSet: AudioSet = { AudioEncoderAndroid: AudioEncoderAndroidType.AAC, AudioSourceAndroid: AudioSourceAndroidType.MIC, AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high, AVNumberOfChannelsKeyIOS: 2, AVFormatIDKeyIOS: AVEncodingOption.aac, }; await store.audioRecorderPlayer.startRecorder(path, audioSet); Создаем объект audioSet с настройками записи аудиофайла и передаем как второй аргумент методу startRecorder. Эти настройки кроссплатформенные, то есть записанный голос на Android/iOS воспроизводится на вебе в нативном html5 плеере и на Android/iOS.
Полезные ресурсы:
https://www.npmjs.com/package/react-native-audio-recorder-player
ссылка на оригинал статьи https://habr.com/ru/articles/585726/
Добавить комментарий