2017-01-13 32 views
0

我正在尋找記錄播放頁面中嵌入音頻文件的最佳方法。我的第一本能是嘗試並按下播放按鈕時觸發AJAX請求。解決音頻播放中的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> 
+0

不認爲你需要播放的事件 - 它只是觸發時的文件緩衝問題後,又準備好。在您的文檔鏈接中:_「播放準備好在由於缺乏數據而暫停或延遲後啓動播放事件。」_。 「玩」事件就是你想要的。 「播放開始時播放事件被觸發。」 https://developer.mozilla.org/en-US/docs/Web/Events/play。 – ADyson

回答

2

關於事件:

播放時音頻/視頻已經開始發生事件或不再>暫停。

正在播放事件發生在音頻/視頻在 被暫停或停止緩衝後播放時發生。

你可以閱讀更多的this answer

,點燃的事件只有一次OU可以使用jQuery的.one()功能:

.one(events [, data ], handler)

說明:

將處理程序附加到元素的事件。每個事件類型每個元素最多執行一次 處理程序。

像:

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

'玩'事件被激發,當我以前的我Dia播放開始,恢復或重新啓動。

確保事件只處理一次的最簡單方法是刪除事件處理函數中的事件偵聽器。

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