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]

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.