Javascript HTML5音频元素-某些Android浏览器歪曲了曲目长度

我正在使用HTML5开发一个音频播放器（HTML5

），并在新的
之前将其从DOM中删除。我将完全回答您的问题，因为它对我也很有用-如果您有更好的解决方案，请让我知道：）

我将保留每个声音所需的所有元数据的散列。此哈希可能只是来自服务器的json响应-例如：

app.sounds.metadata = {
    "enter the sandman": {
        "artist": "Metaliica",
        "album": "Metallica.",
        "description": "Lorem ipsum dolor sit amet."
        "genre": "metal",
        "duration": 19920,
        "playcount": 312
    },
    "piano man": {
        "artist": "Billy Joel",
        "album": "You're my home",
        "description": "Lorem ipsum dolor sit amet."
        "genre": "Soft rock",
        "duration": 16200,
        "playcount": 135,

    }
}

我的音频元素将被声明为：

<audio data-sound="piano man">
    <source src="piano_man.ogg" type="audio/ogg">
    <source src="piano_man.mp3" type="audio/mpeg">
</audio>

我终于解决了这个问题：


首先，我更新了音频实现，以便在切换曲目时重用相同的
元素，确保在更改
src
等之前暂停音频。这可能会或可能不会产生任何积极影响，尽管这是一种保证内存中不会有太多潜在浮动的
元素的方法，特别是当某部未知手机一次只能处理一个实例时
在切换曲目之前，我添加了一个guard子句来停止任何当前播放的音频，并确保在没有加载音频的情况下，
pause（）
或设置
currentTime
都不会导致错误：

if (audioPlayerElement.readyState > 0)
{
    audioPlayerElement.pause();
    audioPlayerElement.currentTime = 0;
}


由于后续曲目是自动播放的，因此需要修改语句的顺序


曲目持续时间的误报是
元素使用方式中一个更大问题的症状。在此之前，我对音频播放器进行了如下初始化：

创建
元素/将
src
设置为MP3曲目的新URL
在
元素上调用
load（）
绑定
timeupdate
和
end
事件
由于这是一个自动播放，因此在
元素中添加了
autoplay
属性
因为这是一个自动播放，在
元素上称为
play（）
（用于调试跟踪的
loadedmetadata
、
canplay
、
progress
事件的绑定在上述步骤1和步骤2之间执行。）

我在这个序列中发现的问题是：


如果设置了
autoplay
属性，则调用
play（）
是多余的；及
添加
autoplay
属性应该在调用
load（）
之前进行，因为
load（）
一旦缓冲了足够的数据，就会自动开始播放曲目

因此，工作的最后步骤是：

将
元素的
src
属性设置为MP3曲目的新URL
绑定
timeupdate
和
end
事件
由于这是一个自动播放，请将
自动播放
属性添加到
元素
在
元素上调用
load（）
play（）
功能仅在单击播放/暂停按钮或从轨迹栏上的特定位置开始播放时适用

最后，值得注意的是，在iOS设备和一些Android设备（取决于浏览器）上，如果播放器初始化为在页面加载时开始播放，则自动播放将被忽略。在这样的设备上，只有当执行可以追溯到点击事件（或类似事件）时，自动播放才会起作用。更新视觉效果以指示“播放”状态时，请记住这一点。
canplay
事件处理程序似乎是执行此操作的好地方。
为什么要使用播放时间等待删除元素，而不是使用声音播放结束后触发的
end
事件？我没有打开曲目
timeupdate
；我更新了问题，试图澄清这一点。由于曲目长达几分钟，网站访问者可能会在播放过程中通过单击相应的曲目链接在曲目之间切换。我已经让
事件结束了
来处理这个案子，虽然在我所指的场景中没有出现此事件。我正在查看soundmanager2中的持续时间是如何获得的，但看起来他们也没有真正的解决方案：您可以检查持续时间是否无效，然后通过ajax从服务器获取持续时间吗？我的印象是
duration
是根据MP3本身的
loadedmetadata
事件计算的。这似乎也依赖于浏览器——同样3:24长的曲目在iPhone上的持续时间为205.4008，但在Galaxy S3上的持续时间为946.4950。感谢您的帮助。我发现，误传的持续时间是更深层次问题的一个症状——详见我的答案。
if (audioPlayerElement.readyState > 0)
{
    audioPlayerElement.pause();
    audioPlayerElement.currentTime = 0;
}