时间戳

首页 > 解决方案 > 源自数据 url (base64) 的音频标签在播放音频之前不会完全加载

javascript - 源自数据 url (base64) 的音频标签在播放音频之前不会完全加载

问题描述

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

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

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

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

如果它允许我绕过这个问题，我愿意替代使用 base64 数据 url 格式。

感谢您的任何帮助，您可以提供。

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

编辑：我正在生成一个音频剪辑并以两种方式将其分配给音频标签：（1）来自“文件”输入标签（2）来自 MediaRecorder（连接到网络音频 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”文件。我现在要发布一个“解决方案”。

标签： javascripthtmlbase64html5-audio

解决方案

我已确定此问题涉及我使用 MediaRecorder 生成音频剪辑​​，然后将音频剪辑保存到文件中。音频实际上是“webm/opus”格式。MediaRecorder 不支持“wav”或“ogg”（至少在 chrome 中）。此外，由 MediaRecorder 创建的剪辑是不可搜索的，只有在完全播放完至少一次后才能擦除或下载，正如这个 chromium bug中所讨论的那样。

我将寻找另一种录制音频的方法，因为 MediaRecorder 由于 (1) 剪辑不可搜索性 (2) 格式不兼容，目前不足以满足我的需求。

推荐阅读