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

标签 javascript html html5-audio

我正在创建一个网站来教授一些阿拉伯语单词。我包括数字、序数、星期几等,并且我有一个包含所有这些的音频文件,我想通过鼠标悬停或鼠标单击来播放它。现在,我不想将音频切割成很多片段来完成这项工作。有没有办法在鼠标单击或鼠标悬停时调用音频文件并且仅部分播放该文件?例如,我有一个音频文件,其中包含从 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>

最佳答案

我将使用全局变量来设置当前停止点并绑定(bind)一个 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();
}

关于javascript - 如何在网页上单击或鼠标悬停时播放音频文件的一部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11036036/

相关文章:

javascript - 为什么不是位置 : sticky affecting my navbar?

javascript - 数据表卡住 header

html - <address> 元素 inside <p> 丢失显示 : inline property

javascript - 不能直接将 [audio].play() 作为 jQuery 回调

Javascript function.prototype.apply() 使用字符串而不是 `this`

html - SVG:如何圆化笔划和矩形 Angular ?

javascript - 在 Angular 中保存表单值的问题

javascript - HTML5 音频标签在 Android 中不起作用 - Chrome 在 JS 中创建时?

html - Videogular不支持flac音频文件

javascript - knockout 中级联主从和加载记录。 js