在音频播放时触发 AJAX 请求答案

【问题标题】：Firing off an AJAX request on audio play在音频播放时触发 AJAX 请求
【发布时间】：2017-01-13 09:49:12
【问题描述】：

我正在寻找记录播放页面内嵌入音频文件的最佳方式。我的第一反应是在按下播放按钮时尝试触发 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>

【问题讨论】：

不要认为你想要播放事件——它只有在缓冲问题后文件再次准备好时才会触发。从您的文档链接中：“当由于缺少数据而暂停或延迟后准备开始播放时触发播放事件。”。 “播放”事件就是你想要的。 “播放开始时触发播放事件。”。 developer.mozilla.org/en-US/docs/Web/Events/play.

标签： javascript jquery ajax

【解决方案1】：

关于活动：

play 事件在音频/视频已开始或不再 > 暂停时发生。

playing 事件发生在音频/视频播放完毕后已暂停或停止以进行缓冲。

您可以在 this answer

上阅读更多信息

并且对于仅触发一次事件，您可以使用 jquery 的.one() 函数：

.one( events [, data ], handler )

说明：

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

喜欢：

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

【讨论】：

【解决方案2】：

每当媒体播放开始、恢复或重新启动时，都会触发 'playing' 事件。

确保事件只处理一次的最简单方法是在事件处理函数中移除事件监听器。

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

【讨论】：