Opened 5 weeks ago
Last modified 2 weeks ago
#61398 accepted defect (bug)
Missing src attribute on <audio> tag prevents m4a audio files playing in safari.
Reported by: | ericmulder | Owned by: | joedolson |
---|---|---|---|
Milestone: | 6.7 | Priority: | normal |
Severity: | normal | Version: | trunk |
Component: | Media | Keywords: | has-patch |
Focuses: | Cc: |
Description
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);
Change History (7)
This ticket was mentioned in PR #6755 on WordPress/wordpress-develop by @ericmulder.
5 weeks ago
#1
- Keywords has-patch added
This ticket was mentioned in Slack in #core-test by mai21. View the logs.
4 weeks ago
#4
@
4 weeks ago
@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
- Create a page with m4a shortcode i.e
[audio src="http://domain/wp-content/uploads/2024/06/sample1.m4a"]
- Use a code snippet plugin to activate this code in additional note
- Visit the page on chrome and play the audio => audio is working
- Visit the page on Safari and play the audio
- 🐞 Audio isn't working
Expected Results
- ✅ 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' );
#5
@
4 weeks ago
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
- ✅ Issue resolved with patch => m4a is working either added by media or shortcode
Additional Notes
- Tested on Chrome, Safari, Firefox and Opera
#6
@
4 weeks ago
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
Add the src attribute in an <audio> tag as required by safari.
Trac ticket: https://core.trac.wordpress.org/ticket/61398