[Pink ZParticipant]

I have run into a major road block using The Grid on Chrome browsers and its ability to stream HTML 5 audio.

Here’s my work-in-progress page: http://pinkzebramusic.com/music

This music portfolio page works perfectly with Firefox and Safari, but with Chrome many of the files simply don’t load and the audio doesn’t play back on all but 5 items. I have tested it on a Mac Pro, Mac Mini, and MacBook and they are all the same with Chrome: only a handful of audio tracks play correctly and they are always the same ones.

I have attached screens showing which posts/audio tracks work and which ones don’t load. On my main computer, all of the images at least show up (maybe they are cached in the browser?) but when I tested it on our family computer, the only images that loaded were the ones with audio files which play back correctly.

My plan was to have hundreds of posts/audio tracks load, but if Chrome fails with more than 5 I’m sunk.

Any thoughts on this Chrome issue? I’ve also confirmed problems on PC Chrome from 2 other sources.

I read somewhere about Chrome not liking mp3s of higher quality than 160 kbps. Originally I had them at 320 kbps, but switching to 160 made no difference.

When I set up The Grid to only load 5 at a time, Chrome works fine. But I can’t have the page function with only loading 5 at a time.

[LelyModerator]

Hello Pink,

Thanks for posting in and giving us screenshots. This might be performance issue. Some other audio is not working right away because it is still loading. You may want to use CDN serve those audio. Please check this:https://community.theme.co/kb/performance/. I’ve checked the page using Chrome. Most of the audio is working if I waited long enough for the audio to stream or load.

Hope this helps.

[Pink ZParticipant]

I found this on a stackoverflow forum:

This problem occurs because Chrome allows up to 6 open connections by default. So, for example, if you’re streaming multiple media files simultaneously from 6 <video> or <audio> tags, the 7th connection (for example, an image) will just hang, until one of the sockets opens up. Usually, an open connection will close after 5 minutes of inactivity, and that’s why you’re seeing your pngs finally loading at that point.

You can avoid this by minimizing the number of media tags that keep an open connection. And if you need to have more than 6, make sure that you load them last, or that they don’t have attributes like preload=”auto”.

Does that explain it possibly? How can I make sure I don’t have any attributes like preload=”auto”? Or how do I load them last?

[RadModerator]

Hi there,

It’s true, but other browsers are more limited than chrome,

Firefox 2: 2
Firefox 3+: 6
Opera 9.26: 4
Opera 12: 6
Safari 3: 4
Safari 5: 6
IE 7: 2
IE 8: 6
IE 10: 8
Chrome: 6

But they do load images and other resources fine. Connection limit doesn’t mean it will stop working when it reached the limit, it just means when it’s finished with first 6 connection, it will then start another batch of 6 connections to continue loading the site until it’s finished. WordPress itself has more than 6 resources to load, hence, more than 6 connections needed even without images or media. It may take a while to load them all, but it shouldn’t stop.

I checked your site and it loads for the first time, but not on the second try. It’s just stuck on “Processing request” on the status bar of any browser. Could it be that your site or hosting has security or firewall setting that limit connections? If that’s the case, then it will really stop working after few connections.

I also checked your media connections using Google Chromes’s developer tool and there is no pre-loading. It’s just 6 audio that is not playing. As suggested, you can host your audio files with any CDN hosting to reduce the loading time of your site. Connection limit is per site, hence, the same limit won’t apply to CDN.

Thanks.

[Pink ZParticipant]

Okay, I’ve made some more discoveries. When I sort my grid according to date (newest first), I can see that The Grid in Chrome is loading the full mp3 audio files into each grid item in chronological order.

If I try to play the different tracks in chronological order I can see it happening, the audio player shows which files have yet to load and which ones are in progress. It happens in the order of the dates of my posts. If I jump ahead in the grid too far I can see those haven’t loaded yet. This doesn’t happen in Firefox or Safari, in those browsers the audio streams properly and the players do not preload the full audio file.

If the audio player within The Grid was truly preload=”none”, then this wouldn’t be happening on Chrome, right?

When I go to my individual posts, I can see the preload=”none” in the code when I inspect it. I can’t see preload=”none” anywhere in the code on The Grid page.

For each of my posts I have indicated within The Grid field audio tab the specified MP3 file URL. See image.

Is this where the problem is? There is no way to tell this specific Grid audio file not to preload. But if I don’t indicate an MP3 file here, The Grid doesn’t allow me to play the audio file from my post. In the “General” tab within this Grid form for the individual post I have Alternative Media set to “Default”, since my posts are all classified as “Audio” already. I tried switching Alternative Media to “Audio” but it didn’t work.

Is there some line of code I can add in The Grid’s global CSS that will force its audio player to preload=”none”? That seems like it could be a solution to me.

Thanks for your help!

[RadModerator]

Hi there,

I’m not getting any of that, there is no playing or preloading on my end. But yes, there is no preload=none option in The Grid.

Would you mind providing a screen recording of this issue? I’m not even getting what you have on your screenshots.

I can’t really reproduce it from my end, and here is video. And the same thing happened again, it loads perfectly on the first try. Then it stops loading when I refreshed your site. Like a firewall blocking me. Then after waiting, it loads again and so on over and over.

Thanks!

[Pink ZParticipant]

Thanks for your patience with helping me. Here is a screen recording of the issue on Chrome.
https://www.dropbox.com/sh/wbp5nu5exk20hdt/AAD7ErYWJwy1WWX3uf6a7q7va?dl=0

You can see that the first row and a half or so of the grid loads the audio file right away (the posts are listed in chronological order within The Grid). As I move ahead in the grid I can outpace the loading progression and get to where the audio files are waiting in a queue to be loaded in order.

After all the files are loaded, you can see that as I skip back up and play any track in the grid, the mp3 files are completely loaded. I’m not streaming them. They were all preloaded in order regardless of the order I clicked on them.

This is only an issue that I have with Chrome. On Firefox and Safari, every audio file is immediately playable as I jump around the grid, and in those browsers the audio files are only loaded when I click on the items.

[RadModerator]

Hi there,

Thanks for the video and clarification. You wish to disable the preloading right? I thought it was still related to provided screenshots and connection limitations.

Please add this code to Admin > Appearance > Customizer > Custom > Global Javascript

jQuery ( function($) {

function no_preload () {

setTimeout( function() {

     $('audio').prop('preload','none');

}, 300 );

}

no_preload();
$( window ).load ( no_preload );
$( document ).ready ( no_preload );

} );

This will set the preload to none for all audio automatically.

Thanks.

[Pink ZParticipant]

Thank you. I tried this code and unfortunately the results are still the same. Chrome is still preloading all the audio files in chronological order according to the post dates.

Any other suggestions to convince Chrome not to preload any audio files?

[RadModerator]

Hi there,

The provided code is not implemented, I can’t find it from your site’s source code. Audio elements still doesn’t have the preload property set by the code above. I like to see its effect, please add it and we’ll check it.

Or you can provide your admin login credentials in private reply and I’ll test it out.

Thanks!

[Pink ZParticipant]

This reply has been marked as private.

[JackKeymaster]

Hi there,

Thanks for writing back! I’ve just tried to check this for you. But get a “Not Available” error on your log-in page (screenshot attached).

Please advise, thanks!

[Pink ZParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Fixed it, please check 🙂

The preload-none property is now in effect.

Thanks!

[Pink ZParticipant]

Thanks very much for going to the effort to make sure preload was set to “none” for the audio player. Unfortunately I tested it out on a Mac with Chrome and it still functioned the same way: all audio files automatically loaded fully in chronological order and I couldn’t play an audio track until it had reached its loading point in the queue.

I’ll do some more testing.

[Author]

Posts