如何在网页上单击鼠标或鼠标悬停时播放部分音频文件

How to play part of an audio file on mouseclick or mouseover on a webpage?

本文关键字：鼠标 播放部 音频 文件 悬停 网页 单击      更新时间：2023-09-26

我正在创建一个网站来教授一些阿拉伯语单词。 我包括数字，序数，星期几等，我有一个包含所有这些的音频文件，我想用鼠标悬停或鼠标单击播放它。现在，我不想将音频切成很多块来制作这项工作。有没有办法在鼠标单击或鼠标悬停时调用音频文件并仅部分播放文件？例如，我有一个音频文件，其中包含从 1 到 10 的数字，假设每个文件都有一秒钟长。 当用户单击数字 5 时，我希望能够调用数字音频文件并播放第 5 秒并停止。 这可能吗？以下是我的代码，用于调用和播放整个音频。谢谢！

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

我会使用全局变量来设置当前的停止点并绑定一个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();
}
相关文章：