Web Audio API延迟缓冲区回放

问题描述：

这是我在此门户网站中的第一个交互。我了解到这个门户是由开发人员和开发人员制作的。Web Audio API延迟缓冲区回放

我有一个非常奇怪的问题，我试图解决自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

你好？这里有人吗？ –

答

解决办法很简单，我在服务器级别划分的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(); 
},

反正，非常感谢大家。

Web Audio API延迟缓冲区回放

相关推荐