Audio Block: Add live recording feature

[dhruvikpatel18]

Closes #38632

What?

Adds a live audio recording feature to the Audio Block, allowing users to record audio directly within the editor and automatically upload it to the media library.

Why?

This enhancement addresses the challenge of adding audio content to websites, especially on mobile devices. Currently, users need to pre-record audio using external apps and then upload files, which can be cumbersome and sometimes leads to compatibility issues. This feature streamlines the process by providing direct recording capabilities within the block editor.

How?

• Added a new AudioRecorder component with recording controls
• Implemented browser's MediaRecorder API for audio capture
• Integrated with WordPress media upload system
• Added recording status indicators and timer
• Implemented proper error handling for permissions and upload issues
• Supports both WebM and MP4 audio formats based on browser compatibility

Testing Instructions

1. Open the block editor and add an Audio Block
2. Look for the "Record Audio" button in the block placeholder
3. Click the button and accept microphone permissions when prompted
4. Record some audio (you should see a timer)
5. Click "Stop Recording"
6. Verify that the audio is uploaded to the media library
7. Verify that the recorded audio plays correctly in the block
8. Try replacing existing audio using the recording feature from the toolbar

Screenshots or screencast

Before

Screen.Recording.2025-02-13.at.3.07.33.PM.mov

After

Screen.Recording.2025-02-13.at.3.08.27.PM.mov

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dhruvikpatel18 <[email protected]>
Co-authored-by: mrfoxtalbot <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.