Question

我想录制一些声音，并使用iOS和Javascript处理原始数据。所以我打算使用网络音频技术，但ScriptProcessorNode或getChannelData效果不佳。

我把我的示例代码放在这篇文章的末尾。它应该在textarea中显示您选择的电影文件的原始音频数据。虽然它在Windows中与Chrome或Firefox一起正常工作，但在我使用iOS（Safari和Chrome）时它只显示零。

如果我使用OscillatorNode代替MediaElementSourceNode，则效果很好。因此，我怀疑同时使用MediaElementSourceNode和ScriptProcessorNode，但我不知道如何解决这个问题。

抱歉我的英语不好。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>sample</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
    <script type="text/javascript">
    //<![CDATA[

    window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
    var rawdata;
    var bufsize = 4096;

    function onaudproc(e) {
        var input   = e.inputBuffer.getChannelData(0);
        var output  = e.outputBuffer.getChannelData(0);
        var buf = new Float32Array(bufsize);
        for(var i=0; i<bufsize; i++)    buf[i] = output[i] = input[i];
        Array.prototype.push.apply(rawdata, buf);
    }

    function    filechanges()
    {
        var url = window.URL.createObjectURL($('#camfile')[0].files[0]);
        var fn  = function(){
            $('#video').on('ended pause',function(){
            $('#console').append(rawdata.toString());
                $('#video').off();
            });
            $('#writebtn').click(function(){
                audctx  = new AudioContext();
                var spnode = audctx.createScriptProcessor(bufsize, 1, 1);
                var src = audctx.createMediaElementSource($('#video')[0]);
                src.connect(spnode);
                spnode.onaudioprocess = onaudproc;
                spnode.connect(audctx.destination);
                rawdata = [];
                $('#video')[0].play();
            });
        };
        $('#video').on('loadstart',fn);
        $('#video').attr('src',url);
    }

    //]]>
    </script></head>
    <body>
    <div class="buttonset">
    <input type="file" id="camfile" onchange="filechanges()" />
    <input type="button" id="writebtn" value="output" />
    </div>
    <div><video src="#none" id="video" controls="controls" /></div>
    <div><textarea id="console" rows="20" cols="80" /></div>
    </body></html>

Answer 1

这可能是CORS访问问题。您需要createMediaElementSource的权限（使用最新版本的Chrome）才能访问数据。

iOS（Safari和Chrome）的'getChannelData'到'MediaElementSourceNode'和'ScriptProcessorNode'的结果始终为零

1 个答案: