Javascript在悬停时播放声音。在hoveroff上停止并重置

时间:2013-02-17 21:33:00

标签: javascript audio onmouseover onmouseout onhover

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

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

这是我播放音频文件的代码,

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

目前正在进行悬停,但是当我回到它下面播放的图像时,它不会回到开头,它会继续播放

3 个答案:

答案 0 :(得分:6)

< embed>标签是嵌入多媒体的旧方式。你真的应该使用新的HTML5< audio>或<视频>标签,因为它们是嵌入多媒体对象的首选和标准化方式。您可以使用HTMLMediaElement interface播放,暂停和搜索媒体(以及更多内容)。

这是simple example在鼠标悬停时播放音频文件并在mouseout上停止播放。

HTML:

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

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

使用Javascript:

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

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

有关详细信息,请查看MDN guide for embedding audio and video

答案 1 :(得分:1)

我有同样的问题,关于启动和停止音频。我使用jQuery没有任何其他插件。我的代码用于mousedown和mouseup,但可以更改为其他操作。

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
}

答案 2 :(得分:0)

<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>

//结束注意:你必须查看你的音频ID,因为我的名字是#34;播放器&#34; 这就是它不工作的原因看你的CSS和你的HTML 非常接近你的台词。另外你要注意的事情 是你的召唤函数,因为我的声明是stopAudio()你可以 命名不同。如果您使用呼叫,该功能仅适用于CSS 方法正确。