HTML5 <audio> lựa chọn kém cho phát trực tuyến?

Question

Như đã thảo luận trong một previous question, tôi đã xây dựng một mẫu thử nghiệm (sử dụng API MVC Web, NAudio và NAudio.Lame) đang phát trực tiếp âm thanh chất lượng thấp sau khi chuyển đổi thành mp3. Luồng nguồn là PCM: 8K, 16-bit, mono và tôi đang sử dụng thẻ âm thanh của html5.

On cả Chrome và IE11 có một 15-34 giây chậm trễ (cao độ trễ) trước khi âm thanh được nghe từ trình duyệt mà, tôi nói, là không thể chấp nhận cho người dùng cuối của chúng tôi. Lý tưởng nhất là độ trễ sẽ không lớn hơn 5 giây. Sự chậm trễ xảy ra ngay cả khi sử dụng thuộc tính preload = "none" trong thẻ âm thanh của tôi.

Xem xét kỹ hơn vấn đề, có vẻ như cả hai trình duyệt sẽ không bắt đầu phát âm thanh cho đến khi chúng nhận được ~ 32K dữ liệu âm thanh. Với ý nghĩ đó, tôi có thể ảnh hưởng đến độ trễ bằng cách thay đổi cài đặt bitrate của 'Lrate' MP3. Tuy nhiên, nếu tôi giảm độ trễ (bằng cách gửi nhiều dữ liệu hơn cho trình duyệt với cùng độ dài âm thanh), tôi sẽ giới thiệu bản âm thanh sau đó.

Ví dụ:

• Nếu tôi sử dụng mã hóa Lame V0 của sự trì hoãn là gần 34 giây mà đòi hỏi gần 0,5 MB bộ âm thanh nguồn.
• Nếu tôi sử dụng mã hóa ABR_32 của Lame, tôi có thể giảm thời gian trễ xuống 10-15 giây nhưng tôi sẽ tạm dừng và bỏ qua trong suốt phiên nghe.

Câu hỏi:

1. Bất kỳ ý tưởng làm thế nào tôi có thể giảm thiểu sự chậm trễ khởi động (độ trễ)?
2. Tôi có nên tiếp tục điều tra các cài đặt trước của Lame khác nhau với hy vọng chọn "đúng" không?
3. Có thể là MP3 là không phải là định dạng tốt nhất cho số phát trực tuyến phát trực tuyến?
4. Chuyển sang hỗ trợ Ogg/Vorbis (hoặc Ogg/OPUS)?
5. Chúng tôi có cần từ bỏ thẻ âm thanh của HTML5 và sử dụng Flash hoặc applet java không?

Cảm ơn.

Answer 1

Bạn không thể giảm độ trễ vì bạn không kiểm soát được mã trình duyệt và kích thước bộ đệm. Đặc tả HTML5 không thực thi bất kỳ ràng buộc nào, vì vậy tôi không thấy bất kỳ lý do nào tại sao nó sẽ cải thiện.

Tuy nhiên, bạn có thể triển khai giải pháp với API webaudio (nó khá đơn giản), nơi bạn tự xử lý phát trực tuyến.

Nếu bạn có thể chia đoạn MP3 của bạn ở kích thước cố định (để mỗi kích thước khối MP3 được biết trước, hoặc ít nhất, tại thời điểm nhận), thì bạn có thể phát trực tuyến trong 20 dòng mã. Kích thước chunk sẽ là độ trễ của bạn.

Điều quan trọng là sử dụng AudioContext :: decodeAudioData.

// Fix up prefixing 
window.AudioContext = window.AudioContext || window.webkitAudioContext; 
var context = new AudioContext(); 
var offset = 0; 
var byteOffset = 0; 
var minDecodeSize = 16384; // This is your chunk size 

var request = new XMLHttpRequest(); 
request.onprogress = function(evt) 
{ 
    if (request.response) 
    { 
     var size = request.response.length - byteOffset; 
     if (size < minDecodeSize) return; 
     // In Chrome, XHR stream mode gives text, not ArrayBuffer. 
     // If in Firefox, you can get an ArrayBuffer as is 
     var buf; 
     if (request.response instanceof ArrayBuffer) 
      buf = request.response; 
     else 
     { 
      ab = new ArrayBuffer(size); 
      buf = new Uint8Array(ab); 
      for (var i = 0; i < size; i++) 
       buf[i] = request.response.charCodeAt(i + byteOffset) & 0xff; 
     } 
     byteOffset = request.response.length; 
     context.decodeAudioData(ab, function(buffer) { 
      playSound(buffer); 
     }, onError); 
    } 
}; 
request.open('GET', url, true); 
request.responseType = expectedType; // 'stream' in chrome, 'moz-chunked-arraybuffer' in firefox, 'ms-stream' in IE 
request.overrideMimeType('text/plain; charset=x-user-defined'); 
request.send(null); 

function playSound(buffer) { 
    var source = context.createBufferSource(); // creates a sound source 
    source.buffer = buffer;     // tell the source which sound to play 
    source.connect(context.destination);  // connect the source to the context's destination (the speakers) 
    source.start(offset);       // play the source now 
              // note: on older systems, may have to use deprecated noteOn(time); 
    offset += buffer.duration; 
}