Javascript 在悬停时播放声音。在悬停时停止并重置
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14926306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript play sound on hover. stop and reset on hoveroff
提问by user2081357
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
它目前正在悬停,但是当我回到它在它下面播放的图像时,它不会回到开头,它会继续播放
回答by zevdg
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 interfaceto play, pause, and seek through the media (and lots more).
<embed> 标签是嵌入多媒体的旧方法。您真的应该使用新的 HTML5 <audio> 或 <video> 标签,因为它们是嵌入多媒体对象的首选和标准化方式。您可以使用HTMLMediaElement 接口播放、暂停和搜索媒体(以及更多)。
Here is a simple examplethat plays an audio file on mouseover and stops it on mouseout.
这是一个简单的示例,它在鼠标悬停时播放音频文件并在鼠标悬停时停止播放。
HTML:
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:
Javascript:
function PlaySound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.play();
}
function StopSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.pause();
thissound.currentTime = 0;
}
For more information, check out the MDN guide for embedding audio and video
回答by josephjguerra
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.
我有同样的问题,关于开始和停止音频。我使用 jQuery 而没有任何其他插件。我的代码用于 mousedown 和 mouseup,但可以更改为其他操作。
HTML
HTML
<div class="soundbutton">
cool wind sound
</div>
<audio id="wind-sound" src="wind-sound/wind.mp3">
Javascript
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
}
回答by Micheal Wade Harrison
<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.
//结束注意:您必须查看您的音频ID,因为我的名为“播放器”,这就是它不起作用的原因,请在您的行中非常仔细地查看您的css和html。你必须注意的另一件事是你的调用函数,因为我的被声明为 stopAudio() 你的可以命名不同。如果您正确使用调用方法,该函数仅适用于 css。

