如何解决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 举报,一经查实,本站将立刻删除。