Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Play audio using an input button

I'm trying to play audio when a user clicks on a button.  I'm passing the sound file to a function.  The question is programmed using  free format.

The audio file is defined in the HTML tag as follows:
<embed src="../graphics/sound/audio1.mp3"  width=0 height=0 name="soundfile" >


Here is the code for the button defined in the body of the HTML.
<input type="button" name="apb" value="Play Audio" onClick="EvalSound('sound1')"> 


Here is my function code located in the HTML <head>  tag section:
<script>
function EvalSound(soundobj) {

  var thissound = document.getElementById(soundobj);

  thissound.Play();
   
}
</script>
asked Nov 21, 2014 by anonymous

1 Answer

+1 vote
 
Best answer
The very easiest thing is to use HTML5 to make this work. The HTML5 Audio object appears to be supported in all major browsers now (IE 9 and up, Firefox, Chrome, Safari, and Safari Mobile, and Chrome for Android). The nice thing here is we won't have to code any other controls. The play/pause functions are supported, as well as the ability to seek to a specific place in the audio file.

I was able to get the following to work in SSI Web 8.3.6 in a Free Format question, but it should work in any question that provides a place for HTML:
<audio controls>
  <source src="[%GraphicsPath()%]/sound/audio1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

See this page for more information: http://www.w3schools.com/html/html5_audio.asp

Also, in attempting to get as close to your code as possible, I was able to get the following to work (probably with similar compatibility, IE 9+ as well as all the other browsers):
<embed src="[%GraphicsPath()%]/sound/audio1.mp3"  width=0 height=0 name="soundfile" id="sound1">
<input type="button" name="apb" value="Play Audio" onClick="EvalSound('sound1')">
<script>
function EvalSound(soundobj) {

  var thissound = document.getElementById(soundobj);

  thissound.Play();

}
</script>

See this page for more information: http://www.w3schools.com/tags/av_met_play.asp

Notice that in the second set:
 - I had to change the graphics path to use the SSI Script variable name to give us the correct path
- I had to add the ID field to the Embed tag, which was missing before. Since you're getting the sound embed object by ID we have to define it.

(And just to clarify some things for possible future readers: the .mp3 file has to be in the correct place, in /graphics/sound/FILENAME.mp3)
Here are some resources I looked at:

http://scriptgenerator.net/44/Audio-player-script-generator/
http://jplayer.org/

Jplayer provides audio and video playback capabilities for all browsers, even the older IE browsers, which the HTML 5 and javascript .Play() functionality doesn't offer.
answered Nov 21, 2014 by Jonathan Huff Bronze (1,575 points)
selected Nov 21, 2014 by Jonathan Huff
Thanks this worked.  The interesting thing is it didn't work when I tested it from the preview within the Write Questionnaire window.

Big thanks!
A lot of "dynamic" type things don't work when you preview, because SSI Web just throws up the HTML to give you an idea of what the question will look like.  If the code requires JavaScript, then it can only run properly when you actually test the survey in your browser.
Thanks Brian.  That is good information to have and to understand how things work.
...