fixes to recurring recordings

app/BlobFix.ts

@@ -0,0 +1,549 @@
+/*
+ * There is a bug where `navigator.mediaDevices.getUserMedia` + `MediaRecorder`
+ * creates WEBM files without duration metadata. See:
+ * - https://bugs.chromium.org/p/chromium/issues/detail?id=642012
+ * - https://stackoverflow.com/a/39971175/13989043
+ *
+ * This file contains a function that fixes the duration metadata of a WEBM file.
+ *  - Answer found: https://stackoverflow.com/a/75218309/13989043
+ *  - Code adapted from: https://github.com/mat-sz/webm-fix-duration
+ *    (forked from https://github.com/yusitnikov/fix-webm-duration)
+ */
+
+/*
+ * This is the list of possible WEBM file sections by their IDs.
+ * Possible types: Container, Binary, Uint, Int, String, Float, Date
+ */
+interface Section {
+    name: string;
+    type: string;
+}
+
+const sections: Record<number, Section> = {
+    0xa45dfa3: { name: "EBML", type: "Container" },
+    0x286: { name: "EBMLVersion", type: "Uint" },
+    0x2f7: { name: "EBMLReadVersion", type: "Uint" },
+    0x2f2: { name: "EBMLMaxIDLength", type: "Uint" },
+    0x2f3: { name: "EBMLMaxSizeLength", type: "Uint" },
+    0x282: { name: "DocType", type: "String" },
+    0x287: { name: "DocTypeVersion", type: "Uint" },
+    0x285: { name: "DocTypeReadVersion", type: "Uint" },
+    0x6c: { name: "Void", type: "Binary" },
+    0x3f: { name: "CRC-32", type: "Binary" },
+    0xb538667: { name: "SignatureSlot", type: "Container" },
+    0x3e8a: { name: "SignatureAlgo", type: "Uint" },
+    0x3e9a: { name: "SignatureHash", type: "Uint" },
+    0x3ea5: { name: "SignaturePublicKey", type: "Binary" },
+    0x3eb5: { name: "Signature", type: "Binary" },
+    0x3e5b: { name: "SignatureElements", type: "Container" },
+    0x3e7b: { name: "SignatureElementList", type: "Container" },
+    0x2532: { name: "SignedElement", type: "Binary" },
+    0x8538067: { name: "Segment", type: "Container" },
+    0x14d9b74: { name: "SeekHead", type: "Container" },
+    0xdbb: { name: "Seek", type: "Container" },
+    0x13ab: { name: "SeekID", type: "Binary" },
+    0x13ac: { name: "SeekPosition", type: "Uint" },
+    0x549a966: { name: "Info", type: "Container" },
+    0x33a4: { name: "SegmentUID", type: "Binary" },
+    0x3384: { name: "SegmentFilename", type: "String" },
+    0x1cb923: { name: "PrevUID", type: "Binary" },
+    0x1c83ab: { name: "PrevFilename", type: "String" },
+    0x1eb923: { name: "NextUID", type: "Binary" },
+    0x1e83bb: { name: "NextFilename", type: "String" },
+    0x444: { name: "SegmentFamily", type: "Binary" },
+    0x2924: { name: "ChapterTranslate", type: "Container" },
+    0x29fc: { name: "ChapterTranslateEditionUID", type: "Uint" },
+    0x29bf: { name: "ChapterTranslateCodec", type: "Uint" },
+    0x29a5: { name: "ChapterTranslateID", type: "Binary" },
+    0xad7b1: { name: "TimecodeScale", type: "Uint" },
+    0x489: { name: "Duration", type: "Float" },
+    0x461: { name: "DateUTC", type: "Date" },
+    0x3ba9: { name: "Title", type: "String" },
+    0xd80: { name: "MuxingApp", type: "String" },
+    0x1741: { name: "WritingApp", type: "String" },
+    // 0xf43b675: { name: 'Cluster', type: 'Container' },
+    0x67: { name: "Timecode", type: "Uint" },
+    0x1854: { name: "SilentTracks", type: "Container" },
+    0x18d7: { name: "SilentTrackNumber", type: "Uint" },
+    0x27: { name: "Position", type: "Uint" },
+    0x2b: { name: "PrevSize", type: "Uint" },
+    0x23: { name: "SimpleBlock", type: "Binary" },
+    0x20: { name: "BlockGroup", type: "Container" },
+    0x21: { name: "Block", type: "Binary" },
+    0x22: { name: "BlockVirtual", type: "Binary" },
+    0x35a1: { name: "BlockAdditions", type: "Container" },
+    0x26: { name: "BlockMore", type: "Container" },
+    0x6e: { name: "BlockAddID", type: "Uint" },
+    0x25: { name: "BlockAdditional", type: "Binary" },
+    0x1b: { name: "BlockDuration", type: "Uint" },
+    0x7a: { name: "ReferencePriority", type: "Uint" },
+    0x7b: { name: "ReferenceBlock", type: "Int" },
+    0x7d: { name: "ReferenceVirtual", type: "Int" },
+    0x24: { name: "CodecState", type: "Binary" },
+    0x35a2: { name: "DiscardPadding", type: "Int" },
+    0xe: { name: "Slices", type: "Container" },
+    0x68: { name: "TimeSlice", type: "Container" },
+    0x4c: { name: "LaceNumber", type: "Uint" },
+    0x4d: { name: "FrameNumber", type: "Uint" },
+    0x4b: { name: "BlockAdditionID", type: "Uint" },
+    0x4e: { name: "Delay", type: "Uint" },
+    0x4f: { name: "SliceDuration", type: "Uint" },
+    0x48: { name: "ReferenceFrame", type: "Container" },
+    0x49: { name: "ReferenceOffset", type: "Uint" },
+    0x4a: { name: "ReferenceTimeCode", type: "Uint" },
+    0x2f: { name: "EncryptedBlock", type: "Binary" },
+    0x654ae6b: { name: "Tracks", type: "Container" },
+    0x2e: { name: "TrackEntry", type: "Container" },
+    0x57: { name: "TrackNumber", type: "Uint" },
+    0x33c5: { name: "TrackUID", type: "Uint" },
+    0x3: { name: "TrackType", type: "Uint" },
+    0x39: { name: "FlagEnabled", type: "Uint" },
+    0x8: { name: "FlagDefault", type: "Uint" },
+    0x15aa: { name: "FlagForced", type: "Uint" },
+    0x1c: { name: "FlagLacing", type: "Uint" },
+    0x2de7: { name: "MinCache", type: "Uint" },
+    0x2df8: { name: "MaxCache", type: "Uint" },
+    0x3e383: { name: "DefaultDuration", type: "Uint" },
+    0x34e7a: { name: "DefaultDecodedFieldDuration", type: "Uint" },
+    0x3314f: { name: "TrackTimecodeScale", type: "Float" },
+    0x137f: { name: "TrackOffset", type: "Int" },
+    0x15ee: { name: "MaxBlockAdditionID", type: "Uint" },
+    0x136e: { name: "Name", type: "String" },
+    0x2b59c: { name: "Language", type: "String" },
+    0x6: { name: "CodecID", type: "String" },
+    0x23a2: { name: "CodecPrivate", type: "Binary" },
+    0x58688: { name: "CodecName", type: "String" },
+    0x3446: { name: "AttachmentLink", type: "Uint" },
+    0x1a9697: { name: "CodecSettings", type: "String" },
+    0x1b4040: { name: "CodecInfoURL", type: "String" },
+    0x6b240: { name: "CodecDownloadURL", type: "String" },
+    0x2a: { name: "CodecDecodeAll", type: "Uint" },
+    0x2fab: { name: "TrackOverlay", type: "Uint" },
+    0x16aa: { name: "CodecDelay", type: "Uint" },
+    0x16bb: { name: "SeekPreRoll", type: "Uint" },
+    0x2624: { name: "TrackTranslate", type: "Container" },
+    0x26fc: { name: "TrackTranslateEditionUID", type: "Uint" },
+    0x26bf: { name: "TrackTranslateCodec", type: "Uint" },
+    0x26a5: { name: "TrackTranslateTrackID", type: "Binary" },
+    0x60: { name: "Video", type: "Container" },
+    0x1a: { name: "FlagInterlaced", type: "Uint" },
+    0x13b8: { name: "StereoMode", type: "Uint" },
+    0x13c0: { name: "AlphaMode", type: "Uint" },
+    0x13b9: { name: "OldStereoMode", type: "Uint" },
+    0x30: { name: "PixelWidth", type: "Uint" },
+    0x3a: { name: "PixelHeight", type: "Uint" },
+    0x14aa: { name: "PixelCropBottom", type: "Uint" },
+    0x14bb: { name: "PixelCropTop", type: "Uint" },
+    0x14cc: { name: "PixelCropLeft", type: "Uint" },
+    0x14dd: { name: "PixelCropRight", type: "Uint" },
+    0x14b0: { name: "DisplayWidth", type: "Uint" },
+    0x14ba: { name: "DisplayHeight", type: "Uint" },
+    0x14b2: { name: "DisplayUnit", type: "Uint" },
+    0x14b3: { name: "AspectRatioType", type: "Uint" },
+    0xeb524: { name: "ColourSpace", type: "Binary" },
+    0xfb523: { name: "GammaValue", type: "Float" },
+    0x383e3: { name: "FrameRate", type: "Float" },
+    0x61: { name: "Audio", type: "Container" },
+    0x35: { name: "SamplingFrequency", type: "Float" },
+    0x38b5: { name: "OutputSamplingFrequency", type: "Float" },
+    0x1f: { name: "Channels", type: "Uint" },
+    0x3d7b: { name: "ChannelPositions", type: "Binary" },
+    0x2264: { name: "BitDepth", type: "Uint" },
+    0x62: { name: "TrackOperation", type: "Container" },
+    0x63: { name: "TrackCombinePlanes", type: "Container" },
+    0x64: { name: "TrackPlane", type: "Container" },
+    0x65: { name: "TrackPlaneUID", type: "Uint" },
+    0x66: { name: "TrackPlaneType", type: "Uint" },
+    0x69: { name: "TrackJoinBlocks", type: "Container" },
+    0x6d: { name: "TrackJoinUID", type: "Uint" },
+    0x40: { name: "TrickTrackUID", type: "Uint" },
+    0x41: { name: "TrickTrackSegmentUID", type: "Binary" },
+    0x46: { name: "TrickTrackFlag", type: "Uint" },
+    0x47: { name: "TrickMasterTrackUID", type: "Uint" },
+    0x44: { name: "TrickMasterTrackSegmentUID", type: "Binary" },
+    0x2d80: { name: "ContentEncodings", type: "Container" },
+    0x2240: { name: "ContentEncoding", type: "Container" },
+    0x1031: { name: "ContentEncodingOrder", type: "Uint" },
+    0x1032: { name: "ContentEncodingScope", type: "Uint" },
+    0x1033: { name: "ContentEncodingType", type: "Uint" },
+    0x1034: { name: "ContentCompression", type: "Container" },
+    0x254: { name: "ContentCompAlgo", type: "Uint" },
+    0x255: { name: "ContentCompSettings", type: "Binary" },
+    0x1035: { name: "ContentEncryption", type: "Container" },
+    0x7e1: { name: "ContentEncAlgo", type: "Uint" },
+    0x7e2: { name: "ContentEncKeyID", type: "Binary" },
+    0x7e3: { name: "ContentSignature", type: "Binary" },
+    0x7e4: { name: "ContentSigKeyID", type: "Binary" },
+    0x7e5: { name: "ContentSigAlgo", type: "Uint" },
+    0x7e6: { name: "ContentSigHashAlgo", type: "Uint" },
+    0xc53bb6b: { name: "Cues", type: "Container" },
+    0x3b: { name: "CuePoint", type: "Container" },
+    0x33: { name: "CueTime", type: "Uint" },
+    0x37: { name: "CueTrackPositions", type: "Container" },
+    0x77: { name: "CueTrack", type: "Uint" },
+    0x71: { name: "CueClusterPosition", type: "Uint" },
+    0x70: { name: "CueRelativePosition", type: "Uint" },
+    0x32: { name: "CueDuration", type: "Uint" },
+    0x1378: { name: "CueBlockNumber", type: "Uint" },
+    0x6a: { name: "CueCodecState", type: "Uint" },
+    0x5b: { name: "CueReference", type: "Container" },
+    0x16: { name: "CueRefTime", type: "Uint" },
+    0x17: { name: "CueRefCluster", type: "Uint" },
+    0x135f: { name: "CueRefNumber", type: "Uint" },
+    0x6b: { name: "CueRefCodecState", type: "Uint" },
+    0x941a469: { name: "Attachments", type: "Container" },
+    0x21a7: { name: "AttachedFile", type: "Container" },
+    0x67e: { name: "FileDescription", type: "String" },
+    0x66e: { name: "FileName", type: "String" },
+    0x660: { name: "FileMimeType", type: "String" },
+    0x65c: { name: "FileData", type: "Binary" },
+    0x6ae: { name: "FileUID", type: "Uint" },
+    0x675: { name: "FileReferral", type: "Binary" },
+    0x661: { name: "FileUsedStartTime", type: "Uint" },
+    0x662: { name: "FileUsedEndTime", type: "Uint" },
+    0x43a770: { name: "Chapters", type: "Container" },
+    0x5b9: { name: "EditionEntry", type: "Container" },
+    0x5bc: { name: "EditionUID", type: "Uint" },
+    0x5bd: { name: "EditionFlagHidden", type: "Uint" },
+    0x5db: { name: "EditionFlagDefault", type: "Uint" },
+    0x5dd: { name: "EditionFlagOrdered", type: "Uint" },
+    0x36: { name: "ChapterAtom", type: "Container" },
+    0x33c4: { name: "ChapterUID", type: "Uint" },
+    0x1654: { name: "ChapterStringUID", type: "String" },
+    0x11: { name: "ChapterTimeStart", type: "Uint" },
+    0x12: { name: "ChapterTimeEnd", type: "Uint" },
+    0x18: { name: "ChapterFlagHidden", type: "Uint" },
+    0x598: { name: "ChapterFlagEnabled", type: "Uint" },
+    0x2e67: { name: "ChapterSegmentUID", type: "Binary" },
+    0x2ebc: { name: "ChapterSegmentEditionUID", type: "Uint" },
+    0x23c3: { name: "ChapterPhysicalEquiv", type: "Uint" },
+    0xf: { name: "ChapterTrack", type: "Container" },
+    0x9: { name: "ChapterTrackNumber", type: "Uint" },
+    0x0: { name: "ChapterDisplay", type: "Container" },
+    0x5: { name: "ChapString", type: "String" },
+    0x37c: { name: "ChapLanguage", type: "String" },
+    0x37e: { name: "ChapCountry", type: "String" },
+    0x2944: { name: "ChapProcess", type: "Container" },
+    0x2955: { name: "ChapProcessCodecID", type: "Uint" },
+    0x50d: { name: "ChapProcessPrivate", type: "Binary" },
+    0x2911: { name: "ChapProcessCommand", type: "Container" },
+    0x2922: { name: "ChapProcessTime", type: "Uint" },
+    0x2933: { name: "ChapProcessData", type: "Binary" },
+    0x254c367: { name: "Tags", type: "Container" },
+    0x3373: { name: "Tag", type: "Container" },
+    0x23c0: { name: "Targets", type: "Container" },
+    0x28ca: { name: "TargetTypeValue", type: "Uint" },
+    0x23ca: { name: "TargetType", type: "String" },
+    0x23c5: { name: "TagTrackUID", type: "Uint" },
+    0x23c9: { name: "TagEditionUID", type: "Uint" },
+    0x23c4: { name: "TagChapterUID", type: "Uint" },
+    0x23c6: { name: "TagAttachmentUID", type: "Uint" },
+    0x27c8: { name: "SimpleTag", type: "Container" },
+    0x5a3: { name: "TagName", type: "String" },
+    0x47a: { name: "TagLanguage", type: "String" },
+    0x484: { name: "TagDefault", type: "Uint" },
+    0x487: { name: "TagString", type: "String" },
+    0x485: { name: "TagBinary", type: "Binary" },
+};
+
+class WebmBase<T> {
+    source?: Uint8Array;
+    data?: T;
+
+    constructor(private name = "Unknown", private type = "Unknown") {}
+
+    updateBySource() {}
+
+    setSource(source: Uint8Array) {
+        this.source = source;
+        this.updateBySource();
+    }
+
+    updateByData() {}
+
+    setData(data: T) {
+        this.data = data;
+        this.updateByData();
+    }
+}
+
+class WebmUint extends WebmBase<string> {
+    constructor(name: string, type: string) {
+        super(name, type || "Uint");
+    }
+
+    updateBySource() {
+        // use hex representation of a number instead of number value
+        this.data = "";
+        for (let i = 0; i < this.source!.length; i++) {
+            const hex = this.source![i].toString(16);
+            this.data += padHex(hex);
+        }
+    }
+
+    updateByData() {
+        const length = this.data!.length / 2;
+        this.source = new Uint8Array(length);
+        for (let i = 0; i < length; i++) {
+            const hex = this.data!.substr(i * 2, 2);
+            this.source[i] = parseInt(hex, 16);
+        }
+    }
+
+    getValue() {
+        return parseInt(this.data!, 16);
+    }
+
+    setValue(value: number) {
+        this.setData(padHex(value.toString(16)));
+    }
+}
+
+function padHex(hex: string) {
+    return hex.length % 2 === 1 ? "0" + hex : hex;
+}
+
+class WebmFloat extends WebmBase<number> {
+    constructor(name: string, type: string) {
+        super(name, type || "Float");
+    }
+
+    getFloatArrayType() {
+        return this.source && this.source.length === 4
+            ? Float32Array
+            : Float64Array;
+    }
+    updateBySource() {
+        const byteArray = this.source!.reverse();
+        const floatArrayType = this.getFloatArrayType();
+        const floatArray = new floatArrayType(byteArray.buffer);
+        this.data! = floatArray[0];
+    }
+    updateByData() {
+        const floatArrayType = this.getFloatArrayType();
+        const floatArray = new floatArrayType([this.data!]);
+        const byteArray = new Uint8Array(floatArray.buffer);
+        this.source = byteArray.reverse();
+    }
+    getValue() {
+        return this.data;
+    }
+    setValue(value: number) {
+        this.setData(value);
+    }
+}
+
+interface ContainerData {
+    id: number;
+    idHex?: string;
+    data: WebmBase<any>;
+}
+
+class WebmContainer extends WebmBase<ContainerData[]> {
+    offset: number = 0;
+    data: ContainerData[] = [];
+
+    constructor(name: string, type: string) {
+        super(name, type || "Container");
+    }
+
+    readByte() {
+        return this.source![this.offset++];
+    }
+    readUint() {
+        const firstByte = this.readByte();
+        const bytes = 8 - firstByte.toString(2).length;
+        let value = firstByte - (1 << (7 - bytes));
+        for (let i = 0; i < bytes; i++) {
+            // don't use bit operators to support x86
+            value *= 256;
+            value += this.readByte();
+        }
+        return value;
+    }
+    updateBySource() {
+        let end: number | undefined = undefined;
+        this.data = [];
+        for (
+            this.offset = 0;
+            this.offset < this.source!.length;
+            this.offset = end
+        ) {
+            const id = this.readUint();
+            const len = this.readUint();
+            end = Math.min(this.offset + len, this.source!.length);
+            const data = this.source!.slice(this.offset, end);
+
+            const info = sections[id] || { name: "Unknown", type: "Unknown" };
+            let ctr: any = WebmBase;
+            switch (info.type) {
+                case "Container":
+                    ctr = WebmContainer;
+                    break;
+                case "Uint":
+                    ctr = WebmUint;
+                    break;
+                case "Float":
+                    ctr = WebmFloat;
+                    break;
+            }
+            const section = new ctr(info.name, info.type);
+            section.setSource(data);
+            this.data.push({
+                id: id,
+                idHex: id.toString(16),
+                data: section,
+            });
+        }
+    }
+    writeUint(x: number, draft = false) {
+        for (
+            var bytes = 1, flag = 0x80;
+            x >= flag && bytes < 8;
+            bytes++, flag *= 0x80
+        ) {}
+
+        if (!draft) {
+            let value = flag + x;
+            for (let i = bytes - 1; i >= 0; i--) {
+                // don't use bit operators to support x86
+                const c = value % 256;
+                this.source![this.offset! + i] = c;
+                value = (value - c) / 256;
+            }
+        }
+
+        this.offset += bytes;
+    }
+
+    writeSections(draft = false) {
+        this.offset = 0;
+        for (let i = 0; i < this.data.length; i++) {
+            const section = this.data[i],
+                content = section.data.source,
+                contentLength = content!.length;
+            this.writeUint(section.id, draft);
+            this.writeUint(contentLength, draft);
+            if (!draft) {
+                this.source!.set(content!, this.offset);
+            }
+            this.offset += contentLength;
+        }
+        return this.offset;
+    }
+
+    updateByData() {
+        // run without accessing this.source to determine total length - need to know it to create Uint8Array
+        const length = this.writeSections(true);
+        this.source = new Uint8Array(length);
+        // now really write data
+        this.writeSections();
+    }
+
+    getSectionById(id: number) {
+        for (let i = 0; i < this.data.length; i++) {
+            const section = this.data[i];
+            if (section.id === id) {
+                return section.data;
+            }
+        }
+
+        return undefined;
+    }
+}
+
+class WebmFile extends WebmContainer {
+    constructor(source: Uint8Array) {
+        super("File", "File");
+        this.setSource(source);
+    }
+
+    fixDuration(duration: number) {
+        const segmentSection = this.getSectionById(0x8538067) as WebmContainer;
+        if (!segmentSection) {
+            return false;
+        }
+
+        const infoSection = segmentSection.getSectionById(
+            0x549a966,
+        ) as WebmContainer;
+        if (!infoSection) {
+            return false;
+        }
+
+        const timeScaleSection = infoSection.getSectionById(
+            0xad7b1,
+        ) as WebmFloat;
+        if (!timeScaleSection) {
+            return false;
+        }
+
+        let durationSection = infoSection.getSectionById(0x489) as WebmFloat;
+        if (durationSection) {
+            if (durationSection.getValue()! <= 0) {
+                durationSection.setValue(duration);
+            } else {
+                return false;
+            }
+        } else {
+            // append Duration section
+            durationSection = new WebmFloat("Duration", "Float");
+            durationSection.setValue(duration);
+            infoSection.data.push({
+                id: 0x489,
+                data: durationSection,
+            });
+        }
+
+        // set default time scale to 1 millisecond (1000000 nanoseconds)
+        timeScaleSection.setValue(1000000);
+        infoSection.updateByData();
+        segmentSection.updateByData();
+        this.updateByData();
+
+        return true;
+    }
+
+    toBlob(type = "video/webm") {
+        return new Blob([this.source!.buffer], { type });
+    }
+}
+
+/**
+ * Fixes duration on MediaRecorder output.
+ * @param blob Input Blob with incorrect duration.
+ * @param duration Correct duration (in milliseconds).
+ * @param type Output blob mimetype (default: video/webm).
+ * @returns
+ */
+export const webmFixDuration = (
+    blob: Blob,
+    duration: number,
+    type = "video/webm",
+): Promise<Blob> => {
+    return new Promise((resolve, reject) => {
+        try {
+            const reader = new FileReader();
+
+            reader.addEventListener("loadend", () => {
+                try {
+                    const result = reader.result as ArrayBuffer;
+                    const file = new WebmFile(new Uint8Array(result));
+                    if (file.fixDuration(duration)) {
+                        resolve(file.toBlob(type));
+                    } else {
+                        resolve(blob);
+                    }
+                } catch (ex) {
+                    reject(ex);
+                }
+            });
+
+            reader.addEventListener("error", () => reject());
+
+            reader.readAsArrayBuffer(blob);
+        } catch (ex) {
+            reject(ex);
+        }
+    });
+};

app/hooks/useAudioManager.ts

@@ -1,48 +0,0 @@
-"use client";
-
-import { useState, useCallback } from 'react';
-import constants from '../constants';
-
-const useAudioManager = () => {
-    const [progress, setProgress] = useState<number | undefined>(undefined);
-    const [audioData, setAudioData] = useState<{
-        buffer: AudioBuffer;
-        url: string;
-        source: any;
-        mimeType: string;
-    } | undefined>(undefined);
-
-    // Reset the audio data
-    const resetAudio = useCallback(() => {
-        setAudioData(undefined);
-    }, []);
-
-    // Set audio from a Blob (e.g., from recording)
-    const setAudioFromRecording = useCallback(async (data: Blob) => {
-        resetAudio();
-        setProgress(0);
-        const blobUrl = URL.createObjectURL(data);
-        const audioCTX = new AudioContext({sampleRate: constants.SAMPLING_RATE, });
-        const arrayBuffer = await data.arrayBuffer();
-        const decoded = await audioCTX.decodeAudioData(arrayBuffer);
-        setProgress(undefined);
-        setAudioData({
-            buffer: decoded,
-            url: blobUrl,
-            source: "RECORDING",
-            mimeType: data.type,
-        });
-    }, [resetAudio]);
-
-    // Other functionalities (e.g., setAudioFromDownload, downloadAudioFromUrl)
-    // can be added similarly based on your requirements
-
-    return {
-        audioData,
-        progress,
-        setAudioFromRecording,
-        // Export other functions as needed
-    };
-};
-
-export default useAudioManager;

app/input.tsx

@@ -1,24 +1,13 @@
 import React, { useState, useEffect, useRef } from 'react';
-import MicIcon from '@mui/icons-material/Mic';
-import StopIcon from '@mui/icons-material/Stop';
 import styles from './page.module.css';
-
 import useSpeechRecognition from './hooks/useSpeechRecognition';
-import useAudioManager from './hooks/useAudioManager';
 import { useMicVAD } from "@ricky0123/vad-react";
-
 import * as ort from "onnxruntime-web";
-ort.env.wasm.wasmPaths = "/_next/static/chunks/";
+import MicIcon from '@mui/icons-material/Mic';
+import StopIcon from '@mui/icons-material/Stop';
+import { webmFixDuration } from './BlobFix';
 
-const getMimeType = (): string | null => {
-    const types = ["audio/webm", "audio/mp4", "audio/ogg", "audio/wav", "audio/aac"];
-    for (let type of types) {
-        if (MediaRecorder.isTypeSupported(type)) {
-            return type;
-        }
-    }
-    return null;
-};
+ort.env.wasm.wasmPaths = "/_next/static/chunks/";
 
 interface VoiceInputFormProps {
     handleSubmit: any;
@@ -26,22 +15,40 @@ interface VoiceInputFormProps {
     setInput: React.Dispatch<React.SetStateAction<string>>;
 }
 
+function getMimeType() {
+    const types = [
+        "audio/webm",
+        "audio/mp4",
+        "audio/ogg",
+        "audio/wav",
+        "audio/aac",
+    ];
+    for (let i = 0; i < types.length; i++) {
+        if (MediaRecorder.isTypeSupported(types[i])) {
+            return types[i];
+        }
+    }
+    return undefined;
+}
+
+const convertBlobToAudioBuffer = async (blob: Blob): Promise<AudioBuffer> => {
+    const audioContext = new AudioContext();
+    const arrayBuffer = await blob.arrayBuffer();
+    return await audioContext.decodeAudioData(arrayBuffer);
+};
+
+
 const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, setInput }) => {
-    const [isRecording, setIsRecording] = useState(false);
-    const { startListening, stopListening, recognizedText } = useSpeechRecognition();
-    const { setAudioFromRecording } = useAudioManager();
+    const [recording, setRecording] = useState(false);
+    const [duration, setDuration] = useState(0);
+    const [recordedBlob, setRecordedBlob] = useState<Blob | null>(null);
 
+    const streamRef = useRef<MediaStream | null>(null);
     const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-    const audioChunksRef = useRef<BlobPart[]>([]);
-
-    const cleanupRecording = () => {
-        if (mediaRecorderRef.current) {
-            mediaRecorderRef.current.stream.getTracks().forEach(track => track.stop());
-            mediaRecorderRef.current = null;
-        }
-        audioChunksRef.current = [];
-    };
+    const chunksRef = useRef<Blob[]>([]);
+    const audioRef = useRef<HTMLAudioElement | null>(null);
 
+    const { startListening, recognizedText } = useSpeechRecognition();
 
     useEffect(() => {
         if (recognizedText) {
@@ -49,84 +56,122 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
         }
     }, [recognizedText, setInput]);
 
-    const startRecording = async () => {
-        cleanupRecording(); // Clean up any existing recording resources
-    
-        try {
-            // Simplified constraints for broader compatibility
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            let recorderOptions = {};
-    
-            // Check if the mimeType is supported; if so, use it
-            const mimeType = getMimeType();
-            if (mimeType && MediaRecorder.isTypeSupported(mimeType)) {
-                recorderOptions = { mimeType };
-            }
-    
-            mediaRecorderRef.current = new MediaRecorder(stream, recorderOptions);
-    
-            mediaRecorderRef.current.ondataavailable = (event: BlobEvent) => {
-                audioChunksRef.current.push(event.data);
-            };
-    
-            mediaRecorderRef.current.start();
-        } catch (err) {
-            console.error("Error accessing media devices:", err);
-        }
-    };
-    
+    useEffect(() => {
+        const processRecording = async () => {
+            if (recordedBlob) {
+                // Process the blob for transcription
+                const audioBuffer = await convertBlobToAudioBuffer(recordedBlob);
+                startListening(audioBuffer); // Start the transcription process
 
-    const stopRecording = async (): Promise<Blob> => {
-        return new Promise((resolve, reject) => {
-            const recorder = mediaRecorderRef.current;
-            if (recorder && recorder.state === "recording") {
-                recorder.onstop = () => {
-                    const audioBlob = new Blob(audioChunksRef.current, { 'type': recorder.mimeType });
-                    audioChunksRef.current = [];
-                    resolve(audioBlob);
-                };
-                recorder.stop();
-            } else {
-                reject(new Error("MediaRecorder is not recording"));
+                // Reset the blob state if you want to prepare for a new recording
+                setRecordedBlob(null);
             }
-        });
-    };
+        };
+
+        processRecording();
+    }, [recordedBlob, startListening]);
 
     const vad = useMicVAD({
         modelURL: "/_next/static/chunks/silero_vad.onnx",
         workletURL: "/_next/static/chunks/vad.worklet.bundle.min.js",
         startOnLoad: false,
-        onSpeechEnd: async (audio) => {
-            console.log('hello??')
-            if (isRecording) {
-                stopListening();
-                const recordedBlob = await stopRecording();
-                setAudioFromRecording(recordedBlob);
-                const audioBuffer = await convertBlobToAudioBuffer(recordedBlob);
-                startListening(audioBuffer);
-                setIsRecording(!isRecording);
+        onSpeechEnd: async () => {
+            if (recording) {
+                await stopRecording(); // Stop the recording
+                
+                console.log('input', input);
+    
+                setRecording(!recording); // Update the recording state
             }
         },
     });
 
+    const stopRecording = () => {
+        if (
+            mediaRecorderRef.current &&
+            mediaRecorderRef.current.state === "recording"
+        ) {
+            mediaRecorderRef.current.stop(); // set state to inactive
+            setDuration(0);
+            setRecording(false);
+            vad.pause();
+        }
+    };
 
-    const handleRecording = async () => {
-        if (isRecording) {
-            stopListening();
-            const recordedBlob = await stopRecording();
-            if (recordedBlob) {
-                setAudioFromRecording(recordedBlob);
-                const audioBuffer = await convertBlobToAudioBuffer(recordedBlob);
-                startListening(audioBuffer);
+    const startRecording = async () => {
+        // Reset recording (if any)
+        setRecordedBlob(null);
+        vad.start();
+
+        let startTime = Date.now();
+
+        try {
+            if (!streamRef.current) {
+                streamRef.current = await navigator.mediaDevices.getUserMedia({
+                    audio: true,
+                });
             }
-            cleanupRecording(); // Clean up resources after stopping recording
-        } else {
-            vad.toggle();
-            await startRecording();
+
+            const mimeType = getMimeType();
+            const mediaRecorder = new MediaRecorder(streamRef.current, {
+                mimeType,
+            });
+
+            mediaRecorderRef.current = mediaRecorder;
+
+            mediaRecorder.addEventListener("dataavailable", async (event) => {
+                if (event.data.size > 0) {
+                    chunksRef.current.push(event.data);
+                }
+                if (mediaRecorder.state === "inactive") {
+                    const duration = Date.now() - startTime;
+
+                    // Received a stop event
+                    let blob = new Blob(chunksRef.current, { type: mimeType });
+
+                    if (mimeType === "audio/webm") {
+                        blob = await webmFixDuration(blob, duration, blob.type);
+                    }
+
+                    setRecordedBlob(blob);
+
+                    chunksRef.current = [];
+                }
+            });
+            mediaRecorder.start();
+            setRecording(true);
+        } catch (error) {
+            console.error("Error accessing microphone:", error);
         }
-        setIsRecording(!isRecording);
     };
 
+    useEffect(() => {
+        let stream: MediaStream | null = null;
+
+        if (recording) {
+            const timer = setInterval(() => {
+                setDuration((prevDuration) => prevDuration + 1);
+            }, 1000);
+
+            return () => {
+                clearInterval(timer);
+            };
+        }
+
+        return () => {
+            if (stream) {
+                stream.getTracks().forEach((track) => track.stop());
+            }
+        };
+    }, [recording]);
+
+    const handleToggleRecording = () => {
+        if (recording) {
+            stopRecording();
+        } else {
+            startRecording();
+        }
+    };
 
     return (
         <div>
@@ -139,17 +184,16 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
                     placeholder="Speak or type..."
                 />
             </form>
-            <button onClick={handleRecording} className={styles.button}>
-                {isRecording ? <StopIcon /> : <MicIcon />}
-            </button>
+            <button
+                type='button'
+                className={styles.button}
+                onClick={handleToggleRecording}
+            >
+                {recording ? <StopIcon /> : <MicIcon />}
+            </button>          
         </div>
     );
 };
 
-const convertBlobToAudioBuffer = async (blob: Blob): Promise<AudioBuffer> => {
-    const audioContext = new AudioContext();
-    const arrayBuffer = await blob.arrayBuffer();
-    return await audioContext.decodeAudioData(arrayBuffer);
-};
 
 export default VoiceInputForm;