• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Selecting and playing audio with javascript

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

Views

2.2K

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
community guidelines

correct answers 1 Correct answer

Community Expert , Jul 14, 2016 Jul 14, 2016

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_VARIABLEVAL

...

Likes

Translate

Translate
Community Expert ,
Jul 13, 2016 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
community guidelines
Explorer ,
Jul 13, 2016 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
community guidelines
Community Expert ,
Jul 14, 2016 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
community guidelines
Explorer ,
Jul 14, 2016 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
community guidelines
Explorer ,
Jul 16, 2016 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
community guidelines
Community Expert ,
Jul 18, 2016 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
community guidelines
Community Expert ,
Jul 18, 2016 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
community guidelines
Explorer ,
Jul 18, 2016 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
community guidelines
New Here ,
Apr 01, 2020 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
community guidelines
Explorer ,
Apr 09, 2020 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
community guidelines
Advisor ,
Apr 09, 2020 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
community guidelines
Community Expert ,
Apr 13, 2020 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
community guidelines
Explorer ,
Apr 13, 2020 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
community guidelines
New Here ,
Mar 04, 2021 Mar 04, 2021

Copy link to clipboard

Copied

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

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
community guidelines
New Here ,
Mar 04, 2021 Mar 04, 2021

Copy link to clipboard

Copied

LATEST

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. 

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
community guidelines