playing left and right PCM byte arrays

[kboniadi]

Hi, I'm having some trouble passing my PCM arrays into the feed() method. I've initialized the player like so:

let player = new PCMPlayer({
  encoding: "32bitFloat",
  channels: 2,
  sampleRate: 48000,
  flushingTime: 10,
});

The opus decoding library that I'm using(opus stream decoder) decodes my stereo encoded bytes to left and a right PCM arrays. The feed() method only looks like it accepts one array. I did try to manually merge the left and right arrays together before passing the result into feed() but this action adds a huge amount of delay. Is this the only possible way I can go about using your pcm-player with left and right pcm arrays? Thanks

[samirkumardas]

It expects a single byte array. In fact, this player divides the provided buffer into multiple channels eventually https://github.com/samirkumardas/pcm-player/blob/master/pcm-player.js#L88.

You can modify the flash and feed methods as you have already separate data for the left and right channels.

[kboniadi]

Thanks for getting back to me. I modified the code a little to accept two arrays instead of one, and the audio plays. However, there is a strange buzzing sound that occurs when audio is playing. The buzzing sounds doesn't occur when nothing is being played though. Do you have any idea what this could be?? This is the code I have right now in pcm-player.js:

export function PCMPlayer(option) {
    this.init(option);
}

PCMPlayer.prototype.init = function(option) {
    var defaults = {
        encoding: '16bitInt',
        channels: 1,
        sampleRate: 8000,
        flushingTime: 1000
    };
    this.option = Object.assign({}, defaults, option);
    // this.samples = new Float32Array();
    // this.flush = this.flush.bind(this);
    // this.interval = setInterval(this.flush, this.option.flushingTime);
    // this.maxValue = this.getMaxValue();
    // this.typedArray = this.getTypedArray();
    this.createContext();
};

// PCMPlayer.prototype.getMaxValue = function () {
//     var encodings = {
//         '8bitInt': 128,
//         '16bitInt': 32768,
//         '32bitInt': 2147483648,
//         '32bitFloat': 1
//     }

//     return encodings[this.option.encoding] ? encodings[this.option.encoding] : encodings['16bitInt'];
// };

// PCMPlayer.prototype.getTypedArray = function () {
//     var typedArrays = {
//         '8bitInt': Int8Array,
//         '16bitInt': Int16Array,
//         '32bitInt': Int32Array,
//         '32bitFloat': Float32Array
//     }

//     return typedArrays[this.option.encoding] ? typedArrays[this.option.encoding] : typedArrays['16bitInt'];
// };

PCMPlayer.prototype.createContext = function() {
    this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    this.gainNode = this.audioCtx.createGain();
    this.gainNode.gain.value = 1;
    this.gainNode.connect(this.audioCtx.destination);
    this.startTime = this.audioCtx.currentTime;
};

// PCMPlayer.prototype.isTypedArray = function(data) {
//     return (data.byteLength && data.buffer && data.buffer.constructor == ArrayBuffer);
// };

PCMPlayer.prototype.feed = function({channelData, length}) {
    var audioSrc = this.audioCtx.createBufferSource(),
    audioBuffer = this.audioCtx.createBuffer(this.option.channels, length, this.option.sampleRate);

    for (let c = 0; c < this.option.channels; c++) {
        if (audioBuffer.copyToChannel) {
            audioBuffer.copyToChannel(channelData[c], c);
        } else {
            console.log("copyToChannel not supported")
            let audioData = audioBuffer.getChannelData(c);
            for (let i = 0; i < channelData[c].byteLength; i++) {
              audioData[i] = channelData[c][i];
            }
        }
    }

    if (this.startTime < this.audioCtx.currentTime) {
        this.startTime = this.audioCtx.currentTime;
    }

    audioSrc.buffer = audioBuffer;
    audioSrc.connect(this.gainNode);
    audioSrc.start(this.startTime);
    this.startTime += audioBuffer.duration;

    // if (!this.isTypedArray(data)) return;
    // data = this.getFormatedValue(data);
    // var tmp = new Float32Array(this.samples.length + data.length);
    // tmp.set(this.samples, 0);
    // tmp.set(data, this.samples.length);
    // this.samples = tmp;
};

[samirkumardas]

I usually get click noise most of the time. Very difficult to tell the reasons. You can try writing buffer into a file. Then play the file using a player to see if it plays well. Also, you can feed whole stored data at a time to see if the noise emanates from streaming data because sometimes streaming data cause some noise due to incorrect cut-off of PCM data.

[kboniadi]

Hey thank you so much for the feedback. I ended up fixing the issue. It actually had nothing to do with your pcm-player code. That being said, I do have another question for you.

Could you explain the purpose of having to manually check and reset the startTime back to currentTime?

if (this.startTime < this.audioCtx.currentTime) {
    this.startTime = this.audioCtx.currentTime;
}

In my specific code base, I actually had to also make a condition where if the startTime > currentTime then startTime = currentTime. I'm just confused on why the startTime is getting out of sync (< and > currentTime). Thanks

[kboniadi]

Also just an observation, but when startTime gets ahead of currentTime, I set it to currentTime which causes startTime to do a little "flutter" where it goes less then currentTime. So it ends up triggering your if statement a few times before getting in sync.

[samirkumardas]

In my specific code base, I actually had to also make a condition where if the startTime > currentTime then startTime = currentTime. I'm just confused on why the startTime is getting out of sync (< and > currentTime). Thanks

Well, I don't know the exact reason. It could be the buggy implementation of AudioContext. I had also encountered the syncing issue and that IF conditional was a workaround in my case.

[jakeershareef]

hai.
i am not able to play audio, please help me to fix the problem