Web Audio API延遲緩衝區回放

Question

這是我在此門戶網站中的第一個交互。我瞭解到這個門戶是由開發人員和開發人員製作的。

我有一個非常奇怪的問題，我試圖解決自1個月以來。但不幸的是，我找不到確切的解決方案。 問題是， 我有一個音樂流媒體網站，用戶可以在線上聽歌曲。我的網站還沒有網絡音樂播放器，所以正在開發一個。

最近我在我的網站上實現了Web音頻API進行流式傳輸。這很好，但它從服務器收到時不立即開始播放流緩衝區。

我處理的要求，在動態服務器，不提供直接鏈接到資源，而我讀文件在PHP和例如readfile()或fopen()和fread()等

我流接收內容非常好，但問題是api不立即開始播放緩衝區，而是在收到整個內容時播放流。

如果歌曲是5mb，音頻api會緩存所有5mb，然後開始播放。我希望它在收到一些流後立即播放。

我的JavaScript是低於服務器端

if(a.status==true&&b=='success'){ 
       (processView.audioCtx)?processView.audioCtx.close():''; 
       processView.audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 
       processView.songSrc = processView.audioCtx.createBufferSource(); 
       var request = new XMLHttpRequest(); 
       request.open('GET', processView.playSong.mp3, true); 
       request.responseType = 'arraybuffer'; 
       request.onload = function(a) { 
        var audioData = request.response; 
        processView.audioCtx.decodeAudioData(audioData, function(buffer) { 
         processView.songSrc.buffer = buffer; 
         //processView.songbuffer = processView.songSrc.buffer; 
         processView.songSrc.connect(processView.audioCtx.destination); 
         processView.songSrc.loop = true; 
         processView.songSrc.start(0); 
         $('#togglePlayerBtn').attr('state','playing').html('<span class="fa fa-pause"></span>').css('background','transparent'); 
         //processView.audioCtx.onstatechange = processView.handlePlayer(); 
        }, 
        function(e){ console.log("Error with decoding audio data" + e.err); }); 
       } 
       request.send(); 

我的PHP文件如下

$mime_type = "audio/mpeg, audio/x-mpeg, audio/x-mpeg-3, audio/mpeg3"; 
     if(file_exists($path)){ 
      header('Content-type: {$mime_type}'); 
      header('Content-length: ' . filesize($path)); 
      header('Content-Disposition: filename="' . $fileName); 
      header('X-Pad: avoid browser bug'); 
      header('Cache-Control: no-cache'); 
      readfile($path); 
      exit; 
     } 
     else 
     { 
      header('Error: Unknown Source',true,401); 
      echo 'File not found !'; 
     } 

我真的很感謝這個門戶網站，我能得到解決我的問題。

謝謝你， - HKSM

Answer 1

解決辦法很簡單，我在服務器級別劃分的MP3文件，並通過一個一個發送到瀏覽器的請求......

我修改的JavaScript如下。

updateSongBuffer : function(){ 
    if(processView.songSrc.length < 1)processView.songSrc = new Array(); 
    var request = new XMLHttpRequest(); 
    processView.songLength++; 
// here i am requesting file parts one by one... 
    request.open('GET', processView.playSong.mp3+'/'+processView.songLength, true); 
    request.responseType = 'arraybuffer'; 
    request.onprogress = function(){ 
     $('#togglePlayerBtn').css('background','url(/images/mloading.gif) no-repeat center center').css('background-size','cover'); 
    }, 
    request.onload = function(a) { 
     $('#togglePlayerBtn').css('background','transparent'); 
     var audioData = request.response; 
     processView.songSrc[processView.songLength] = processView.audioCtx.createBufferSource(); 

      processView.audioCtx.decodeAudioData(audioData).then(function(buffer) { 
      //processView.audioCtx.decodeAudioData(audioData, function(buffer) { 

      processView.songSrc[processView.songLength].buffer = buffer; 

      processView.songSrc[processView.songLength].connect(processView.audioCtx.destination); 

      if(processView.songSrc[processView.songLength-1]){ 
       processView.totalDuration += processView.songSrc[processView.songLength-1].buffer.duration; 
      } 
      else 
      { 
       processView.totalDuration += processView.audioCtx.currentTime; 
      } 

      processView.songSrc[processView.songLength].start(processView.totalDuration); 
// here i am calling the same function if audio data decoded and buffer is set successfully . . . By doing this, everything is working fine now. 
      processView.timeoutFunc = setTimeout('processView.updateSongBuffer()',10000);  
     }, 
     function(e){ console.log("Error with decoding audio data ...");console.log(e);}); 
    } 
    request.send(); 
}, 

反正，非常感謝大家。