Thiết granularity của HTML5 âm thanh sự kiện 'timeupdate'

Question

Tôi đang cố gắng để tạo ra một tính năng vòng lặp đơn giản sử dụng HTML5 âm thanh và có một giải pháp rất thô sơ như sau:

$(audio).bind('timeupdate', function() { 
    if (audio.currentTime >= 26){ 
    var blah = audio.currentTime; 
    audio.currentTime = 23; 
    console.log(blah); 
    } 
}) 

này hoạt động tốt nhưng trục trặc chỉ đây là sự kiện timeupdate không kích hoạt rất nhất quán. Ví dụ, console.log trên trả về: 26,14031982421875

26,229642868041992

26,13462257385254

26,21796226501465

... vv. (Bạn nhận được ý tưởng..không phù hợp)

Rõ ràng điều này sẽ không hoạt động đối với một ứng dụng mà thời gian là quan trọng (ứng dụng nhạc). Vì vậy, giải pháp hiển nhiên đối với tôi là tăng độ chi tiết mà sự kiện timeupdate được kích hoạt. Tôi đã không thể tìm thấy bất kỳ tài liệu API nào ... nhưng rất muốn biết liệu có cách nào để làm điều này không.

Answer 1

Tôi xin lỗi, nhưng đó là cách hoạt động của nó. Từ html5 specs:

Mỗi 15 đến 250ms, hoặc bất cứ khi nào điều khiển phương tiện truyền thông thay đổi vị trí của MediaController, nào xảy ra ít nhất là thường xuyên, tác nhân người dùng phải xếp hàng một nhiệm vụ để bắn một sự kiện đơn giản đặt tên timeupdate tại MediaController.

Ngoài ra,

Sự kiện này do đó không phải là để bị sa thải nhanh hơn khoảng 66Hz hoặc chậm hơn so với 4Hz (giả định các xử lý sự kiện không mất nhiều thời gian hơn 250ms để chạy). Tác nhân người dùng được khuyến khích thay đổi tần suất của sự kiện dựa trên tải hệ thống và chi phí trung bình của việc xử lý sự kiện mỗi lần, để cập nhật giao diện người dùng không thường xuyên hơn so với người dùng có thể xử lý thoải mái khi giải mã video.

Nếu bạn đọc kỹ thông số, bạn có thể có ý tưởng rằng sự kiện timeupdate là một loại sự kiện "nỗ lực tốt nhất". Nó sẽ cháy khi nó có thể và luôn luôn miễn là nó không ảnh hưởng đến hiệu suất quá nhiều.

Bạn có thể lọc các sự kiện loại bỏ một số theo thời gian để làm mịn thời gian đến, nhưng tôi e rằng không thể làm điều ngược lại.

Answer 2

Cần lưu ý rằng bạn có thể đọc thuộc tính currentTime của video thường xuyên hơn. Nếu thời gian thực sự quan trọng và bạn có thể sống với một chút không chắc chắn, bạn có thể thử điều này thay thế.

Tuy nhiên, nó ít thanh lịch hơn nhiều so với sự kiện timeupdate của riêng thẻ.

setInterval(function() { 
    console.log(audio.currentTime); // will get you a lot more updates. 
}, 30); 

Trong trường hợp này, bạn sẽ phải quản lý khoảng cho mình, hãy chắc chắn rằng bạn rõ ràng nó trước null ing yếu tố âm thanh. Nhưng nó là một khả năng.

Tôi đang sử dụng phương pháp này trên phần tử video nhưng cũng nên áp dụng ở đây.