Audio player with preload="metadata" shows incorrect duration for audio files 1 hour or longer

[Dexterity]

For an audio file that's longer than one hour, using the audio player shortcode with preload="metadata" shows an incorrect duration for the audio when the page loads. The hours are chopped off. So an audio that is 1:07:45 in duration will erroneously display 07:45 upon loading.

Then when the audio file is played, the correct duration pops in, but this causes the volume control to disappear, so the volume can no longer be adjusted while the clip is playing.

Many podcasts are longer than an hour in duration.

For a demonstration of the bug, see audio 16 on this page, which is 1:07:45 in duration:
​http://www.stevepavlina.com/audio/

[bosbqy]

There are more users with this issue, see also (and more examples): ​https://wordpress.org/support/topic/wordpress-44-missing-volume-slider

[caercam]

Spent some time playing with this issue today, still happens with WordPress 4.8.1. First it seemed to be a known --and solved-- bug from MediaElement.js (See ​ticket and ​PR) so I tried overriding the shipped MediaElement version (2.22.0) with the fixed version (2.23.0), but after some fiddling I realized all that's needed for the duration to be displayed properly is the correct time format. Adding this snippet to my site did the job:

<?php
add_filter( 'mejs_settings', 'change_mejs_time_format' );
function change_mejs_time_format( $mejs_settings ) {

        $mejs_settings['timeFormat'] = 'hh:mm:ss';

        return $mejs_settings;
}

It's worth noting that changing the time format applies to all media, so you could end up with 10 second videos with a total time display "00:00:10". @Dexterity if you're OK with that side-effect you can fix your example site.

[Dexterity]

Replying to caercam:

add_filter( 'mejs_settings', 'change_mejs_time_format' );

Thanks a bunch! I added the code to my site, and it works nicely.

Just note that you have extra close paren in the add_filter line. I removed it in the quoted version above.

[caercam]

Post edited, thanks! Glad I could help :)