Skip to main content
C
charliem82825372
Inspiring
April 24, 2020
Answered

HTML5 Animation is not recognized on Web Server

  • April 24, 2020
  • 1 reply
  • 2536 views

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

This topic has been closed for replies.
Correct answer charliem82825372

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.


Yes! It was all a text case issue.

 

Great catch sabre123!

 

This problem is solved!

1 reply

C
charliem82825372Author
Inspiring
April 25, 2020

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

RodWard
Community Expert
RodWardCommunity Expert
Community Expert
April 26, 2020

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.

    C
    charliem82825372Author
    Inspiring
    April 26, 2020

    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!

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices