Highlighted

Selecting and playing audio with javascript

Explorer ,
Jul 13, 2016

Copy link to clipboard

Copied

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..

Adobe Community Professional
Correct answer by TLCMediaDesign | Adobe Community Professional

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>

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

Views

1.3K

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

Selecting and playing audio with javascript

Explorer ,
Jul 13, 2016

Copy link to clipboard

Copied

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..

Adobe Community Professional
Correct answer by TLCMediaDesign | Adobe Community Professional

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>

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

Views

1.3K

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
Jul 13, 2016 0
Adobe Community Professional ,
Jul 13, 2016

Copy link to clipboard

Copied

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?

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...
Jul 13, 2016 0
Explorer ,
Jul 13, 2016

Copy link to clipboard

Copied

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.

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...
Jul 13, 2016 0
Adobe Community Professional ,
Jul 14, 2016

Copy link to clipboard

Copied

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>

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

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...
Jul 14, 2016 1
Explorer ,
Jul 14, 2016

Copy link to clipboard

Copied

Great!  I appreciate the follow-up.  I'll try it out today.

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...
Jul 14, 2016 0
Explorer ,
Jul 16, 2016

Copy link to clipboard

Copied

I'm just following up to say that the html animation works brilliantly. Thanks again!

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...
Jul 16, 2016 0
Adobe Community Professional ,
Jul 18, 2016

Copy link to clipboard

Copied

Could you mark the answer as correct.

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...
Jul 18, 2016 0
Most Valuable Participant ,
Jul 18, 2016

Copy link to clipboard

Copied

Done, David, I used my 'magical' moderator power

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...
Jul 18, 2016 1
Explorer ,
Jul 18, 2016

Copy link to clipboard

Copied

Thanks Lilybiri.Thought I'd done that. I'm sure others will make good use of the answer,

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...
Jul 18, 2016 0
New Here ,
Apr 01, 2020

Copy link to clipboard

Copied

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!

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 01, 2020 0
Community Beginner ,
Apr 09, 2020

Copy link to clipboard

Copied

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!

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 09, 2020 0
Advocate ,
Apr 09, 2020

Copy link to clipboard

Copied

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.

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 09, 2020 0
Adobe Community Professional ,
Apr 13, 2020

Copy link to clipboard

Copied

It won't work unless the audio files have a sequence, which as Stagprime said, they are random. You could have the script get the audio files in the project, but it wouldn't know which ones to use. The only way that audio gets put in the ar folder is if it's being used in the project, not just in the library.

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 13, 2020 0
Community Beginner ,
Apr 13, 2020

Copy link to clipboard

Copied

Thanks for the idea, Stegman, but I agree with David that I should try the solution he already provided. I never used HTML5 Animation before, though. I understand zipping the HTML5 document and _audio folder together, but am not clear how to insert that file into Captivate. It seems that I need to use the Captivate Package feature for that. Is that right?

Do I actually have to publish something from HTML5 Animate, or do I simply insert the zipped file, as you've descibed, into Captivate as an HTML5 Animate object?

Just want to be sure I'm testing this properly.

 

Tahanks!

 

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 13, 2020 0