2

I am playing the following mp3 in various browsers and sometimes it plays and sometimes it doesn't. Specifically now it doesn't play in Chrome anymore but it plays in Firefox:

http://langcomplab.net/Most_Precious_Possession_Master.mp3

Here's the code for it:

The second auditory story is titled, “The Most Precious Possession.” Press the “Play Story” button to begin listening to the story; after you have finished listening to the story, you will answer a set of questions about the story.
<div>
<audio id="audio3" src="http://langcomplab.net/Most_Precious_Possession_Master.mp3" style="width:50%">Canvas not supported</audio>
</div>

<p>&nbsp;</p>

<div><button name="play" onclick="disabled=true" style="height:25px; width:200px" type="button">Play Story</button></div>

Here's the javascript:

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place Your Javascript Below This Line*/
    var aud = document.getElementById('audio3');
    this.questionclick = function(event,element){
        if((element.type == "button") && (element.name == "play"))
        {
            aud.play();
        }
    }


});

So I am not sure what's the fix. I am using Qualtrics for creating an audio survey.

UPDATE: Eventhough I changed the code to the following it doesn't say the browser doesn't support this format. I am not sure what I am missing. Here's a screenshot: enter image description here

<audio controls="">&lt; id=&quot;audio3&quot; src=&quot;http://langcomplab.net/Honey_Gatherers_Master.mp3&quot; style=&quot;width:50%&quot; type=&quot;audio/mpeg&quot;&gt;Your browser does not support this audio format.</audio>
Mona Jalal
  • 34,860
  • 64
  • 239
  • 408

1 Answers1

1

You could just use this:

<div>
<audio controls>
  <source src="http://langcomplab.net/Most_Precious_Possession_Master.mp3"type="audio/mpeg">
  Your browser does not support this audio format.
</audio>
</div>

It should work on any modern browser (HTML5 is needed). Hope that helps.

Edit: To make it work with the button, and not show the HTML5 controls, you could use:

The second auditory story is titled...
<div>
<audio controls id="reader" style="display:none">
  <source src="http://langcomplab.net/Most_Precious_Possession_Master.mp3"type="audio/mpeg">
  Your browser does not support this audio format.
</audio>
</div>
<input id="Play Story" type="button" value="Play Story" onclick="document.getElementById('reader').play();" />
rp.beltran
  • 2,764
  • 3
  • 21
  • 29
  • Can you please see the update in my question? Thanks. – Mona Jalal Jun 09 '14 at 19:08
  • Are you allowing it time to load the content? The bar should have a white line showing what is loaded like on youtube. – rp.beltran Jun 09 '14 at 19:12
  • Yeah. Also I don't want to use HTML5 audio play design. I want to use my own button as shown in the question. How can I get rid of the default player shown? – Mona Jalal Jun 09 '14 at 19:16
  • 1
    I added style="display:none", and a button that uses javascript to play it, based on it's id. If you have multiple audio readers, you may want to use a more specific id then "reader", but I used it as an example. – rp.beltran Jun 09 '14 at 19:28
  • So the reason now that it sometimes plays the audio and sometimes doesn't within the same browser, is something related to the remote host for the audio files? – Mona Jalal Jun 09 '14 at 19:32
  • I think it might have to do with the size of the audio. I tested it with a smaller sized clip at first and it worked. I just played it with the larger file and it only worked if I first waited a couple minutes before pressing the button. Does it work for you if you refresh, and then wait a couple minutes, and then click it? – rp.beltran Jun 09 '14 at 19:39