音频标签来源为 data-url (base64) 在播放音频之前未完全加载

Question

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

问题是音频标签在音频剪辑完全播放一次后才会处理数据。此问题在标签上显示为 (1) 缺少音频长度，(2) 禁用的时间洗涤器和 (3) 3 点图标未显示。这些功能会在音频剪辑首次播放后立即出现。

我需要一种方法来让音频标签在分配后立即处理音频剪辑。用户需要能够使用时间洗涤器下载音频和快进，而不必被迫播放整个音频剪辑。

我已经广泛搜索了这个问题的解决方案。我试过 audioTag.preload = "auto"; 并在分配 src 后调用 audioTag.load();。我还让它静置了 15 分钟，以防它只是加载缓慢。

我愿意接受使用 base64 数据 url 格式的替代方法，如果它能让我绕过这个问题的话。

感谢您提供的任何帮助。

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

编辑：我正在生成音频剪辑并以两种方式将其分配给音频标签：(1) 来自 'file' 输入标签 (2) 来自 MediaRecorder（连接到网络音频 api）。

这里是 'file' 输入标签加载：

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' 是 MediaRecorder 在 chrome 上唯一可用的录制选项（firefox 也允许 'ogg'）。没有 'wav' 文件支持。我现在要post一个"solution"。

Answer 1

我确定此问题涉及我使用 MediaRecorder 生成音频剪辑，然后将音频剪辑保存到文件。音频实际上是 'webm/opus' 格式。 MediaRecorder 不支持 'wav' 或 'ogg'（至少在 chrome 中）。此外，由 MediaRecorder 创建的剪辑是不可搜索的，只有在它们至少完整播放一次后才能被擦除或下载，如 this chromium bug.

中所述。

我将寻找一种替代方法来录制音频，因为 MediaRecorder 目前无法满足我的需求，原因是 (1) 无法找到剪辑 (2) 格式不兼容。

音频标签来源为 data-url (base64) 在播放音频之前未完全加载

Audio tag sourced to a data-url (base64) is not fully loaded until audio is played

html

javascript

base64

html5-audio