react-native-live-audio-visualizer
v0.1.0
Published
A powerful and customizable real-time audio visualizer component for React Native. This package allows developers to integrate dynamic and visually engaging audio visualizations into their React Native applications, enhancing the user experience with live
Downloads
16
Maintainers
Readme
react-native-live-audio-visualizer
A powerful and customizable real-time audio visualizer component for React Native. This package allows developers to integrate dynamic and visually engaging audio visualizations into their React Native applications, enhancing the user experience with live audio feedback.
Installation
npm install react-native-live-audio-visualizer
Usage
import * as React from 'react';
import { DeviceEventEmitter, StyleSheet, View } from 'react-native';
import {
RequestAudioPermission,
startAudioListening,
stopAudioListening,
} from 'react-native-live-audio-visualizer';
export default function App() {
const [result, setResult] = React.useState<number[]>([]);
React.useEffect(() => {
RequestAudioPermission(
'This app needs audio permission',
'Permission for audio',
'OK'
);
startAudioListening().then(() => {
console.log('Audio listening started');
});
DeviceEventEmitter.addListener('VisualizationChanged', (data) => {
console.log('Event received:', data);
setResult(data);
});
return () => {
stopAudioListening().then(() => {
console.log('Audio listening stopped');
});
};
}, []);
return (
<View style={styles.container}>
<View style={styles.waveContainer}>
{result.map((wave, index) => (
<View key={index} style={[styles.waveItem, { height: wave * 100 }]} />
))}
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'black',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
waveContainer: {
alignItems: 'center',
justifyContent: 'center',
width: '100%',
flexDirection: 'row',
},
box: {
width: 60,
height: 60,
marginVertical: 20,
},
waveItem: {
width: 12,
backgroundColor: '#B692F6',
marginHorizontal: 1,
borderRadius: 4,
minHeight: 10,
marginRight: 8,
},
});