如何在不加载 js 的情况下获得音频的持续时间答案

【问题标题】：how can i get audio's duration without getting loaded in js如何在不加载 js 的情况下获得音频的持续时间
【发布时间】：2021-04-25 20:36:25
【问题描述】：

让我们想象一下，如果我正在构建一个音乐播放器，好吗？实际上我做到了，但是当我尝试获取歌曲列表并获取它们的持续时间时遇到了一个问题，我必须为每首歌曲创建音频元素，这会浪费大量数据所以在纯js代码或其他没有静态编写持续时间的情况下？这是我的代码

    songs.map((song) => {
        if(!song.hasOwnProperty("duration")){
            let aud = new Audio();
            aud.src = `audios/${song.audioName}.mp3`
            aud.addEventListener('loadedmetadata',() => {
                let durationAud = aud.duration;
                song.duration = durationAud;
            })
        }
    })

}

【问题讨论】：

您必须阅读MP3 header structure 才能知道您在做什么（或尝试在Google 中搜索一些JS MP3 header parser 库）。无论如何...要获得持续时间，您必须检查前 4 个字节，因为这是单个 MP3 frame 的标头（并进行大量位提取和计算）。找出以字节长度为单位的帧大小，并将其与文件总字节长度相比较来计算存在多少帧。一个 MPEG 音频帧包含 X 毫秒的声音（取决于 MP3 类型），因此您可以通过知道总帧数来了解持续时间。
PS：如果您可以制作一个将 MP3 的前四个字节（二进制数据）读入arrayBuffer 的演示代码，那么我可以帮助您从 4 个字节中提取持续时间。您需要拨打XMLHttpRequest 或fetch 来获取文件字节数。

标签： javascript audio html5-audio avaudioplayer

【解决方案1】：

您可以通过在数据库中使用音频文件的元数据创建一行来解决此问题。然后，您可以通过 AJAX 调用在前端请求该数据。

【讨论】：