HTML5 audio issue: Multiple play audio

[R_H__]

Hello,

We have recently discovered an issue when publishing for HTML5, where audio does not playback from the beginning.

Using Captivate 9, if you have a page with multiple buttons on stage that each have a Play Audio action, you would expect each button when clicked to play the individual piece of audio from the start. This works as it should when the buttons are pressed for the first time. However, if you click on another button before your audio has finished and then selected the initial button again, rather than the audio file starting again from scratch, it resumes from the point at which you left it from the first time.

This issue only occurs when viewing a published HTML5 course. If you publish for SWF, or preview within Captivate, the buttons act as expected and play the audio from the start each time a button is pressed. We have also tested in multiple browsers, all with the same result.

Any ideas or workarounds on this?

Cheers,

Ross

[RodWard]

Do your actions on each of these buttons start with an action to Stop Triggered Audio BEFORE the action to Play Audio for their relevant clip?

[R_H__]

Hi RodWard,

Yes, all the actions contain the Stop Triggered Audio before, like so:

Cheers,

Ross

[Lilybiri]

Hi Rod,

Has this changed? There was no need to use Stop Triggered Audio before using Play Audio because that last command was automatically stopping any other audio that was started with Play Audio? Can you confirm that this behavior changed?

As for a workaround, except the JS approach, did you try an Audio object instead of the command? Audio Objects: Control them! - Captivate blog

[RodWard]

No I'm not aware of any changes to the way the command worked.

I was just offering a way to test whether that might have been the issue.

Dave's response seems to indicate the issue might be more related to the way audio is handled differently in HTML5 browsers on mobiles.

[TLCMediaDesign]

You could  execute this JavaScript:

var audio = new Audio('ar/s01p12_01.mp3');

audio.load();

audio.play();

Although the audio files would disappear when you re-publish. You would need to drop the audio file in the ar folder.

There are functions in the cp audio manager but I don't really have time to look that deeply into it right now.

The issue really stems from the fact that the audio file needs to be reloaded as the browser knows that the file has not reached the end, thus resumes.

[R_H__]

Thanks for the reply TLC.

It does seem to be an HTML5 browser issue, we have used this technique for years on our swf content and had no problems whatsoever.

I have tried your JavaScript suggestion as a starting point and it seems to work. The only problem now is that each audio file can be played at the same time over each other. Also, I can press the audio button 10 times and have 10 instances of it playing at once. At least it's a starting point...

[TLCMediaDesign]

The difference is that SWF uses Audio defined and executed in the Flash player. HTML5 audio is a completely different and is done in the Browser. Not sure exactly how Captivate uses that in conjunction with it's JavaScript.

I use HTML5 audio  quite frequently outside of Captivate and that is the way to get a file to restart as opposed to resuming and to stop files from playing at the same time..

[R_H__]

On further testing, the original issue applies to desktop browsers, audio continuing from where you left off.

I have also tested on multiple mobile devices and have a different experience (iPad, Samsung Tab, Android phone, Windows phone). Audio files here playback from the beginning as you would expect, but what seems to be completely random, "play audio" files now cut out at random times with no pattern at all.

I see other people have the same issues:

Triggered audio stops playing

[MayureshSaka]

Hi,

I faced same issue where the audio would not play on clicking the button on 2nd instance.

As mentioned above we can use javascript as example below

On Enter > Execute advance action > add javascript  (audio_x will be the vars)

audio_a= new Audio('ar/audio_01.mp3');

audio_a.load();

audio_b= new Audio('ar/audio_02.mp3');

audio_b.load();

audio_c= new Audio('ar/audio_03.mp3');

audio_c.load();

and in the action on buttons where you want to play the audio

(for 1st audio button)

if (audio_b) audio_b.pause();

if (audio_c) audio_c.pause();

audio_a.currentTime = 0;

audio_a.play();

Similarly add for remaining audio buttons, and after publishing add the audio files to - ar/ folder in the output folder.

[R_H__ · Accepted solution]

Hi all,

I've noticed that since the Captivate update to 9.0.2, this issue is no longer appearing, yey!

Ross