Question

这是我在此门户网站中的第一次互动。我了解到这个门户是由开发人员和开发人员制作的。

我有一个非常奇怪的问题，我在过去的一个月里试图解决这个问题。但不幸的是，我找不到确切的解决方案。问题是，我有一个音乐流媒体网站，用户可以在线浏览歌曲。我的网站还没有网络音乐播放器，所以开发了一个。

最近我在我的网站上实现了Web Audio API以进行流式传输。哪个效果很好，但从服务器接收时不会立即开始播放流缓冲区。

我在服务器上动态处理请求，不提供与资源的直接链接，而我正在读取php中的文件和流式传输，例如readfile()或{{1 }和fopen()等。

我收到的内容非常好，但问题是api没有立即开始播放缓冲区，但是当收到整个内容时播放流。

如果歌曲是5mb，音频api缓冲所有5mb，稍后开始播放。我希望它能在收到一些流后立即播放。

我的javascript如下

fread()

我在服务器端的php文件如下

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();

我真的很感谢这个门户网站，我可以解决我的问题。

谢谢你， - 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();
},

无论如何，非常感谢所有人。

Web Audio API延迟缓冲区播放

1 个答案: