Capturing Audio Input and Saving as a Playable Blob in IndexedDB Using Cordova Plugin

I'm developing a hybrid app using Cordova and I'm trying to record audio input, convert it into a Blob in a playable format (like WAV), and save it into IndexedDB for later retrieval and playback. I'm using the cordova-plugin-audioinput to capture the raw PCM audio data.

Here's what I've tried so far:

1. I capture the raw PCM audio data using the cordova-plugin-audioinput plugin and buffer it into an array:

var audioBuffer = [];

if (window.audioinput) {
    var audioinputCfg = {
        sampleRate: 44100,
        bufferSize: 4096,
        channels: 1,
        format: audioinput.FORMAT.PCM_16BIT,
        audioSourceType: audioinput.AUDIOSOURCE_TYPE.DEFAULT
    };

    audioinput.initialize(audioinputCfg);

    audioinput.addEventListener('audioinput', function (evt) {
        audioBuffer.push(new Int16Array(evt.data));
    });

    audioinput.start();
}

2. I stop the recording, convert the buffered PCM data to a WAV Blob:

function convertToWavBlob(audioBuffer) {
    var rawAudioData = audioBuffer.map(function(typedArray) {
        return Array.from(typedArray, function(x) { return x / 32767; });
    });

    var sampleRate = 44100;
    var numChannels = 1;
    var wavBlob = rawPCMDataToWavBlob(rawAudioData, sampleRate, numChannels);

    return wavBlob;
}

function stopRecordingAndSave() {
    audioinput.stop();
    var playableBlob = convertToWavBlob(audioBuffer);
}

3. I then try to save the WAV Blob into IndexedDB:

async function stopRecordingAndSave() {
    audioinput.stop();
    var playableBlob = convertToWavBlob(audioBuffer);

    try {
        var db = await initDB();
        var audioID = await saveAudioToDB(db, playableBlob);
    } catch (error) {
        console.error('Error saving audio to IndexedDB:', error);
    }
}

4. However, when I try to retrieve the Blob from IndexedDB and play it using an HTML5 <audio> element, the audio does not play.

I'm having trouble with converting the raw PCM data to a playable format and/or storing and retrieving the audio data in IndexedDB. Any help or guidance would be greatly appreciated!

Absolutely, here's how you can add that to your StackOverflow post:

Additionally, if there is a more current or efficient method of accomplishing my goal, I would greatly appreciate any recommendations. For instance, is it possible to make use of the MediaDevices Web API or any other advanced web technologies for this task in a Cordova application? I understand that Cordova primarily uses WebView for displaying web content, and I'm unsure about the support for such APIs in this context.

Alternatively, if there are other Cordova plugins or JavaScript libraries that can simplify the process of capturing audio input, converting it into a playable format, and saving it into IndexedDB, I would be interested in exploring those options as well.

Again, any help or guidance would be greatly appreciated!

Via Active questions tagged javascript - Stack Overflow https://ift.tt/FB47m3b