Javascript 如何在网页上的鼠标单击或鼠标悬停上播放部分音频文件?
我正在创建一个网站来教一些阿拉伯语单词。我包括数字、序数、一周中的几天等等,我有一个音频文件,其中包含了所有的数字,我想用mouseover或mouseclick来播放。现在,我不想把音频分割成许多片段来完成这项工作。有没有办法在鼠标单击或鼠标悬停时调用音频文件,只部分播放该文件?例如,我有一个音频文件,它的数字从1到10,假设每个文件都有一秒钟长。当用户单击数字5时,我希望能够调用数字音频文件并播放第5秒并停止。这可能吗?下面是我调用并播放整个音频的代码。谢谢大家!Javascript 如何在网页上的鼠标单击或鼠标悬停上播放部分音频文件?,javascript,html,html5-audio,Javascript,Html,Html5 Audio,我正在创建一个网站来教一些阿拉伯语单词。我包括数字、序数、一周中的几天等等,我有一个音频文件,其中包含了所有的数字,我想用mouseover或mouseclick来播放。现在,我不想把音频分割成许多片段来完成这项工作。有没有办法在鼠标单击或鼠标悬停时调用音频文件,只部分播放该文件?例如,我有一个音频文件,它的数字从1到10,假设每个文件都有一秒钟长。当用户单击数字5时,我希望能够调用数字音频文件并播放第5秒并停止。这可能吗?下面是我调用并播放整个音频的代码。谢谢大家! <!DOCTYPE
<!DOCTYPE html>
<html>
<head>
<title>Arabic Letters</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
</head>
<body>
<span id="dummy"></span>
<a href="#" onclick="playSound('1-001_page3.mp3');"><p dir="rtl" lang="ar"
class="letter">واحِد</p></a>
</body>
</html>
阿拉伯文字母
功能播放声音(声音文件){
document.getElementById(“dummy”).innerHTML=
"";
}
我将使用一个全局变量来设置当前停止点,并绑定一个timeupdate
侦听器来检查是否已达到时间:
var endTime = 0;
// do this binding once at page load time
myaudio.addEventListener("timeupdate", function() {
if(this.currentTime >= endTime) {
this.pause();
}
});
对于每个事件,使用myaudio.currentTime
设置开始时间,使用endTime
设置结束时间,并使用play()
设置音频:
// plays the audioObj from start to stop times (in seconds)
// call this for each snippet you wish to play (e.g., in an onclick handler)
function playInterval (audioObj, start, stop) {
audioObj.currentTime = start*1000;
endTime = stop*1000;
audio.play();
}
你可以用类似的东西。它有一个可以在一段时间后停止的按钮。您也可以使用
playHeadTime
(同一文档页面)移动播放头。请参阅示例。感谢您的回复。我是javascript新手,正在尝试了解您的示例。我应该为audioObj传递什么参数?您应该给您的
标记一个id
属性(比如
),并在JS中使用var myAudioObj=document.getElementById(“foo”)
获取它。您可以在事件绑定操作中将该对象用于audiobj
和myaudio
。