1

我正在使用 HTML5<audio>元素开发音频播放器，并试图解决一些跨浏览器的问题。

此播放器配置为在单击不同轨道的链接时在音轨之间切换。在内部，它暂停<audio>元素，将其设置currentTime为0（如在 Android 4.0.4 设备本机浏览器中多次播放 HTML5 音频中<audio>所述）并在使用指定的新源轨道创建新元素之前将其从 DOM 中删除。play()在元素上调用该方法以加载曲目并开始播放。

在桌面浏览器、iPhone 和 iPad 上，这可以正常工作。它也适用于同事的三星 Galaxy S3 Mini。然而，在另一部测试手机（全尺寸三星 Galaxy S3）上，后续曲目的播放失败 - 曲目甚至无法播放，并且在播放栏中显示为已播放完毕。我的摩托罗拉 Xoom 平板电脑上的 Android 4.1.2 浏览器也是这种情况。

页面加载时指定的第一个轨道总是可以正常工作。

在 JavaScript 代码中添加了一些调试语句，特别是timeupdate回调函数后，我发现在播放失败的情况下，<audio>元素的值在两个实例中duration的值为1timeupdate。通常，持续时间报告为350到1000多一点，持续时间为 3-4 分钟。这就解释了为什么播放栏会立即将新加载的曲目显示为已完成播放。

我认为后续曲目没有正确加载；即使它之前已经加载并缓存在手机上，肯定它必须能够正确加载。所有曲目均为 MP3，可在各自的浏览器中播放。

我在这里想念什么？知道问题是什么以及如何使它起作用吗？

非常感谢。

更多信息： 我已将其他事件连接到<audio>元素以跟踪可能发生的情况：

  • progress（带有缓冲范围的报告）
  • loadedmetadata
  • canplay
  • error

在桌面（正常工作）上，事件如下：（ timeupdate具有 NaN 持续时间），progressx3（0 缓冲范围）loadedmetadata，，，，持续时间为 121.172368，canplay具有1 个缓冲范围 [0, 11.507715]，后跟一系列 和事件作为曲目继续播放。iPhone 也有类似的事件序列。timeupdateprogresstimeupdateprogress

在三星 S3 上，我收到以下事件：timeupdate持续时间为 1，然后是progress（0 个缓冲范围）、、、，loadedmetadata最后canplay是timeupdate持续时间仍为 1 的事件。

此页面在解释事件和数据结构方面非常有用：http ://www.sitepoint.com/essential-audio-and-video-events-for-html5/

4

2 回答 2

2

好吧，我终于解决了：

  • 首先，我更新了音频实现以<audio>在切换音轨时重用相同的元素，确保在更改之前暂停了音频src等。这可能会或可能不会产生任何积极影响，尽管这是一种保证我们没有'没有太多<audio>元素可能在内存中浮动，特别是如果某些未知手机一次只能处理一个实例。

  • 在切换音轨之前，我添加了一个保护子句来停止任何当前播放的音频，并确保如果没有加载音频，也pause()不会导致错误：currentTime

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

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

<audio>曲目持续时间的误报是元素使用方式存在较大问题的征兆。以前，我已将音频播放器初始化如下：

  1. 创建<audio>元素/设置src为 MP3 曲目的新 URL
  2. 调用元素load()_<audio>
  3. 绑定timeupdate和ended事件
  4. 由于这是自动播放，因此将autoplay属性添加到<audio>元素
  5. 由于这是自动播放，play()因此在<audio>元素上调用

loadedmetadata（用于调试跟踪的、canplay、事件的绑定progress是在上述步骤 1 和 2 之间执行的。）

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

  • 如果设置了属性，则调用play()是多余的；autoplay和
  • 添加autoplay属性应该在load()调用之前发生，因为load()一旦缓冲了足够的数据，就会自动开始播放曲目。

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

  1. 将元素的src属性设置为 MP3 曲目的新 URL<audio>
  2. 绑定timeupdate和ended事件
  3. 由于这是自动播放，因此将autoplay属性添加到<audio>元素
  4. 调用元素load()_<audio>

该play()功能仅在单击播放/暂停按钮或从轨迹栏上的特定位置开始播放时适用。

最后，值得注意的是，在 iOS 设备和某些 Android 设备（取决于浏览器）上，如果将播放器初始化为在页面加载时开始播放，则自动播放将被忽略。在此类设备上，只有当执行可以追溯到点击事件（或类似事件）时，自动播放才会起作用。在更新视觉对象以指示“正在播放”状态时请记住这一点 -canplay事件处理程序似乎是执行此操作的好地方。

于 2013-10-24T04:39:34.227 回答
0

我将完全回答您的问题，因为它对我也很有用 - 如果您有更好的解决方案，请告诉我:)

我将保留每个声音所需的所有元数据的哈希值。此哈希可能只是来自服务器的 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>

现在，当我使用我的声音时，我可以使用：
var html5offset = 1000

var meta = app.sounds.metadata[sound.getAttribute("data-sound")];
var soundduration = meta.duration || sound.duration*html5offset;
于 2013-10-21T18:00:15.160 回答