I have a simple set up: upon clicking an image, I want an mp3 file to play.

From most sources that I recall, the remendation is to create a dummy span element where one can embed an audio player to auto start upon clicking the image.

Here's the function to perform such an action:

<script language="javascript" type="text/javascript">
  function playSound(soundfile,evt) {
    document.getElementById("dummy").innerHTML = "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
    evt.preventDefault(); // this doesnt do anything
    return false; // neither does this
  }
</script>

The HTML code for the image:

<a href="#" onclick="playSound('aud.mp3'); return false;">

I placed the "dummy" span at the very bottom of the page. Upon clicking the image, the sound plays, but the incredibly annoying thing is that the page automatically scrolls down to the location of this span element.

I've tried this on IE and Firefox: this problem doesn't occur. It's only in the most recent version of Chrome (24.0.1312.56 m) that this happens. I have tried this on two puters.

Does anyone know what's up? How do you get rid of this annoying scroll?

The return false; doesn't help (neither of them; the second one just presents scrolling to the top via the # attribute). Neither does the preventDefault(). Neither does changing the a href attribute from # to javascript:void(0).

I have a simple set up: upon clicking an image, I want an mp3 file to play.

From most sources that I recall, the remendation is to create a dummy span element where one can embed an audio player to auto start upon clicking the image.

Here's the function to perform such an action:

<script language="javascript" type="text/javascript">
  function playSound(soundfile,evt) {
    document.getElementById("dummy").innerHTML = "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
    evt.preventDefault(); // this doesnt do anything
    return false; // neither does this
  }
</script>

The HTML code for the image:

<a href="#" onclick="playSound('aud.mp3'); return false;">

I placed the "dummy" span at the very bottom of the page. Upon clicking the image, the sound plays, but the incredibly annoying thing is that the page automatically scrolls down to the location of this span element.

I've tried this on IE and Firefox: this problem doesn't occur. It's only in the most recent version of Chrome (24.0.1312.56 m) that this happens. I have tried this on two puters.

Does anyone know what's up? How do you get rid of this annoying scroll?

The return false; doesn't help (neither of them; the second one just presents scrolling to the top via the # attribute). Neither does the preventDefault(). Neither does changing the a href attribute from # to javascript:void(0).

• javascript
• innerhtml

• Instead of the anchor element try a span and style it – Arun P Johny Commented Jan 30, 2013 at 3:35
• Where do you think the evt argument to playSound is going to e from? I guess you imagine that the browser will magically add the event as the second argument to the call to playSound? – user663031 Commented Jan 30, 2013 at 6:19
• @torazaburo Honestly, I don't know. That briefly crossed my mind, but I didn't think preventDefault is even the proper thing to do anyone. @ArunPJohny I tried changing the anchor into a span, but the same thing happened. Something about the innerHTML method is still causing the scroll effect, but I don't know if you meant something a bit more specific. – ergo Commented Jan 30, 2013 at 13:57

2 Answers 2

Instead of using a dummy span element, I found out that there is a play() method in Javascript for the audio and video DOM elements, so I just rewrote the code to avoid the Chrome bug. Apparently, it's not supported for IE8 or older versions, but it's a worthwhile trade-off.

<audio id="aud">
    <source src="aud.ogg" type="audio/ogg" />
    <source src="aud.mp3" type="audio/mpeg" />
</audio>
<a href="#" onClick="document.getElementById('aud').play(); return false;">
  Link
</a>

Ok I ran into a similar issue and found this but it didn't help me, I figured out a workaround so I decided to post it here to help other people with the same issue. The issue is that the browser figures since this is in response to the user clicking something, it should scroll to show the new html content automatically. The workaround I came up with is like this -

setTimeout(function(){
    document.getElementById('dummy').innerHTML += "THE STUFF";
}, 0);

It simply does a setTimeout for 0 ms and then does the appending of html code, this way it is disassociated with the click event.