I have a small issue, This code below live streams audio from one client to another in the same room. This works by the first client sending audio data to the server which sends it to a separate client. When a different client receives the incoming audioData, the arraybuffer is changed to a float32array and then into an audio buffer that is then connected to an output device and played. The result of this is a realtime audio feed from one client to another. However, there is a static/click that seems to happen when one audiobuffer stops playing and the next one starts. However, when I increase the sample rate of the "audioC" audioContext, this static appears more frequently. Does anyone know why this is happening or how I can fix this?
const socket = io();
var AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext({
latencyHint: 'interactive',
sampleRate: 16384,
});
const audioC = new AudioContext()
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
if (navigator.getUserMedia) {
console.log('getUserMedia supported.')
navigator.getUserMedia(
{ audio: true },
stream => {
const source = audioCtx.createMediaStreamSource(stream)
const processor = audioCtx.createScriptProcessor(16384, 1, 1)
source.connect(processor)
processor.connect(audioCtx.destination)
processor.onaudioprocess = e => {
socket.emit('Voice', e.inputBuffer.getChannelData(0))
}
socket.on('Voice', msg => {
var z = new Float32Array(msg, 0, 16384);
console.log(z)
const audioBuffer = new AudioBuffer({
length: 16384,
sampleRate: 16384
});
audioBuffer.copyToChannel(z, 0, 0);
const source = audioC.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioC.destination);
source.start();
})
audioCtx.resume()
},
err => console.error(err)
)
}The server side just sends data to another client upon receiving the data.