Audio not loading from CDN

I uploaded my files to my test server and the audio loaded and played without a problem, but after my client uploaded the same exact files to their server the audio files are not loading. When I look at the dev tools in Safari the radio file is listed in red and it says that “An error occurred when trying to load the resource”. If I input the url to that resource into the browser address field it will load and play in the browser fine.

What is the problem and how can I help my client fix it?

Are there any spaces or foreign characters in the audio filename? Some servers are smarter than others when it comes to allowing fancy characters (yes, in 2016 this still happens :frowning: )
Can you share a link to it if that’s not the case? (The Exported Hype document .html page)

Hi Daniel,

Here’s the link…
http://www.pbs.org/holiday/2016/

I think they’re having the issue only in Safari.

The resource file name is a mix of letters, numbers and underscores.

Thanks,
Bill

The domain has a CORS restriction which disallows XMLHTTPRequests (required by the Web Audio API used in Safari) to play the audio. To fix this specific issue, you would need to adjust the headers sent by the server.

An easier workaround is to use an earlier implementation of audio for the web that can bypass this restriction. Remove the audio element from Hype, and use a standard embed set to autoplay:

<audio id="holidayaudio" width="1" controls="" autoplay="" preload="auto">
        <source src="https://www-tc.pbs.org/holiday/2016/pbs_holiday_card_2016-C.hyperesources/END_END_0111_00101_Jingle_Bells__a__APM.mp3" type="audio/mpeg"></audio> 

This audio element needs to be embedded in a rectangle, and can be moved off scene.

Here’s more ways to control audio ( you would target the holidayaudio element ID set above in your case)

1 Like

Thanks Daniel for your quick response!

We’ll give this a try.

-Bill

Hi @Daniel Daniel! Sorry for re open this thread, but I’m having the same issue with a client. When i run the preview or exported version directly from the folder, all the sounds works fine.
But when i play with the server version i can’t hear any sound, just one that isn’t loaded as an element because is part of a html wigget.
This sounds are launched by actions of the user and the timelines, like clicking in buttons or elements. Here’s a screen capture of the console, can you give me a hand with this, please?

Thank you in advance!
Fabián

Hey Fabian,

I recommend making sure you have all available Hype updates (3.6.7 as of today) and re-exporting your document. There was an update to address the first issue you’re seeing.

As for the 404 errors, I’m not certain that is the same problem. Can you double check that they are actually uploaded to your site?

@Daniel Hey, thanks a lot for the quick reply. I will check again with the IT department about the files, maybe is something related to the name of the files.
Thanks for the tip about the update!

1 Like

Hi @Daniel, how are you?
I’m still having issues with the audio, it’s like the file doesn’t load on the server side…
I updated the app to the lastest version and changed the file names to a simpler ones. The weird thing is this only happens with audios loaded in the hype document, because I place a html widget that fires up an audio file and works perfectly. Do you know any other case like this one?

Thank you in advance

Hey Fabian, sorry to hear you’re still having issues.

What do you see in the browser’s developer console when loading the files?

Can you share a link?

Sure!
You can see it here:

https://www.educ.ar/recursos/132329/jugamos-con-las-digiaventuras

The browser console show this:

Cheers!

Hype is requesting the mp3 audio file with a ? at the end of the URL. This is done for cache manifest compatibility and is generally harmless, but looks like the CDN you are using doesn’t like the request in this form.

Manually making this request and removing the ? lets the resource be downloaded, but there’s not really a way to configure this in Hype.

If the CDN is configurable to allow query strings that may be the best workaround. Otherwise you could use a custom <audio> tag (referencing the audio via src="${resourcesFolderName}/mal.mp3) and play/pause yourself using JavaScript. There should be some tips on the forums for this approach.

I’ve filed this as a bug, but don’t yet know what the right fix would be since the reason Hype does this is already to workaround other issues!

Hi @jonathan Thnx a lot again. You always have the right answer!
I done the custom tag solution a few days ago and works like a charm. It’s a problem of the CDN and its politics.

Thanks a lot!

Have a nice week

Fabián.

1 Like

I’m glad you were able to get it working!

High browser and server compatibility is always a game of whack-a-mole; one fix is another system’s bug! Out of curiosity, what CDN are you using?

@jonathan I don’t have no idea, because. The IT department of my client is kinda wordless about this and don’t give me to much of info to the solve the problem from they side =S.

(no worries!)