Fix audio codec handling and enhance voice recorder functionality

[dozro]

Description

This pull request adds robust support for multiple audio codecs in the voice recording feature, ensuring that audio messages are recorded, stored, and transmitted with the appropriate codec and file extension based on browser support. It introduces a utility to detect supported codecs, updates the recording and file creation process to use the detected codec, and ensures that codec information is correctly propagated through the application. Additionally, the audio message content structure is enhanced for better compatibility with Matrix clients.

Audio codec detection and handling

• Added a new utility (supportedCodec.ts) to detect supported audio codecs in the browser and map codecs to the correct file extensions. This utility is now used throughout the voice recording flow to select the optimal codec and ensure files are named with the correct extension.
• The recording logic in useVoiceRecorder now always uses the detected supported codec for both the MediaRecorder and file creation, falling back gracefully if none are found.

Propagating codec information

• The VoiceRecorderStopPayload and related props now include the audioCodec field, and this information is passed up from the recorder to parent components, ensuring the codec type is available wherever the audio message is handled.

File naming and extension improvements

• Audio files are now named with the correct extension based on the codec (e.g., .ogg, .webm, .mp3, etc.) rather than defaulting to .ogg or .webm, improving compatibility and clarity for users and clients.

Matrix message content enhancements

• The audio message content structure (getAudioMsgContent) is updated to include more accurate metadata, improved fallback text, and additional Matrix extensible event keys for better compatibility with Element and other Matrix clients.

UI and minor improvements

• Minor UI adjustments, such as setting a fixed width for the audio recorder dialog, for improved consistency.

These changes together make the voice recording feature more robust, standards-compliant, and user-friendly across different browsers and Matrix clients.

Fixes #

Still not fixed: compatibiltiy with iOS webkit, macOS webkit works fine...

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings