Tìm kiếm thông qua tệp MP3 được truyền trực tiếp bằng HTML5 <audio> thẻ

Question

Hy vọng rằng ai đó có thể giúp tôi với điều này.

Tôi đang phát xung quanh với máy chủ node.js truyền luồng âm thanh đến ứng dụng khách và tôi muốn tạo trình phát HTML5. Ngay bây giờ, tôi đang phát trực tuyến mã từ nút bằng cách sử dụng mã hóa chunked và nếu bạn truy cập trực tiếp vào URL, nó hoạt động tốt.

Những gì tôi muốn làm là nhúng này sử dụng thẻ HTML5 <audio>, như vậy:

<audio src="http://server/stream?file=123"> 

nơi /stream là thiết bị đầu cuối cho máy chủ nút để dòng MP3. Trình phát HTML5 tải tốt trong Safari và Chrome, nhưng nó không cho phép tôi tìm kiếm và Safari thậm chí còn cho biết đó là "Phát sóng trực tiếp". Trong tiêu đề của /stream, tôi bao gồm kích thước tệp và loại tệp và phản hồi được kết thúc đúng cách.

Bất kỳ suy nghĩ nào về cách tôi có thể giải quyết vấn đề này? Tôi chắc chắn chỉ có thể gửi toàn bộ tập tin cùng một lúc, nhưng sau đó người chơi sẽ đợi cho đến khi toàn bộ nội dung được tải xuống - tôi muốn truyền tải nó.

Answer 1

xem ở đây http://www.scottandrew.com/pub/html5audioplayer/, tôi đã sử dụng tính năng này và phát trong khi đang tải xuống tệp. Nó chờ đợi một chút cho bộ đệm nhưng sau đó chơi. Không bao giờ cố gắng tìm kiếm mặc dù nhưng tôi sẽ bắt đầu bằng cách cố gắng để thiết lập "aud.currentTime" trong mã của mình nếu điều đó có thể được thực hiện.

Chúc may mắn

Answer 2

Bạn có gửi một dãy Accept-(header RFC 2616, Section 14.5) phản ứng?

Answer 3

Từ những gì tôi hiểu bạn muốn các cầu thủ để cho phép người sử dụng để chuyển đến các bộ phận của âm thanh/video mà thiên đường' Tôi không chắc liệu điều này có khả thi hay không, vì tôi đã xem xét một số ví dụ về các phần tử trung gian html5 và họ không cho phép tôi tìm kiếm các bộ phận không được lọc :(

Nếu bạn muốn tìm qua phần đệm - thì đó không phải là vấn đề. tạo ra một vấn đề cho chính mình ở đây, theo như tôi hiểu. Bạn muốn truyền tệp và điều này làm cho người chơi nghĩ rằng bạn có một số loại luồng trực tiếp trên mạng. Nếu bạn vừa gửi tệp trực tiếp - bạn sẽ không gặp phải vấn đề này, vì trình phát sẽ có thể bắt đầu phát trước khi tải toàn bộ tệp. Điều này hoạt động tốt với cả phần tử âm thanh và video và tôi đã xác nhận hành vi này trong cả Chrome và FF :)

Hy vọng điều này sẽ hữu ích!

Answer 4

có lẽ điều này html5 audio player example sẽ giải thích và minh họa cho chúng tôi phần tử mới và các phương thức .load, .play, .currentTime, v.v.

tôi sử dụng một loạt các phần tử và có thể đặt vị trí hiện tại của khóa học. chúng tôi cũng có thể sử dụng các trình xử lý sự kiện (ví dụ: 'loadeddata') để chờ trước khi cho phép tìm kiếm.

ping và vui chơi với html5 :)

Answer 5

Hãy chắc chắn rằng máy chủ chấp nhận yêu cầu Range, bạn có thể kiểm tra xem nếu Accept-Ranges là trong tiêu đề. Trong jPlayer, đây là một vấn đề phổ biến trong các trình duyệt Webkit (đặc biệt là Chrome) khi nói đến tiến trình và chức năng tìm kiếm.

Bạn có thể không sử dụng jPlayer, nhưng thông tin Phản hồi của máy chủ trên trang web chính thức có thể được sử dụng.

http://www.jplayer.org/latest/developer-guide/#jPlayer-server-response

Answer 6

nhưng tôi cũng gặp vấn đề tương tự. Cần thiết để đặt một số tiêu đề cho phản hồi tệp phương tiện.

làm ví dụ:

Accept-Ranges:bytes 
Content-Length:7437847 
Content-Range:bytes 0-7437846/7437847 

thẻ Sau đó âm thanh sẽ có thể tìm kiếm