Question

我有一个应用程序，可以在运行时将音频剪辑动态加载到音频标签中。它通过将音频转换为base64数据URL并将其分配给标签的src属性来实现此目的。

问题在于，音频标签在之后完全播放一次之后才处理数据。此问题在标签上显示为（1）音频长度不足，（2）禁用的时间清理器和（3）3点图标未显示。这些功能执行会在首次播放音频剪辑后立即出现。

我需要一种获取音频标签的方法，以便在分配音频剪辑后立即对其进行处理。用户需要能够使用时间清理器下载音频并快进，而不会被迫在整个音频片段中播放。

我已经在广泛地寻找解决方案。分配src后，我尝试了audioTag.preload = "auto";并调用audioTag.load();。如果加载速度太慢，我还可以让它静置15分钟。

如果允许我绕过此问题，我可以选择使用base64数据URL格式。

感谢您提供的任何帮助。

编辑：我在Chrome 80和Firefox 75中看到此问题。

编辑：我正在以两种方式生成音频剪辑并将其分配给音频标签：（1）来自“文件”输入标签（2）来自MediaRecorder（已连接到Web音频api）。

以下是“文件”输入标签的加载状态：

const reader = new FileReader();
reader.onload = () =>
{
    const audioTag = document.getElementById("audioTag");
    audioTag.preload = "auto";
    audioTag.src = reader.result;
    audioTag.load();
};
reader.readAsDataURL(fileInputTag.files[0]);

这是MediaRecorder正在加载：

mediaRecorder.onstop = () =>
{
    const blob = new Blob(audioChunks, {type : "audio/wav"});
    let reader = new FileReader();
    reader.onload = () =>
    {
        let audioTag = document.getElementById("rec");
        audioTag.preload = "auto";
        audioTag.src = reader.result;
        audioTag.load();
    };
    reader.readAsDataURL(blob);
};

我刚刚确定打开以audacity创建的wav文件可以正常工作。仅当打开从MediaRecorder中保存的音频文件时，才会显示该问题。

我确定MediaRecorder实际上是在生成“ webM / opus”文件，而不是“ wav”文件。研究强烈建议'webM'是chrome上MediaRecorder可用的唯一录制选项（firefox也允许'ogg'）。没有“ wav”文件支持。我现在要发布一个“解决方案”。

Answer 1

我已确定此问题涉及我使用MediaRecorder生成音频剪辑，然后将音频剪辑保存到文件。音频实际上是“ webm / opus”格式。 MediaRecorder不支持“ wav”或“ ogg”（至少在chrome中）。而且，如this chromium bug中所述，MediaRecorder创建的剪辑不可搜索，并且只能在至少播放完至少一次后才能进行擦洗或下载。

由于（1）剪辑不可见（2）格式不兼容，MediaRecorder当前不足以满足我的需求，因此我将寻找一种录制音频的替代方法。

在播放音频之前，未完全加载源自数据URL（base64）的音频标签

1 个答案: