Web音頻API延遲的緩沖區播放

Question

這是我在此門戶網站中的首次互動。 我了解到，此門戶網站是由開發人員和開發人員創建的。

自上個月以來，我一直在嘗試解決一個非常特殊的問題。 但不幸的是，我找不到確切的解決方案。 問題是，我有一個音樂流媒體網站，用戶可以從該網站在線收聽歌曲。 我的網站還沒有網絡音樂播放器，因此正在開發一個。

最近，我將Web Audio 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();
},

無論如何，非常感謝大家。