Cách truyền phát âm thanh bị cắt bằng API MediaSource
Với API MediaSource, bạn có thể tạo và cấu hình các luồng phương tiện ngay trong trình duyệt. Nó cho phép bạn thực hiện một loạt các hoạt động trên dữ liệu truyền thông được tổ chức bởi các thẻ HTML liên quan đến phương tiện truyền thông như hoặc là . Chẳng hạn, bạn có thể trộn các luồng khác nhau, tạo phương tiện chồng chéo, phương tiện tải lười biếng, và chỉnh sửa số liệu truyền thông chẳng hạn như thay đổi âm lượng hoặc tần số.
Trong bài đăng này, chúng tôi sẽ xem cụ thể làm thế nào để truyền phát mẫu âm thanh (một tệp MP3 bị cắt ngắn) với API MediaSource ngay trong trình duyệt để nhạc trước chương trình để khán giả của bạn. Chúng tôi sẽ đề cập đến làm thế nào để phát hiện hỗ trợ cho API, làm thế nào để kết nối phần tử phương tiện HTML với API, làm thế nào để lấy phương tiện truyền thông thông qua Ajax và cuối cùng là làm thế nào để truyền phát nó.
Nếu bạn muốn xem trước những gì chúng tôi dự định, hãy xem mã nguồn trên Github, hoặc kiểm tra trang demo.
Bước 1. Tạo HTML
Để tạo HTML, thêm một gắn thẻ điều khiển thuộc tính đến trang của bạn. Để tương thích ngược, cũng thêm một thông báo lỗi mặc định cho người dùng có trình duyệt không hỗ trợ tính năng này. Chúng tôi sẽ sử dụng JavaScript để bật / tắt thông báo này.
Bước 2. Phát hiện hỗ trợ trình duyệt
Trong JavaScript, tạo một cố gắng bắt khối đó sẽ ném lỗi nếu API MediaSource không được hỗ trợ bởi trình duyệt của người dùng, hoặc, với các từ khác nếu Nguồn truyền thông (chìa khóa) không tồn tại bên trong cửa sổ vật.
thử if (! 'MediaSource' trong cửa sổ) ném ReferenceError mới ('Không có thuộc tính MediaSource trong đối tượng cửa sổ.') Catch (e) console.log (e); Bước 3. Phát hiện hỗ trợ MIME
Sau khi kiểm tra hỗ trợ, cũng kiểm tra hỗ trợ loại MIME. Nếu loại MIME của phương tiện bạn muốn truyền phát không được trình duyệt hỗ trợ, cảnh báo người dùng và ném lỗi.
var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ('Không thể phát phương tiện. Phương tiện loại MIME' + mime + 'không được hỗ trợ.'); throw ('Media of type' + mime + 'không được hỗ trợ.'); Lưu ý rằng đoạn mã trên cần phải là đặt bên trong thử khối, trước bắt lấy chặn (để tham khảo, thực hiện theo cách đánh số dòng hoặc kiểm tra tệp JS cuối cùng trên Github).
Bước 4. Liên kết
Tạo một cái mới Nguồn truyền thông đối tượng, và chỉ định nó là nguồn của nhãn bằng cách sử dụng URL.createObjectURL () phương pháp.
var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); Bước 5. Thêm một NguồnBuffer chủ đề Nguồn truyền thông
Khi một yếu tố truyền thông HTML truy cập một nguồn phương tiện truyền thông và sẵn sàng tạo nên NguồnBuffer các đối tượng, API MediaSource bắn một nguồn biến cố .
Các NguồnBuffer vật giữ một mẩu phương tiện truyền thông cuối cùng được giải mã, xử lý và chơi. Một đơn Nguồn truyền thông đối tượng có thể có nhiều NguồnBuffer các đối tượng.
Bên trong xử lý sự kiện của nguồn biến cố, thêm một NguồnBuffer chủ đề Nguồn truyền thông với addSourceBuffer () phương pháp.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime);); Bước 6. Lấy phương tiện truyền thông
Bây giờ bạn có một NguồnBuffer phản đối, đã đến lúc lấy tập tin MP3. Trong ví dụ của chúng tôi, chúng tôi sẽ làm như vậy bằng sử dụng yêu cầu AJAX.
Sử dụng máy quét mảng như Đáp ứng, mà biểu thị dữ liệu nhị phân. Khi phản hồi được tải thành công, nối nó vào NguồnBuffer với appendBuffer () phương pháp.
phương tiện truyền thông ; xhr.onload = function () thử switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; case 404: throw 'File Not Found'; default: throw 'Không thể tìm nạp tệp '; bắt (e) console.error (e);; xhr.send (););
Bước 7. Cho biết kết thúc luồng
Khi API kết thúc việc nối thêm dữ liệu vào NguồnBuffer một sự kiện được gọi là cập nhật bị sa thải. Trong một bộ xử lý sự kiện, gọi cho endOfStream () phương pháp Nguồn truyền thông đến chỉ ra rằng luồng đã kết thúc.
phương tiện truyền thông ; xhr.onload = function () hãy thử ); break; case 404: throw 'File Not Found'; default: throw 'Không thể tìm nạp tệp'; Catch (e) console.error (e);; xhr.send ();) ;
Bước 8. Cắt bớt tệp phương tiện
Các NguồnBuffer đối tượng có hai tính chất gọi là appendWindowStart và appendWindowEnd đại diện cho thời gian bắt đầu và kết thúc của dữ liệu truyền thông bạn muốn lọc Mã đánh dấu bên dưới lọc bốn giây đầu tiên của MP3.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0; khăn); Bản giới thiệu
Và đó là tất cả, của chúng tôi mẫu âm thanh được truyền phát ngay từ trang web. Cho mã nguồn, hãy nhìn vào chúng tôi Github repo và để biết kết quả cuối cùng, hãy xem trang demo.
Hỗ trợ trình duyệt
Khi viết bài này, Nguồn truyền thông API được hỗ trợ chính thức trong tất cả các trình duyệt chính. Nhưng thử nghiệm cho thấy rằng triển khai là lỗi trong Firefox, và trình duyệt Webkit vẫn gặp sự cố với appendWindowStart bất động sản.
Vì API MediaSource là vẫn đang trong giai đoạn thử nghiệm, truy cập vào các chức năng chỉnh sửa cao hơn có thể bị hạn chế nhưng truyền phát cơ bản tính năng là thứ bạn có thể sử dụng ngay.
