Audio: Show notice when inserting a non-audio URL in the Audio block

[im3dabasia]

Closes: #32456

What?

This PR adds a validation check when a URL is inserted into the Audio block. If the URL is not a valid audio file, a warning notice is displayed, informing the user that the file is not supported.

Why?

• Currently, when a non-audio URL is inserted into the Audio block, the block is added but does not play, leaving users without any feedback.
• This improvement ensures better user experience by providing an immediate error message when an invalid file is selected.

How?

• Introduced a isValidAudioFile() function that verifies whether a given URL points to a playable audio file.
• Modified onSelectURL() to check the validity of the URL before setting it in the block.
• If the URL is not an audio file, a createErrorNotice() snackbar is displayed with an appropriate message.

Efficient Audio Validation

• Used Audio() with preload="metadata" instead of the default auto to prevent unnecessary download.
• oncanplay fires as soon as metadata is available, ensuring a quick check, unlike oncanplaythrough, which buffers more data.
• Observed valid URLs load metadata instantly, with Chrome limiting downloads to prevent full file retrieval unless necessary.
• Observed Invalid URLs take slightly longer, as the browser must fully resolve the request before triggering onerror.

Testing Instructions

1. Open a post or page in the block editor.
2. Add an Audio block.
3. Insert a valid audio URL (e.g., .mp3 or .wav).
   • The audio should load and be playable.
4. Insert a non-audio URL (e.g., a link to an image or a random webpage).
   • A warning notice should appear: "The selected URL is not a valid audio file."
   • The block should not attempt to load or play the invalid file.

Screencast

Screen.Recording.2025-02-13.at.5.53.26.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: im3dabasia <[email protected]>
Co-authored-by: hypest <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: swissspidy <[email protected]>
Co-authored-by: geriux <[email protected]>

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