Missing src attribute on <audio> tag prevents m4a audio files playing in safari.

[ericmulder]

We have discovered an issue where the audio shortcode doesn't work in safari. When you add a m4a file to the shortcode, and you don't use the wp-mediaelement library the <audio> tag is created without a src element. ​Safari expect a src element, and if we add one the m4a audio tag works.

We have patched this with a filter, but I think it would be better to fix this in the core.

I see that on wp-includes/media.php:3067 $html_atts are set, but no 'src' attribute is present. Shall I create a pull request for this?

Our patch:

function peek_audio_shortcode($html, $atts, $audio, $post_id, $library) {
    // check if the <audio> tag has a src attribute (use a preg match <audio src="" >). If not, get the first <source> tag
    if (!preg_match('/<audio[^>]*src\s*=\s*"[^"]*"[^>]*>/', $html)) {
        // get the first source tag
        preg_match('/<source[^>]*src\s*=\s*"([^"]*)"[^>]*>/', $html, $matches);
        $src = $matches[1];
        // now add the src="" to the audio tag
        $html = preg_replace('/<audio/', '<audio src="' . $src . '"', $html);
    }
    return $html;
}
add_filter('wp_audio_shortcode', 'peek_audio_shortcode', 10, 5);

Add the src attribute in an <audio> tag as required by safari.

Trac ticket: https://core.trac.wordpress.org/ticket/61398

[mai21]

@ericmulder Thanks for reporting the issue.

Reproduction Report

Description

The issue is reproducible using BrowserStack Sonoma Safari 17.3 (The m4a is displayed and not working)

Environment

• WordPress: 6.6-beta2-58396
• PHP: 8.3.6
• Server: nginx/1.24.0
• Database: mysqli (Server: 10.6.16-MariaDB-0ubuntu0.22.04.1-log / Client: mysqlnd 8.3.6)
• Browser: Sonoma on Browserstack, Safari 17.3 latest
• OS: Linux
• Theme: Twenty Eleven 4.6
• MU Plugins: None activated
• Plugins:
  • Code Snippets 3.6.5.1
  • Test Reports 1.1.0
  • WordPress Beta Tester 3.5.5

Steps to Reproduce

1. Create a page with m4a shortcode i.e

   [audio src="http://domain/wp-content/uploads/2024/06/sample1.m4a"]
   

2. Use a code snippet plugin to activate this code in additional note
3. Visit the page on chrome and play the audio => audio is working
4. Visit the page on Safari and play the audio

Actual Results

24. 🐞 Audio isn't working

Expected Results

1. ✅ Audio is working as it does on Chrome

Additional Notes

• To be able to reproduce, we need to make sure that no media files are in the source. We may need this code snippet to disable it. (thanks to @Boniu91 for the snippet)

//Dequeue Styles
function project_dequeue_unnecessary_styles() {
    wp_dequeue_style( 'wp-mediaelement' );
    wp_deregister_style( 'wp-mediaelement' );
}
add_action( 'wp_print_styles', 'project_dequeue_unnecessary_styles' );

//Dequeue JavaScripts
function project_dequeue_unnecessary_scripts() {
    wp_dequeue_script( 'wp-mediaelement' );
    wp_deregister_script( 'wp-mediaelement' );
}
add_action( 'wp_print_scripts', 'project_dequeue_unnecessary_scripts' );

[mai21]

Test Report

Description

This report validates that the indicated patch works as expected.

Patch tested: Adding patch code in code snippet

function peek_audio_shortcode($html, $atts, $audio, $post_id, $library) {
    // check if the <audio> tag has a src attribute (use a preg match <audio src="" >). If not, get the first <source> tag
    if (!preg_match('/<audio[^>]*src\s*=\s*"[^"]*"[^>]*>/', $html)) {
        // get the first source tag
        preg_match('/<source[^>]*src\s*=\s*"([^"]*)"[^>]*>/', $html, $matches);
        $src = $matches[1];
        // now add the src="" to the audio tag
        $html = preg_replace('/<audio/', '<audio src="' . $src . '"', $html);
    }
    return $html;
}
add_filter('wp_audio_shortcode', 'peek_audio_shortcode', 10, 5);

Environment

• WordPress: 6.6-beta2-58396
• PHP: 8.3.6
• Server: nginx/1.24.0
• Database: mysqli (Server: 10.6.16-MariaDB-0ubuntu0.22.04.1-log / Client: mysqlnd 8.3.6)
• Browser: Chrome 125.0.0.0
• OS: Linux
• Theme: Twenty Eleven 4.6
• MU Plugins: None activated
• Plugins:
  • Code Snippets 3.6.5.1
  • Test Reports 1.1.0
  • WordPress Beta Tester 3.5.5

Actual Results

1. ✅ Issue resolved with patch => m4a is working either added by media or shortcode

Additional Notes

• Tested on Chrome, Safari, Firefox and Opera

[ericmulder]

Thank you very much for validating and reproducing the bug. To clarify, when you use the wp-mediaelement packages the problem doesn't occur since that js package adds the src element to the <audio> tag. We found the issue using an in-app browser in our app on iOS (which apparently doesn't load the wp-mediaelement)

Good to see that the patch works, please take into account this is a hotfix from our side to not tinker with the WP core code and use a filter. I believe the pull request will be the permanent fix for this issue: ​https://github.com/WordPress/wordpress-develop/pull/6755