Question

我正在寻找记录页面中嵌入音频文件的最佳方式。我的第一直觉是在按下“播放”按钮时尝试触发AJAX请求。

我正在查看Media Events docs，并认为playing事件是我追求的事件。它是否正确？我也担心每次按下播放按钮时都会触发AJAX请求，而不仅仅是第一次（例如，如果它们暂停和取消暂停），这可能会导致日志偏斜。

这是文档为媒体事件提供的监听器示例：

var v = document.getElementsByTagName("video")[0];
v.addEventListener("seeked", function() { v.play(); }, true);
v.currentTime = 10.0;

但是我怎么能将它整合到以下代码中：

<audio id="123" controls>
    <source src="../uploads/filename.mp3" type="audio/mpeg">
</audio>

我尝试了以下方法，但似乎没有发生任何事情：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('audio').each(function() {
            var id = $(this).attr('id');
            $(this).addEventListener("playing", function() {
                alert(id);
            });
        });
    });
</script>

Answer 1

关于活动：

播放事件发生在音频/视频已启动或不再是＆gt;暂停。

音频/视频播放后，播放事件发生   暂停或停止缓冲。

您可以在 this answer

上阅读更多内容

为了只触发一次事件，你可以使用jquery的.one()函数：

<强> .one( events [, data ], handler )

说明：

将处理程序附加到元素的事件。该   每个事件类型的每个元素最多执行一次handler。

像：

$(this).one("playing", function() {
    alert(id);
});

Answer 2

播放＆＃39;媒体播放开始，恢复或重新启动时会触发事件。

确保事件仅处理一次的最简单方法是在事件处理函数中删除事件侦听器。

function oneTimeEventHandler(e) {
  // remove this handler
  e.target.removeEventListener(e.type, arguments.callee);
  // now handle the event
  alert("This event will only be handled once!");
}

CodePen上的示例： http://codepen.io/anon/pen/mRErLR

在音频播放

2 个答案: