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!
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
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.
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!
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.
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.
Copy link to clipboard
Copied
Yes! It was all a text case issue.
Great catch sabre123!
This problem is solved!