3

I have a webpage that shows pictures. Upon clicking on a picture, I would like it to play some sound file (an audio recording of the name of the object in the picture). I have working code for this, but there's a noticeable delay between clicking on the image, and hearing the audio file being played. How can I improve my code to get rid of that delay?

HTML:

<div>
    <button style="background-image:url('objects/images/horlicks.JPG'); width:480; height:640" onclick="changeText('horlicks', 'Horlicks', 'objects/sounds/horlicks.mp3')">
    </button>
    <p id="horlicks"></p>
</div>

JavaScript:

function changeText(id, newText, audioFile) {
    document.getElementById(id).innerHTML = newText;  // This happens quickly
    new Audio(audioFile).play();  // This takes a long time
}

Update:

The HTML/JavaScript have been updated to look like this, and there is still a lag while playing the audio file (though the lag is only noticeable on the iPad and not on my laptop):

<div>
    <button style="background-image:url('objects/images/horlicks.JPG'); width:480; height:640" onclick="changeText('horlicks', 'Horlicks', '32'); horlicks.play();">
    </button>
    <p id="horlicks"></p>
</div>

JavaScript:

var horlicks = new Audio('objects/sounds/horlicks.mp3');
function changeText(id, newText, size) {
    document.getElementById(id).innerHTML = '<font size="'+size+'">'+newText+"</font>";
}
inspectorG4dget
  • 110,290
  • 27
  • 149
  • 241
  • I would personally replace the text only when the Audio element itself has been fully loaded (perhaps adding a loading gif or something) or I will rather force the user to download the audio once the document loads and, then, play it.. What's the size of your mp3 file? Also, does your audio have an "empty" start? I mean, is it full sound or does it have an empty beginning that you need to skip? If so, you may want to start the mp3 from X seconds – briosheje Jan 03 '15 at 09:33
  • @briosheje: The webpage is to help with rehabilitation of a stroke patient. Therefore, I'd like to avoid flashy "loading". The mp3 files are small (in this example, 40KB) and do not have empty beginnings. – inspectorG4dget Jan 03 '15 at 09:38
  • Hmm.. So how much the delay actually is? is it matter of seconds or..? What I'm wondering is if it actually is that it is taking too long to download and play the file or what.. I was checking this: http://stackoverflow.com/questions/5313646/how-to-preload-a-sound-in-javascript . perhaps pre-loading the file might help? – briosheje Jan 03 '15 at 10:25
  • @briosheje: I took your advice and created the objects beforehand, in the included JS. There is still a noticeable lag (a few seconds), which different for each image – inspectorG4dget Jan 03 '15 at 16:53
  • possible duplicate of [HTML5 Audio tag on Safari has a delay](http://stackoverflow.com/questions/9811429/html5-audio-tag-on-safari-has-a-delay) – inspectorG4dget Jan 03 '15 at 21:26
  • You might prefer 'onmousedown' to 'onclick'. Sometimes people linger on the mouse before releasing, and then mistake the "delayed" start time for a latency. – Phil Freihofner Jan 04 '15 at 22:09
  • @PhilFreihofner: still wouldn't help in this case, as the latency would present even if the mouse-click was fast (consider this is being viewed on an iPad, and mouse-clicking latency isn't much of a concern as long-press is a thing) – inspectorG4dget Jan 04 '15 at 22:37
  • What is your target time. What is the amount of time occurring? Also, why not make the audio play command first? I think that will launch and run in background and the program will move to the next command, whereas maybe doing graphics first makes the progression stall until the graphics completes. I'm just guessing here. Maybe also test with wav or au vs mp3 to see if it is a compression issue? – Phil Freihofner Jan 05 '15 at 01:16

1 Answers1

-1

Just in case it helps someone, i just tried to debug the same issue and figured out that my cheap bluetooth headphones where causing the delay - make sure to test this with wired speakers i guess.

Oli
  • 561
  • 7
  • 18