Showing and playing audio once based on radio button selection

Hi,

I'd like to know if it's possible to autoplay an mp3 just once. Here's how I'm thinking it should work:

1. user clicks a radio button

2. the mp3 plays automatically (triggered by the radio button), but the controls aren't shown, so the user can't restart the audio. 

I tried using the show/hide conditional, but being that the mp3 is on the same page, it plays automatically before the user clicks the radio button. (I had the same problem with a youtube video clip on another form). The second problem is that you seem to need the control for the file to play at all, but as I wrote, I don't want the user to see the controls, just hear the audio.

Here's the form http://form.jotform.us/form/52462886550159

Thanks and kind regards,

Jack

Hi Jack,

I did try my best to look for a workaround, but it seems not possible to hide the control in the player. I did try hiding the player with CSS, but the autoplay option is not working in the audio tags as well as when using an iframe method.

I think using a audio hosting like Soundcloud will work. Please try it.

Thanks

I could probably work around that with a page break, but it doesn't seem to matter where the audio is in the form; it plays automatically as soon as you open the form. Right now, I have it on the second page, so theoretically, it shouldn't play until I click on the Next Page button on the first page.

Really, for the "hidden" audios, I don't even need the control at all. I just want it to play once automatically. The user doesn't have to see or have access to any controls.

Thanks,

Jack

I tested one more time what you want to achieve and I think that only possible workarounds are following: 

1. Like my colleague Welvin suggested to use Soundcloud and embed audio through Soundcloud. Here is my demo form: http://form.jotformpro.com/form/52481067639967? 

Inside of Soundcloud, audio will not be automatically triggered, user can manipulate with commands inside of audio. Unfortunately you can not hide commands because widget is loaded though iframe and basically Java Script code is dynamically changing functionality of that iframe. We can not change how Java Script work.

2. Other suggestion is to use iframe embed like you use it on your form and to use conditional logic to hide audio. Then to set condition if some option in radio button is selected to show audio. Here is my demo form: http://form.jotformpro.com/form/52481369990972?

Once the audio is shown again, audio will have controls and user can manipulate with that controls. Same as Soundcloud it is not possible to hide controls. 

Thanks, I get the logic and method of hiding the audio with a radio button, but like I wrote above, I can get around not being able to hide the controls by using the autoplay and hiding the widget. Unfortunately, no matter which widget you use for either audio or video (I've tested about a a half dozen: vimeo, youtube, soundcloud, etc.,) the audio/video begins to play as soon as you access the first page of the form, and that's even if the audio is on the tenth page of the form. I just want it to autoplay ONLY when the user reaches the page of the form in which the audio is located.

As you can see, I'm trying to design an online language test, and it's necessary that the user only hear the audio once in order to gauge comprehension. If they can access the audio to replay it, then it defeats the purpose of the test. Thanks for your help.

Jack

Unfortunately the functionality you are using is not possible on the Jotform builder alone. You have to implement this on your form source code.

This one might be of help http://stackoverflow.com/questions/18826147/javascript-audio-play-on-click

Here's how:

1. Assuming that you already have embedded your audio using the following audio code with their respective IDs.

<audio id="test1" src="//sprott.physics.wisc.edu/wop/sounds/CrashEffect.mp3"></audio>

2. Then this on top of your form source code

<script>

  function play(id){

var audio = document.getElementById(id);

       audio.play();

}</script>

2. Next, add the following code on the radio button code you want to trigger the audio.

onDISABLEDclick="play('YourAudioIDHERE')"

Where YourAudioIDHERE is your actual audio I

Example on the above audio code, the audio ID is test1, the code then becomes onDISABLEDclick="play('test1')"

Demo: https://shots.jotform.com/elton/sample_player.html

Hope this helps!