Inspiring

Answered

Selecting and playing audio with javascript

Forum|Forum|9 years ago
July 13, 2016
4 replies
5073 views

My projects has several hundred different short audio files (in my library) that play depending on the value of a single variable. So I think I should use Javascript to set the conditions and play the right audio. I just can't find the interface for this.

Could someone give an example of this javascript for Captivate?

For ex. If v_Choice = 1, then play "audioX.mp3".

Thank you..

This topic has been closed for replies.

Correct answer TLCMediaDesign

This code will play an audio file based on the value of v_Choice.

The audio files are in a folder named "_audio" and the audio file names are audio1.mp3, audio2.mp3, etc.

Zip the html file and the _audio folder together and insert as an html5 animation.

<!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' );
}

wp.cpAPIEventEmitter.addEventListener( 'CPAPI_VARIABLEVALUECHANGED', function ()
{
playAudio( wp.window.v_Choice ); }, 'v_Choice'
);

function playAudio( which )
{
aud.src = '_audio/audio'+ which +'.mp3';
aud.load()
aud.play();
}

</script>
</head>

S

Shadetree Sam

Participating Frequently

I found a good explanation and implementation of Sound JS here.

S

Shadetree Sam

Participating Frequently

That is, if you're still looking. The answers above are fine, too, but this is a link to a full reference on the Sound JS module, and the coding examples seemed quite clear and well documented to me.

C

charliem82825372

Inspiring

Hello:

This elegant solution from TLCMediaDesign from several years ago precisely addresses a challenge I have playing audio files. However, being a javascript novice, I'm not sure how to implement this. What would this code look like if all the HTML syntax was removed and it was just left with pure js code, along with the cP API parts?

I'd like to pop such code into source windows within cP, with the understanding that to audio files would still need to reside in the ar folder of the publisched ouput.

I've tried testing versions of the code myself but an not geting results.

Any guidance would be most appreciated.

Thanks!

Stagprime2687219

Legend

The real problem is that Captivate renames the audio files that you bring into the library to some random number (or maybe not so random - not sure) for some reason that is unknown to me.

Now - I realize this is not the real answer to your question but if you have a small number of audio files, it might be worth the time.

Suppose I have a button that I want to use JavaScript to play an audio file.

1. Go ahead and upload your audio file to the library. Let's say it is named test.mp3

2. Publish your project to the computer and then look in the ar folder

3. Perhaps you'll find a file in there called 5472.mp3

4. Delete your published folder

5. Open your project and have your button set to Execute JavaScript on Success

6. This would be the code to make that audio file play. cp.playAudio("5472");

I wish it were as simple as making a button that said cp.playAudio("test"); and simply dropping the file in the folder after the fact but it doesn't work.

So again, if you have a small number of audio files you can upload them to your library and then publish and go see how each of the files have been renamed and then you can use the real short line of code to pull it off. The renamed file does not seem to get renamed after the first time.

Hopefully this is helpful in some way and maybe even works out for you.

melcan8

Participant

Hi, this solution directly addersses a challenge I have and I want to try it. But my meager js work has all been within Captivate and I'm not sure how/where to integrate code in published files. Can you point me to a good resource for that?

Thanks!

TLCMediaDesign

Inspiring

This would be much easier to use an audio tag in an HTML page with he JavaScript to change the source. Zip that with the audio files and insert as an HTML5 Animation.

In that page you could set up a variable change listener and cycle through the audio files.

I have an example somewhere, I'll see if I can find it and post the code tomorrow.

What action sets the variable?

B

bills89323792Author

Inspiring

Thanks- an example would be quite helpful, and it sounds like the right strategy. This is a click-button that picks a random number with Javascript.

TLCMediaDesignCorrect answer

Inspiring

This code will play an audio file based on the value of v_Choice.

The audio files are in a folder named "_audio" and the audio file names are audio1.mp3, audio2.mp3, etc.

Zip the html file and the _audio folder together and insert as an html5 animation.

<!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' );
}

wp.cpAPIEventEmitter.addEventListener( 'CPAPI_VARIABLEVALUECHANGED', function ()
{
playAudio( wp.window.v_Choice ); }, 'v_Choice'
);

function playAudio( which )
{
aud.src = '_audio/audio'+ which +'.mp3';
aud.load()
aud.play();
}

</script>
</head>

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded