反应原生音频动画

Question

我目前正在使用 React Native Audio 来录制音频并存储声音。我想知道是否有任何方法可以实时获取此录制的进度，以将麦克风输入映射到动画，以提供麦克风正在工作的视觉反馈。

目前，包的 onProgress(( 函数仅发送我发现的当前时间码。

感谢您的任何帮助！

Answer 1

我目前正在研究一些更相似的东西。

我就是这样做到的。

import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity,
Button,
LayoutAnimation,
Image,
ScrollView,
Animated
} from 'react-native';
export default class App extends Component {
state = {
isPressed: false,
animated: new Animated.Value(0),
opacityA: new Animated.Value(1),
}
constructor(props) {
super(props);
this._onPress = this._onPress.bind(this);
}
_runAnimation() {
const { animated, opacityA } = this.state;
Animated.loop(
Animated.parallel([
Animated.timing(animated, {
toValue: 1,
duration: 1000,
}),
Animated.timing(opacityA, {
toValue: 0,
duration: 1000,
})
])
).start();
}
_stopAnimation() {
Animated.loop(
Animated.parallel([
Animated.timing(animated),
Animated.timing(opacityA)
])
).stop();
}
_onPress() {
this.setState(
state => ({ isPressed: !state.isPressed }),
)
}
_micButton() {
const { isPressed, animated, opacityA, } = this.state;
if (isPressed) {
//some function
this._runAnimation();
return (
<Animated.View style={{
width: 100,
height: 100,
borderRadius: 50,
backgroundColor: 'rgba(153,0,0,0.4)',
opacity: opacityA,
transform: [
{
scale: animated
}
]
}}>
{/* icon or image */}
</Animated.View>
);
} else {
//some function
return (
<View style={{
width: 100,
height: 100,
borderRadius: 50,
backgroundColor: 'rgba(153,0,0,0.4)',
}}>
{/* icon or image */}
</View>
);
}
}



render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this._onPress}>
{this._micButton()}
</TouchableOpacity>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});

我希望这能解决你的问题。

Answer 2

我使用expo-av。有一个 API setOnRecordingStatusUpdate，您可以设置一个定期调用的函数，其中包含录制的状态。例如

async startRecording(callback: onRecordingStatusUpdated) {
this.isLoading = true
await Audio.setAudioModeAsync({
allowsRecordingIOS: true,
interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
playsInSilentModeIOS: true,
shouldDuckAndroid: true,
interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
playThroughEarpieceAndroid: true
});
if (this.recording !== null) {
// only one recorder is allowed to exist
this.recording.setOnRecordingStatusUpdate(null);
this.recording = null;
}
const recording = new Audio.Recording();
await recording.prepareToRecordAsync(this.recordingSettings);
// ✨✨✨set the callback
recording.setOnRecordingStatusUpdate(callback);
this.recording = recording;
await this.recording.startAsync(); // Will call this._updateScreenForRecordingStatus to update the screen.
this.isLoading = false
}
// 🌟🌟🌟
startRecording((status => console.log('[onRecording]', status)))