Javascript play sound on hover. stop and reset on hoveroff

Question

function EvalSound(soundobj) {
    var thissound=document.getElementById(soundobj);
    thissound.currentTime = 0;  
    thissound.Play();
}

function StopSound(soundobj) {
    var thissound=document.getElementById(soundobj);
    thissound.Stop();
}

This is my code to play a audio file,

onmouseover="EvalSound('sound1')" onmouseout="StopSound('sound1')"

It is currently working on hover, however when i go back to the image that it plays under it doesnt go back to the beginning, it continues playing

Knee

How are you hosting your sound? I've had this same problem before because of a weird bug in python's SimpleHTTPServer... – Barnet

Just don't forget to give user's option to switch off the sound :-) – Dromond

i have just embeded the file like this <embed src="sound/audiofile.m4a" autostart=false width=1 height=1 id="sound1" enablejavascript="true"> – Knee

Answer 1

The <embed> tag is the old way to embed multimedia. You really ought to be using the new HTML5 <audio> or <video> tags as they are the preferred and standardized way to embed multimedia objects. You can use the HTMLMediaElement interface to play, pause, and seek through the media (and lots more).

Here is a simple example that plays an audio file on mouseover and stops it on mouseout.

For more information, check out the MDN guide for embedding audio and video

function PlaySound(soundobj) {
  var thissound = document.getElementById(soundobj);
  thissound.play();
}

function StopSound(soundobj) {
  var thissound = document.getElementById(soundobj);
  thissound.pause();
  thissound.currentTime = 0;
}

<p onmouseover="PlaySound('mySound')" onmouseout="StopSound('mySound')">Hover Over Me To Play</p>

<audio id='mySound' src='https://upload.wikimedia.org/wikipedia/commons/6/6f/Cello_Live_Performance_John_Michel_Tchaikovsky_Violin_Concerto_3rd_MVT_applaused_cut.ogg' />

Cineraria

Also, I'd recommend putting thissound.currentTime = 0; in StopSound() instead of EvalSound(). That way, if you ever did need to pause the sound, the EvalSound function still would work as expected. – Cineraria

<script> function EvalSound(soundobj) { var thissound=document.getElementById(soundobj); thissound.currentTime = 0; thissound.Play(); } function StopSound(soundobj){ var thissound=document.getElementById(soundobj); thissound.Stop(); } </script> <embed src="sound/soundfile.mv4" autostart=false width=1 height=1 id="sound1" enablejavascript="true"> – Knee

<script> function EvalSound(soundobj) { var thissound=document.getElementById(soundobj); thissound.Play(); } function StopSound(soundobj){ var thissound=document.getElementById(soundobj); this.currentTime = 0; this.pause(); } </script> <embed src="sound/sound.m4a" autostart=false width=1 height=1 id="sound1" enablejavascript="true"> <a href="#" onmouseover="EvalSound('sound1')" onmouseout="StopSound('sound1')"> <img src="images/img.png" /> </a> – Knee

Ahh, you're using an <embed> tag. I really recommend switching to an <audio> tag. That is the preferred way to embed audio into your webpage. I added some sample code to my answer above. – Cineraria

You will get Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. due to Chrome policy – Isadora

Answer 2

I had the same question, about starting and stopping audio. I use jQuery without any other plugins. My code is for mousedown and mouseup, but could be changed to other actions.

HTML

<div class="soundbutton">
   cool wind sound
</div>
<audio id="wind-sound" src="wind-sound/wind.mp3">

Javascript

$('.soundbutton').on('mousedown', function () {     
    playWind();                                  //start wind sound
})
.on('mouseup', function () {                    
    stopWind();                                  //stops the wind sound
});


// my full functions to start and stop

function playWind () {                           //start wind audio
  $('#wind-sound')[0].volume = 0.7;
  $('#wind-sound')[0].load();
  $('#wind-sound')[0].play();
}
function stopWind () {                           //stop the wind audio
  $('#wind-sound')[0].pause();
  $('#wind-sound')[0].currentTime = 0;           //resets wind to zero/beginning
}

Margoriemargot

Answer 3

<html>

<script>
function stopAudio() {                      
player.pause();
player.currentTime = 0;           
}
</script>


<body>
<audio id="player" src="(place audio here)"></audio>

<div> 
<button onclick=" stopAudio()">Stop</button>
</div>

</body>
</html>

//End Note: you must look at your audio id as mine is named "player" this is the reason it is not working look at your css and your html very closely in your lines. The other thing you must be careful about is your call function as mine is stated as stopAudio() yours could be named different. The function only works with css if you use your call method properly.

Touchback