Web Audio API 延迟缓冲播放

Question

这是我在此门户中的第一次互动。我了解到这个门户网站是由开发人员创建并为开发人员服务的。

我有一个非常特殊的问题，自上个月以来我一直在努力解决这个问题。但不幸的是，我找不到确切的解决方案。问题是，我有一个音乐流媒体网站，用户可以从该网站在线收听歌曲。我的网站还没有网络音乐播放器，所以正在开发一个。

最近我在我的网站中实施了网络音频 API 以进行流式传输。效果很好，但是 它不会在从服务器.

接收到数据后立即开始播放流缓冲区

我在 不直接向资源 link 提供资源的服务器上动态处理请求，而我正在 php 和流式传输 [=38] 中读取文件=] 例如 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();
},

无论如何，非常感谢大家。

Web Audio API 延迟缓冲播放

Web Audio API Delayed Buffer Playback

javascript

php

jquery

web-audio-api