如何为 html5 音频播放器创建自定义时间线？

Question

我正在尝试通过 javascript 创建自己的 html5 音频播放器。我有 htm5 音频播放器的播放、暂停和音量选项，例如：

<audio id="playe" src="song.ogg"></audio>
<div>
<button onclick="document.getElementById('playe').play()">Play</button>
<button onclick="document.getElementById('playe').pause()">Pause</button>
<button onclick="document.getElementById('playe').volume += 0.1">Vol+ </button>
<button onclick="document.getElementById('playe').volume -= 0.1">Vol- </button>
<button onclick="if(document.getElementById('playe').volume == 0){document.getElementById('playe').volume += 1.0;}else{document.getElementById('playe').volume = 0;}">Mute</button>
</div>

但是我怎样才能在那里显示时间线？这是我应用的“静音”选项的正确方法吗？

-谢谢。

Answer 1

我假设您已经知道controls 属性并且正在选择创建自己的播放器？ (View on JSFiddle)

如果是这样，请继续阅读...

如何显示时间线？

我可以想到两个可能的元素，它们会非常适合使用（基于语义）。第一个是<input type="range"> 元素。 View it here. 您可以在 JavaScript 中使用 DOM 元素的 currentTime 和 duration 属性定位元素并设置属性值。

5.1 规范说这个元素来自“with the caveat that the exact value is not important”。对于视频时间线来说，这可能不是真的，对吧？我们绝对希望我们的用户知道确切的价值。不过，规范中的这句话解释了为什么无法显示元素的相关编号。

但我们当然可以在单独的元素中显示时间，有点像 Youtube 不会在滑块上显示时间（除非您将其悬停在上面）。为此，我们应该使用output 元素。它应该被使用 'for the result of a calculation'，并且隐含地使用 另一个 Html 元素的计算结果。这就是它具有for 属性的原因；它将它“绑定”到另一个元素的值。在这种情况下，我们将 for 设为我们的范围输入标识符。

关于我刚刚写的一个小例子，我建议你查看Chris Coyier's implementation of this idea。综上所述，他使用的 Html 是这样的：

<input type="range" name="foo">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>

然后他只是用css 为输出设置样式以看起来不错。很漂亮吧？

随机注意：audio 元素的 DOM 元素碰巧是 HTMLMediaElement 的子元素，而over at the MDN 你会发现这些东西的所有属性和方法的一个很好的列表。这肯定对构建您自己的音频播放器很有用。 HTMLAudioElement 本身并没有给它的父级增加太多。

范围输入的问题在于它是一个 Html 小部件，它最肯定地利用了 Shadow DOM，因此现在对其进行样式设置非常困难（事实上，除了maybe Chrome 之外的所有浏览器都不可能）。

如果您确实需要设置范围输入的外观样式，您将获得的最大控制权是使用模仿行为的 Javascript 小部件。你知道，将一堆 Html 元素放在一起，使它们看起来像一个范围输入，然后用 Js 将功能连接到其中。

& 如果这个东西是供个人使用或团队使用 Chrome 或 Safari，你可以把它设为 Web Component，这将是最好的，也是最适合未来的方式。但是 Shadow DOM 仍然是 poorly supported。

这是正确的静音方式吗？

HTMLMediaElements 没有静音方法，所以，是的，你需要编写一些类似的脚本来做到这一点。

不过，我可能会更改脚本的工作方式。我认为用户在静音时习惯于“保存”音量，然后在取消静音时返回该值。现在，您的脚本没有这种行为。我肯定会添加它！

其他想法...

内联 Javascript 通常不受欢迎。为什么不将所有内容都移到一个外部文件中，或者至少一个脚本标签，这样它更易于管理？您甚至可以编写一个插件来使其全部模块化。