WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 2 months ago

#36374 new defect (bug)

Audio playback fails on iOS 9.x

Reported by: Clorith Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 4.4.2
Component: External Libraries Keywords:
Focuses: javascript Cc:

Description

When using using audio files on an iOS device with version 9.x the file will buffer in its entirety, and then try to play the first half a second of the file before resetting the playback position and stopping.

This does not happen on iOS versions on the 8.x branch or earlier it would appear.

I've only tested with 4.5-RC and 4.4.2 for now, but both are behaving in the same manner.

Now the question is, is this an iOS bug causing it, or are we doing something in wp-mediaelements.js that iOS does not like any more?

PCs, Macs and Android devices still play the files as expected.

This comes from tracking https://wordpress.org/support/topic/my-mp3-audio-files-get-cut-off-on-mobile-devices-but-work-on-pcs which also includes example media URLs that can be used (and are the ones I used in testing)

Change History (23)

#1 @dougaitken
2 years ago

Using the URL from the forum post, I have tested this on iOS 9.3 with Safari, Chrome, Firefox. Both Chrome and Firefox play the file in it's entirety, however Safari has the bug as @Clorith describes.

This ticket was mentioned in Slack in #core by doug. View the logs.


2 years ago

#3 @nickgermaine
2 years ago

Steps to reproduce? Just embed an audio file (mp3?) into a wordpress post?

#4 @Clorith
2 years ago

  • Component changed from Media to External Libraries

@nickgermaine Yup, paste in, view it on the front end.

Seems this is related to our mediaelement.js, we're a few versions behind (trunk is on 2.18.1, latest stable is 2.20.0).

Moving the ticket over to the external libraries component as this seems to have been solved in more recent versions of mediaelement.js

#5 @nickgermaine
2 years ago

I'm testing a media elements update right now, maybe have a patch in a few minutes.

#6 @nickgermaine
2 years ago

Media elements (http://mediaelementjs.com/) seems to work on ios devices (?), but media elements in wordpress does not. Hammering away trying to get this updated.

#7 @nickgermaine
2 years ago

I'm not familiar enough with media elements. It's much larger than I anticipated, so I won't be able to do anything on this one.

#8 @a4jp.com
2 years ago

Thank you everyone for looking at this problem. I'm making a free study site and have had this problem for months but couldn't figure out why the sounds were getting cut off. I'm so glad I found out it was only a problem on iOS devices. If you need someone to test code I can load any patches onto my site. Sorry I don't have a pre iOS 9 device though. I have an iPhone with iOS 9.3 and an iPod with iOS 9.2.1.

This problem also occurs when using SoundManager 2 (http://www.schillmania.com/projects/soundmanager2/). I'll test the updated files tonight to see if this has been fixed though.

#9 @a4jp.com
2 years ago

I went to the http://mediaelementjs.com/ page and their sample worked on my iPhone.

I hope version 2.20.0 can be added soon as it looks like it fixes everything.

#10 @mikeschroder
2 years ago

  • Milestone changed from Awaiting Review to Future Release

@azaozz @ocean90 Thoughts on whether this should/can be done at this stage?

#11 @azaozz
2 years ago

Updating ME in RC2? There are some tweaks for it in core. As far as I remember we've had problems updating it in the past. Not sure we can manage to fully test it in time for 4.5.

#12 @a4jp.com
2 years ago

I work from home and can test anything made even if it is a patch that is separate from 4.5.

It would of course be nice to have this in 4.5 as sounds can't be played properly on any iOS device without getting cut off which is kind of a big problem but anything that works is okay.

#13 @Clorith
2 years ago

It's definitely too late for 4.5 I'd say, I also seem to recall there being core specific tweaks involved, possibly an idea for a 4.6-early or a 4.5.1 though.

#14 @a4jp.com
2 years ago

Is there any chance of a patch in the meantime, or a plugin that uses the newer version of the mediaelement file?

I wish WordPress could be updated bit by bit instead of in large packaged chunks.

Kind of like on Github.

Any chances of something like that happening later on?

Last edited 2 years ago by a4jp.com (previous) (diff)

#15 @dougaitken
2 years ago

@a4jp.com - mp3 files can be played on iOS, as detailed in my initial comment, it's just Safari that has the issue.

#16 @a4jp.com
2 years ago

@dougaitken I understand that. Thank you for the message.

I'm just worried about people not being able to play sound files from my website on any iOS 9 devices. Chrome, Safari, Mercury, and a few other browsers all had the same problem when I checked on my iPhone.

If iPhones weren't so popular I wouldn't worry so much but as ComScore reported 41.3 percent of the smartphone market uses iPhones. I hope this case can be moved from normal to a major or critical severity if possible.

#17 @jorbin
2 years ago

I think this is worth looking at 4.6 early

In the meantime, if someone wants to work on this, they can create a plugin that deregisters the core mediaelement js scripts and registers the newer version. If that works, and none of the other JS files need to be changed, and none of the API changed, I think we can consider it for 4.5.1.

#18 @dougaitken
2 years ago

@a4jp.com If you have tested on iOS devices using Chrome or Mercury, can you post details of which browser, the browser version number, and iOS version number (Settings - General - About - Version) as this will help the developers focus on the bug.

I tested previously with Chrome and Firefox on iOS 9.3 and there are no issues playing mp3s from those combinations. However i have just updated to iOS 9.3.1, Chrome played the file on 2nd attempt, Firefox only managed 2 seconds of the 4 seconds and Safari managed a second. [EDIT - Firefox incognito had an issue but Firefox normal played full file first try]

Have you changed the file? Now it says "Testing, testing, 1,2,3" where previously when I played it, it said "Welcome to A Great Dream" or similar.

Thanks.

Last edited 2 years ago by dougaitken (previous) (diff)

#19 @mikeschroder
2 years ago

While I don't like the idea of shipping 4.5 with this broken on iOS, based on feedback (and due to the bug not being a regression), thinking 4.5.1 at the earliest.

#20 @a4jp.com
2 years ago

iOS 9.3.1 (13E238) iPhone 6 model MG4A2J/A

http://agreatdream.com/free-study/ Wordpress 4.5-RC1-37153 or http://igym.jp/test/ WordPress 4.4.2

first audio file "Welcome to AGREATDREAM.COM"

[audio src="http://agreatdream.com/quiz/audio/test4.mp3" preload="none"]

Bit rate: 128kbps CBR Length: 2.808 seconds Sample rate: 48000 Hz Stereo Bit depth: 32-bit (float) Made with Adobe Audition CS6

Browsers tested on: Safari Apollo version 2.8 Web Capture iLunascape version 7.0.1 (3248) Opera Mini version 13.0.1.100754 Chrome Puffin Version 4.7.3 (14551)


iOS 9.2.1 (13D15) iPod model ND724J/A iPad Air 2 in shop iPad Pro in shop

Last edited 2 years ago by a4jp.com (previous) (diff)

#21 @a4jp.com
2 years ago

I think I might have found the problem with iOS 9 update.

I emptied my htaccess file and uploaded a blank file to my server as a test.

Of course this gave an error stating I needed a newer version of PHP but I went to the server settings and updates the PHP version of the server space to PHP 7.0.3.

After that, it added this info to the file automatically.

suPHP_ConfigPath /home/a4jp/agreatdream.com/xserver_php/
AddHandler fcgid-script .php .phps
FCGIWrapper "/home/a4jp/agreatdream.com/xserver_php/php-cgi" .php
FCGIWrapper "/home/a4jp/agreatdream.com/xserver_php/php-cgi" .phps

I got the sounds playing perfectly on test page on my server (http://agreatdream.com/quiz34test.php) then I went to (http://agreatdream.com/free-study/) but there was a 404 error so I added a few extra lines of code to the htaccess file from the old file.

suPHP_ConfigPath /home/a4jp/agreatdream.com/xserver_php/
AddHandler fcgid-script .php .phps
FCGIWrapper "/home/a4jp/agreatdream.com/xserver_php/php-cgi" .php
FCGIWrapper "/home/a4jp/agreatdream.com/xserver_php/php-cgi" .phps

#access plus 2 hours before - above
# BEGIN WordPress

# BEGIN Math Captcha
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post.php*
RewriteCond %{HTTP_REFERER} !.*agreatdream.com.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]
</IfModule>
# END Math Captcha

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

After doing this with a refresh, I got Worpress working again. No more 404 errors.

That means that something in the old htaccess file was causing the problem on iOS devices with WordPress.

I don't know who made the original file but want to find out the best optimizations for the old file if possible.

suPHP_ConfigPath /home/a4jp/agreatdream.com/xserver_php/
#Expire Header
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header unset ETag
FileETag None
ExpiresDefault "access plus 1 day"
</FilesMatch>
#access plus 2 hours before - above
# BEGIN WordPress

# BEGIN Math Captcha
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post.php*
RewriteCond %{HTTP_REFERER} !.*agreatdream.com.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]
</IfModule>
# END Math Captcha

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>
# BEGIN WP Performance Score Booster Settings

## BEGIN Enable GZIP Compression ##
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml
SetOutputFilter DEFLATE
</IfModule>
## END Enable GZIP Compression ##


## BEGIN Vary: Accept-Encoding Header ##
<IfModule mod_headers.c>
<FilesMatch "\.(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
## END Vary: Accept-Encoding Header ##


## BEGIN Expires Caching (Leverage Browser Caching) ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 2 week"
ExpiresByType image/jpeg "access 2 week"
ExpiresByType image/gif "access 2 week"
ExpiresByType image/png "access 2 week"
ExpiresByType text/css "access 2 week"
ExpiresByType application/pdf "access 2 week"
ExpiresByType text/x-javascript "access 2 week"
ExpiresByType application/x-shockwave-flash "access 2 week"
ExpiresByType image/x-icon "access 2 week"
ExpiresDefault "access 2 week"
</IfModule>
## END Expires Caching (Leverage Browser Caching) ##

# END WP Performance Score Booster Settings
SetEnvIf Request_URI ".*" AllowCountry
AddHandler fcgid-script .php .phps
FCGIWrapper "/home/a4jp/agreatdream.com/xserver_php/php-cgi" .php
FCGIWrapper "/home/a4jp/agreatdream.com/xserver_php/php-cgi" .phps

I'm so glad I found this fix and I hope the lines of code that screw up the audio playback on WordPress sites on Apple products but not PCs or Android devices can still be figured out though.

It would also be great to have info on the best optimizations in the htaccess file for WordPress.

#22 in reply to: ↑ description @mtamony
2 years ago

Sorry to barge in but this is happening on Android too. Android 6 and an LG G4. The track will play, then stop in random spots, then reset to beginning. I've tried mp3 plugins, wireless connection, data connection, etc. I've changed to 2016 Theme, disabled plugins, and the behavior is the same.

http://www.thelegionofdecency.com/wp-content/uploads/2016/06/Man-Down-River.mp3 http://www.thelegionofdecency.com/demo-tracks

Last edited 2 years ago by mtamony (previous) (diff)

#23 @pauljacobson
2 months ago

A related issue arose recently that I initially reported on GitHub here: https://github.com/wordpress-mobile/WordPress-iOS/issues/9001

Expected behavior

Embedded audio should play back correctly, without skipping, and restarting.

Actual behavior

mp3 audio files embedded using the [audio] shortcode are playing intermittently on iOS devices running iOS version 11.2.6 (and older). The audio player is loaded in mobile Safari on these devices. See 1043002-zen for more context.

User also reports that this issue occurs on new iOS devices running the current version of iOS.

Steps to reproduce the behavior

Tested various audio clips on the same page. Audio clips are uploaded to the Media Library and embedded using the [audio] shortcode. Embeds are formatted like this:

[audio src="https://username.files.wordpress.com/2015/10/filename.mp3"][/audio]

The site is set to Private. Site privacy doesn't appear to have affected playback.

Tested on iPad, iOS 11.2.6

The site is running on WordPress.com, using the Dara theme.

Note: See TracTickets for help on using tickets.