import { LightningElement, track, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import saveFile from '@salesforce/apex/FileUploadController.saveFile';

export default class AudioRecorder extends LightningElement {
    @track audioURL = '';
    @track isRecording = false;
    @track error = '';
    @track base64Audio;
    @api recordId;
    mediaRecorder;
    chunks = [];

    handleMicClick() {
        if (this.isRecording) {
            this.stopRecording();
        } else {
            this.startRecording();
        }
    }

    startRecording() {
        navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
            this.mediaRecorder = new MediaRecorder(stream);
            this.chunks = [];
            this.mediaRecorder.ondataavailable = (event) => this.chunks.push(event.data);
            this.mediaRecorder.onstop = () => {
                const blob = new Blob(this.chunks, { type: 'audio/webm' });
                this.audioURL = URL.createObjectURL(blob);

                const reader = new FileReader();
                reader.onload = () => (this.base64Audio = reader.result.split(',')[1]);
                reader.readAsDataURL(blob);
            };
            this.mediaRecorder.start();
            this.isRecording = true;
        }).catch(() => {
            this.error = 'Unable to access microphone.';
        });
    }

    stopRecording() {
        if (this.mediaRecorder) {
            this.mediaRecorder.stop();
            this.isRecording = false;
        }
    }

    saveAudio() {
        if (this.base64Audio) {
            saveFile({
                base64Data: this.base64Audio,
                fileName: `Recording-${new Date().toISOString()}`,
                recId: this.recordId
            }).then(() => {
                this.dispatchEvent(new ShowToastEvent({
                    title: 'Success',
                    message: 'Audio file saved successfully!',
                    variant: 'success'
                }));
            }).catch(() => {
                this.dispatchEvent(new ShowToastEvent({
                    title: 'Error',
                    message: 'Failed to save audio file.',
                    variant: 'error'
                }));
            });
        }
    }
}

Apex Back-End Logic

The Apex controller handles the saving of audio files as Content Documents.

public with sharing class FileUploadController {
    @AuraEnabled
    public static String saveFile(String base64Data, String fileName, String recId) {
        Blob fileBlob = EncodingUtil.base64Decode(base64Data);

        ContentVersion contentVersion = new ContentVersion();
        contentVersion.Title = fileName;
        contentVersion.PathOnClient = fileName + '.mp3';
        contentVersion.VersionData = fileBlob;

        if (String.isNotBlank(recId)) {
            contentVersion.FirstPublishLocationId = recId;
        }

        insert contentVersion;

        return contentVersion.Id;
    }
}

Key Takeaways:

• MediaRecorder API enables capturing audio in the browser.

• ContentVersion object in Salesforce allows storing files easily.

• Error handling ensures smooth user experience.

This Audio Recorder is a great example of leveraging browser and Salesforce capabilities for seamless file handling! 🎙️

Output :