I have a React Native application where I have to display vector sound waves as in below image based on the audio obtained through WebRTC.
Tried below code to send the audio track to display the sound waves.
import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import SoundWave from './SoundWave';
const App = () => {
const [audioData, setAudioData] = useState([]); // State to store audio data
useEffect(() => {
// Function to handle incoming audio data from WebRTC stream
const handleAudioData = (event) => {
const { data } = **// Want to know how to send the audio track from webrtc to this variable**
setAudioData(data);
};
// Initialize and configure your WebRTC audio stream
const audioStream = new MediaStream();
// ... Code to set up your WebRTC audio stream ...
const audioContext = new AudioContext();
const audioSource = audioContext.createMediaStreamSource(audioStream);
const audioProcessor = audioContext.createScriptProcessor(4096, 1, 1);
audioProcessor.onaudioprocess = handleAudioData;
audioSource.connect(audioProcessor);
audioProcessor.connect(audioContext.destination);
// Cleanup function to disconnect audio nodes and clean up resources
return () => {
audioProcessor.disconnect();
audioSource.disconnect();
audioContext.close();
};
}, []);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<SoundWave data={audioData} width={300} height={100} />
</View>
);
};
export default App;
In the above code want to know how to set the webrtc audio track to setAudioData(?)
I have used the component as below.
import React from 'react';
import { View } from 'react-native';
import Svg, { Path } from 'react-native-svg';
const SoundWave = ({ data, width, height }) => {
// Normalize the data values to fit within the height
const normalizedData = data.map(value => value * height);
// Calculate the width of each waveform segment
const segmentWidth = width / (normalizedData.length - 1);
// Generate the SVG path string based on the data
const pathData = normalizedData
.map((value, index) => `${index * segmentWidth},${value}`)
.join(' ');
return (
<View style={{ width, height }}>
<Svg width={width} height={height}>
<Path
d={`M0,${height / 2} L${pathData} L${width},${height / 2}`}
fill="none"
stroke="black"
/>
</Svg>
</View>
);
};
export default SoundWave;
Please let me know how to get the audio track and changes (if any) for calculation to make the sound wave to work.
Thanks in Advance