Ionic 5/Angular：将 WebAudio API MediaRecorder webm/audio 输出编码为可在 iOS 上播放的格式的最佳方法是什么？

问题描述

用于 iOS 的 Ionic 5 Angular 项目

我正在寻找有关将 WEBM 音频编码为 MP3 或 M4A 甚至 WAV 格式的最佳方式的信息，以便可以在 iOS 上使用 HowlerJS 播放。

我正在使用 Web Audio API 的本机 mediaRecorder 以块的形式捕获音频并形成一个 blob。然后我拆分出标头信息并将 blob 存储为带有 *.webm 扩展名的文件。这些文件虽然是在 iOS 上创建的，但无法在 iOS 上播放。

我正在寻找将此功能集成到我的项目中的最佳方式。

这是点击记录按钮时触发的函数。我想在记录器停止之后和文件写入之前添加新的编码功能。

    async startRecording() {    

    if (navigator.mediaDevices) {

        var chunks = [];
        var stream = await navigator.mediaDevices.getUserMedia({audio: true});
        var microphone = Howler.ctx.createmediastreamsource(stream);
        var streamDest = Howler.ctx.createMediaStreamDestination();
        Howler.masterGain.connect(streamDest);
        microphone.connect(streamDest);
        this.recorder = new MediaRecorder(streamDest.stream);
    
        this.recorder.ondataavailable = (event) => {
          chunks.push(event.data);
        }

        // Fires when Recorder stops
        this.recorder.onstop = () => {

          // Create filename
          let today = new Date();
          let date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
          let time = today.getHours() + "-" + today.getMinutes() + "-" + today.getSeconds();
          let dateTime = date+'-'+time;
          let recFilename = 'Recording-'+dateTime+'.webm';
          
          // Create webm blob
          let recBlob = new Blob(chunks,{'type': 'audio/webm'});
          
          // Reader blob file and cut out header
          const reader = new FileReader;
          reader.readAsDataURL(recBlob); 
          reader.onloadend = async () => {
            
            let result = reader.result as string;
            let resultNoHeader = result.split(',')[1];
            console.log(resultNoHeader);
            
            await Filesystem.writeFile({
              data: resultNoHeader,directory: Directory.Documents,path: recFilename
            });
          }
        }
        this.recorder.start();      
    }
 } 

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）