在Ionic中保存Web Audio API输出到本地文件

Saving Web Audio API output to local file in Ionic

本文关键字：输出 文件 API Audio Ionic 保存 Web      更新时间：2023-09-26

我正在使用Ionic框架开发一个应用程序。该应用程序的一部分是使用麦克风录制音频，过滤出一定范围的频率，然后通过扬声器/耳机播放声音。

我用这个代码让那部分工作

function ListenButtonPressed() 
{           
        context = new (window.AudioContext||window.webkitAudioContext);
        navigator.getUserMedia = (navigator.getUserMedia ||
                                  navigator.webkitGetUserMedia ||
                                  navigator.mozGetUserMedia ||
                                  navigator.msGetUserMedia);
        navigator.getUserMedia(
                            {audio:true},
                            SetupFilters,
                            function(e) {
                                alert("error getting user media " + e);
                            });
}
function SetupFilters(stream)
{       
    input = context.createMediaStreamSource(stream);
    volume = context.createGain();
    volume.gain.value = 10;
    lowPass = context.createBiquadFilter(); 
    lowPass.type = 'lowpass';
    lowPass.frequency.value = 25;       
    highPass = context.createBiquadFilter(); 
    highPass.type = 'highpass';
    highPass.frequency.value = 425;     
    input.connect(lowPass);
    input.connect(highPass);
    input.connect(volume);
    highPass.connect(context.destination);
    lowPass.connect(context.destination);       
    volume.connect(context.destination);
    alert("recording started successfully");   
}

现在，我想要另一个按钮来记录过滤器的输出，并将其作为文件保存在手机存储系统中。

我尝试过使用RecorderJS，并在ionic应用程序中使用了这个RecorderJS集成，但无济于事。

它们在普通浏览器中工作得很好，但由于它生成下载链接而不仅仅是存储文件，因此它们在移动应用程序中没有多大用处。

任何关于如何在本地存储文件的建议，或者使用不同的方法来过滤掉允许文件存储的频率，都欢迎。

得到它的工作，所以张贴我的解决方案，任何人有这个问题。

从问题中的git repo下载RecorderJS，并将File插件添加到您的项目中。

更改记录器。setupDownload函数

Recorder.setupDownload = function(blob, filename)
{
try
{     
  window.requestFileSystem(window.PERSISTENT, 1024*1024, function(filesystem) {
        if(filesystem)
        {
            alert("got file system");
            try
            {
                var src = blob; //3-5mb blob from previously retrieved file
                var starttime = Date.now();
                filesystem.root.getFile("NEWFILE.WAV", { 'create': true }, 
                function (fileEntry) 
                {
                  fileEntry.createWriter(function (fileWriter) 
                  {
                      fileWriter.onwriteend = function (event) 
                      {
                        alert(Date.now()-starttime); //usually 3-6 seconds lockup
                      };
                      fileWriter.write(src);
                  }, 
                  function (fail) 
                  { 
                    alert("failed saving"+fail); 
                  });
                });
            }
            catch(e)
            {
              alert(e.message);
            }

        }
    });
}
catch(e)
{
  alert(e.message);
}
}

这一行被添加到我的'SetupFilters'函数的底部

 audioRecorder = new Recorder( input );

我有触发这些开始录音和停止录音功能的按钮

function stopRec()
{
    highPass.disconnect();
    lowPass.disconnect();
    volume.disconnect();
    audioRecorder.stop();    
    audioRecorder.getBuffers( gotBuffers );
}
function startRec()
{
    audioRecorder.clear();
    audioRecorder.record();
}

将这些函数与开始和停止记录函数放在同一个类中。我不是100%确定他们做什么，因为我还在学习Javascript，但他们从问题链接的RecorderJS集成。

function saveAudio() {
    audioRecorder.exportWAV( doneEncoding );    
}
function gotBuffers( buffers ) {            
    audioRecorder.exportWAV( doneEncoding );
}
function doneEncoding( blob ) {
    Recorder.setupDownload( blob, "myRecording" + ((recIndex<10)?"0":"") + recIndex + ".wav" );
    recIndex++;
}

在所有这些之后，一个WAV文件被保存到手机存储。

相关文章：