Highlighted

HTML5 Animation is not recognized on Web Server

Community Beginner ,
Apr 24, 2020

Copy link to clipboard

Copied

I'm using an HTML5 Aniimation object to execute code that plays audio files. This works fine in CP HTML5 Preview but once loaded to the server, there is no audio - as if the HTML5 Animation is not recognized, or accepted.

 

Are there restrictions around using HTML5 Animation, related, for instance, to secure sites?

How can I diagnose what's wrong?

 

The worst-case scenario is that I'll have to rethink how to handle hundreds of audio files acrross multiple projects.

 

Dave from TLC Design provided the original code and has been very helpful in getting me past some earlier issues. But if anyone else, as well, has ideas about what I should do, I'd be very grateful.

 

Charlie

Yes! It was all a text case issue.

 

Great catch sabre123!

 

This problem is solved!

TOPICS
Advanced, Audio and video

Views

824

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

HTML5 Animation is not recognized on Web Server

Community Beginner ,
Apr 24, 2020

Copy link to clipboard

Copied

I'm using an HTML5 Aniimation object to execute code that plays audio files. This works fine in CP HTML5 Preview but once loaded to the server, there is no audio - as if the HTML5 Animation is not recognized, or accepted.

 

Are there restrictions around using HTML5 Animation, related, for instance, to secure sites?

How can I diagnose what's wrong?

 

The worst-case scenario is that I'll have to rethink how to handle hundreds of audio files acrross multiple projects.

 

Dave from TLC Design provided the original code and has been very helpful in getting me past some earlier issues. But if anyone else, as well, has ideas about what I should do, I'd be very grateful.

 

Charlie

Yes! It was all a text case issue.

 

Great catch sabre123!

 

This problem is solved!

TOPICS
Advanced, Audio and video

Views

825

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 24, 2020 0
Community Beginner ,
Apr 25, 2020

Copy link to clipboard

Copied

Just to add an update...

I created a simple two-slide project and inserted the HTMP Animation. When I preview it, (HTML Preview), it works as designed, meaning that either of the two words selected, then play the associate sound.

 

When I publish to the web server, there is no sound.

 

I've tried this in Chrome (preferred), IE, and Firefox.

 

If anyone has ideas to offer about what may be wrong, or how to diagnose the issue, I'd be very grateful.

 

Thanks!

 

Charlie

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2020 0
Adobe Community Professional ,
Apr 25, 2020

Copy link to clipboard

Copied

An HTML5 animation inserted into a Captivate slide plays from inside an iframe in the HTML5 output.  My guess would be that your code needs to allow for the fact that the animation is not at the top level anymore, it's not the parent. 

 

There are also some restrictions on mobile devices that prevent having more than one audio file playing at the same time. So if you have voiceover audio on the same slide as the animation the parent audio might be blocking the audio from the animation.  Just a couple of possible reasons.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2020 1
Community Beginner ,
Apr 26, 2020

Copy link to clipboard

Copied

Rod, how do I check to ensure that the animation is at the top level - the parent? Is that within the HTML itself, that is inserted to Captivate? (Just to be clear, this HTML file is zipped along with the audio folder, and that zip is inserted as HTML5 Animation.)

Here's the code:

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
var wp = window.parent;
var aud = null;

function getAudio()
{
aud = document.getElementById( 'myAudio' );
}

/*
// Var change emitter - works fine   
wp.cpAPIEventEmitter.addEventListener( 'CPAPI_VARIABLEVALUECHANGED', function ()
{
playAudio( wp.window.v_sw2 ); }, 'v_sw2'
);
*/

// Var change emitter 
wp.cpAPIEventEmitter.addEventListener( 'CPAPI_VARIABLEVALUECHANGED', function ()
{
playAudio( wp.window.v_sw ); }, 'v_sw'
);  

    
function playAudio( which )
{ 
aud.src='_audio/' + which + '.wav';
aud.load()
aud.play();
}
 
    
</script>
</head>

<body onLoad="getAudio()">
<audio id='myAudio' src='' preload='none'></audio>
</body>
</html>

 Or, does other code need to be updated?

 

Thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2020 0
Community Beginner ,
Apr 26, 2020

Copy link to clipboard

Copied

Also, just realized I could see what is wrong (sort of) in the browser console:

VM32:532 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
a.AudioManager @ VM32:532

DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

DevTools failed to load SourceMap: Could not load content for chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/sourcemaps/onloadwff.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

DevTools failed to load SourceMap: Could not load content for chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/sourcemaps/onloadwff.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
wor/wo_6717/_audio/likes.wav:1 

GET https://bitsofwisdomforall.com/Test_PlayAudio13/wor/wo_6717/_audio/likes.wav net::ERR_ABORTED 404 (Not Found)     
playaudio_simple-01.html:1 

Uncaught (in promise) DOMException: Failed to load because no supported source was found.
playaudio_simple-01.html:32 

Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. https://goo.gl/LdLk22
playAudio @ playaudio_simple-01.html:32
(anonymous) @ playaudio_simple-01.html:26
cp.EventEmitterClass.trigger @ VM32:1019
fireEvent @ VM32:438
window.svvi @ VM32:476
setv_sw @ VM124:1
eval @ VM3747:1
executeAction @ VM32:964
b.clickSuccessHandler @ VM32:889
b.clickHandler @ VM32:888
b.ch @ VM32:888
f @ VM32:255
a.handleClickExternal @ VM32:258
a.handleClick @ VM32:259
wor/wo_6717/_audio/likes.wav:1 

GET https://bitsofwisdomforall.com/Test_PlayAudio13/wor/wo_6717/_audio/likes.wav net::ERR_ABORTED 404 (Not Found)
playaudio_simple-01.html:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

 To the extent that I understand what this is saying, it seems that the animation is not found, and the audio components are not there, either. Of course, I can clearly see that all the necessary, and correct elemnts are loaded on the server. Perhaps there is a timeing issue - maybe something needs to load but is interrupted?

 

Any insight would be most appreciated.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2020 0
Contributor ,
Apr 26, 2020

Copy link to clipboard

Copied

Take a close look at what your code is calling versus the files on the server:

 

This plays:

https://bitsofwisdomforall.com/Test_PlayAudio13/wor/wo_6717/_audio/LIKES.wav  

 

This does not play (because it's not found):

https://bitsofwisdomforall.com/Test_PlayAudio13/wor/wo_6717/_audio/likes.wav 

 

The Console errors show you what the code is calling, and it's looking for lowercase file names. Try changing your file names to lowercase to see if it fixes the issues. You may or may not need to dump your cache.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2020 0
Community Beginner ,
Apr 26, 2020

Copy link to clipboard

Copied

Yes! It was all a text case issue.

 

Great catch sabre123!

 

This problem is solved!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2020 0