我正在写录音服务。录制后,我将其发送到API,当用户单击“播放”按钮时,我从API获取该音频文件并播放它。但是由于某些原因,如果我在Safari中录制音频,在API中保存并获取它之后,它只播放整个音频的1秒,因为它的大小始终是常量- 8683。在Chrome中,一切运行正常。
我还应该补充说,在录制之后,我可以成功地播放它。只有在保存记录后才会出现问题。
这是我的录音服务:
export class VoiceRecorder {
public recording: boolean = false;
private stream: MediaStream;
// @ts-ignore
private mediaRecorder: MediaRecorder;
// @ts-ignore
private audioChunks: BlobPart[] = [];
public start(): Observable<void> {
this.recording = true;
this.audioChunks = [];
return new Observable(observer => {
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
this.stream = stream
// @ts-ignore
this.mediaRecorder = new MediaRecorder(this.stream);
// @ts-ignore
this.mediaRecorder.addEventListener("dataavailable", (event: BlobEvent) => {
this.audioChunks.push(event.data);
});
this.mediaRecorder.start();
observer.next();
observer.complete();
}, (error: DOMException) => {
this.recording = false;
observer.error(error.message);
observer.complete();
});
});
}
public stop(): Observable<IVoiceFile> {
if (this.mediaRecorder.state === 'inactive') {
return of(null);
}
return new Observable<IVoiceFile>(observer => {
this.mediaRecorder.addEventListener("stop", () => {
const audioBlob = new Blob(this.audioChunks, { type: 'audio/mpeg' });
const audioUrl = URL.createObjectURL(audioBlob);
const audio = new Audio(audioUrl);
this.stream.getTracks().forEach(track => track.stop());
observer.next({ audioBlob, audioUrl });
this.mediaRecorder = null;
this.stream = null;
this.recording = false;
observer.complete();
});
this.mediaRecorder.stop();
});
}
}
我已经尝试过改变音频格式( audio /ogg,audio/weba,audio/webm,audio/mp3,audio/aac,audio/acc),但是没有成功。
有什么想法吗?
发布于 2021-07-15 20:26:14
在我看来,您的dataavailable处理程序没有被频繁调用。
尝试在.start()中使用时间间隔,如下所示。500每隔500ms请求一次调用。
this.mediaRecorder.start(500);
并确保重复调用您的dataavaiable处理程序。它可能不会每半秒被调用一次,但它应该被多次调用。
然后,调用this
this.mediaRecorder.requestData();
就在你停止记录之前,确保你得到了最后一块记录的数据。
尽管如此,Safari在媒体方面的实现还是落后于Chrome。
https://stackoverflow.com/questions/68376764
复制相似问题