将 Web 音频 API 输出保存到 Ionic 中的本地文件

Posted 2023-03-12

【中文标题】将 Web 音频 API 输出保存到 Ionic 中的本地文件

【英文标题】：Saving Web Audio API output to local file in Ionic

【发布时间】：2015-09-10 16:32:15

【问题描述】：

我正在使用 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");   

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

我尝试在 ionic 应用程序中使用 RecorderJS 和 this RecorderJS integration，但无济于事。

它们在常规浏览器中运行良好，但由于它会生成下载链接而不是仅存储文件，因此它们对于移动应用程序的用处不大。

欢迎就如何在本地存储文件或使用不同的方法过滤掉允许文件存储的频率提出任何建议。

【问题讨论】：

您是否尝试过使用File API 从RecorderJS 生成的链接下载文件，然后保存到本地？

【参考方案1】：

得到它的工作，所以发布我的解决方案其他人有这个问题。

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

将 Recorder.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 );

我有触发这些 StartRecording 和 StopRecording 功能的按钮

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 文件被保存到手机存储中。