Trong quá trình Tích hợp MediaStream với WebRTC, API Âm thanh trên web gần đây đã ra mắt một viên ngọc ẩn danh có tên là createMediaElementSource(). Về cơ bản, lớp này cho phép bạn kết nối phần tử <audio> HTML5 làm nguồn đầu vào cho API. Nói một cách dễ hiểu, bạn có thể trực quan hoá âm thanh HTML5, thực hiện các thao tác biến đổi âm thanh theo thời gian thực, lọc, v.v.!
Thông thường, Web Audio API hoạt động bằng cách tải một bài hát thông qua XHR2, đầu vào tệp, bất kỳ,...và bạn đã tắt. Thay vào đó, trình bổ trợ này cho phép bạn kết hợp <audio> HTML5 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 để truyền trực tuyến các tài sản âm thanh khá dài. Giả sử tệp của bạn có thời lượng 2 giờ. Bạn không muốn giải mã toàn bộ nội dung đó! Điều này cũng thú vị nếu bạn muốn tạo một API trình phát nội dung đa phương tiện cấp cao (và giao diện người dùng) để phát/tạm dừng/tìm kiếm, nhưng muốn áp dụng một số tính năng 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 xảy ra sau window.onload.
Bước tiếp theo là khắc phục crbub.com/112367. Khi đã sẵn sàng, bạn có thể kết nối WebRTC (cụ thể là API navigator.getUserMedia()) để chuyển đầu vào âm thanh (ví dụ: micrô, bộ trộn, guitar) đến thẻ <audio>, sau đó trực quan hoá bằng API Âm thanh trên web. Bùng nổ!