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