Trong khuôn khổ hoạt động Tích hợp MediaStream với WebRTC, gần đây, API Web âm thanh đã có một phiên bản đặc biệt có tên là createMediaElementSource(). Về cơ bản, nó cho phép bạn kết nối một phần tử <audio> HTML5 làm nguồn đầu vào với API. Nói một cách đơn giản... bạn có thể trực quan hóa âm thanh HTML5, tạo các đột biến âm thanh theo thời gian thực, lọc, v.v.!
Thông thường, API Web âm thanh hoạt động bằng cách tải bài hát qua XHR2, phương thức nhập tệp, bất cứ thứ gì, v.v. và bạn đang tắt. Thay vào đó, hook này cho phép bạn kết hợp HTML5 <audio> với khả năng trực quan hoá, lọc và xử lý của Web Audio API.
Việc tích hợp với <audio> là lựa chọn lý tưởng để phát trực tiếp các tài sản âm thanh khá dài. Giả sử tệp của bạn dài 2 giờ. Bạn không muốn giải mã toàn bộ những thứ đó! Cũng thật thú vị nếu bạn muốn xây dựng API (và giao diện người dùng) trình phát nội dung đa phương tiện cấp cao để phát/tạm dừng/tìm kiếm nhưng muốn áp dụng một số xử lý/phân tích bổ sung.
Tab Thanh toán sẽ giống như bên dưới:
// Create an <audio> element dynamically.
var audio = new Audio();
audio.src = 'myfile.mp3';
audio.controls = true;
audio.autoplay = true;
document.body.appendChild(audio);
var context = new webkitAudioContext();
var analyser = context.createAnalyser();
// Wait for window.onload to fire. See crbug.com/112368
window.addEventListener('load', function(e) {
// Our <audio> element will be the audio source.
var source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
// ...call requestAnimationFrame() and render the analyser's output to canvas.
}, false);
Như đã lưu ý trong mã, có lỗi yêu cầu thiết lập nguồn phải xảy ra sau window.onload.
Bước hợp lý tiếp theo là khắc phục crbub.com/112367. Sau khi cún con đó đã sẵn sàng, bạn có thể kết nối WebRTC (cụ thể là API navigator.getUserMedia()) để nối đầu vào âm thanh (ví dụ: micrô, bộ trộn âm thanh, ghi-ta) vào thẻ <audio>, sau đó trực quan hóa thẻ đó bằng API Web âm thanh. Cực kỳ bùng nổ!