首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在Safari上从服务器上获取音频文件后,其大小始终是恒定的数字

在Safari上从服务器上获取音频文件后,其大小始终是恒定的数字
EN

Stack Overflow用户
提问于 2021-07-14 18:56:20
回答 1查看 35关注 0票数 1

我正在写录音服务。录制后,我将其发送到API,当用户单击“播放”按钮时,我从API获取该音频文件并播放它。但是由于某些原因,如果我在Safari中录制音频,在API中保存并获取它之后,它只播放整个音频的1秒,因为它的大小始终是常量- 8683。在Chrome中,一切运行正常。

我还应该补充说,在录制之后,我可以成功地播放它。只有在保存记录后才会出现问题。

这是我的录音服务:

代码语言:javascript
运行
复制
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),但是没有成功。

有什么想法吗?

EN

回答 1

Stack Overflow用户

发布于 2021-07-15 20:26:14

在我看来,您的dataavailable处理程序没有被频繁调用。

尝试在.start()中使用时间间隔,如下所示。500每隔500ms请求一次调用。

代码语言:javascript
运行
复制
 this.mediaRecorder.start(500);

并确保重复调用您的dataavaiable处理程序。它可能不会每半秒被调用一次,但它应该被多次调用。

然后,调用this

代码语言:javascript
运行
复制
this.mediaRecorder.requestData();

就在你停止记录之前,确保你得到了最后一块记录的数据。

尽管如此,Safari在媒体方面的实现还是落后于Chrome。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68376764

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档