2

我正在尝试通过 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>

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

-谢谢。

4

1 回答 1

4

我假设您已经了解该controls属性并正在选择创建自己的播放器？（在 JSFiddle 上查看）

如果是这种情况，请继续阅读...

如何显示时间线？

我可以想到两个可能的元素，它们是理想的使用（基于语义）。第一个是<input type="range">元素。在这里查看。您可以使用Javascript 中的 DOM 元素的currentTime和属性来定位元素并设置属性的值。duration

5.1 规范说这个元素“带有一个警告，即确切的值并不重要”。对于视频时间线来说，这可能不是真的，对吧？我们绝对希望我们的用户知道确切的价值。尽管如此，规范中的这句话解释了为什么无法显示元素的相关编号。

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

对于我刚刚写的一个小例子，我建议你查看Chris Coyier 对这个想法的实现。总而言之，他使用的 Html 如下所示：

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

然后他只是将输出样式设置css为看起来不错。漂亮，对吧？

随机注释：该元素的 DOM 元素碰巧audio是 HTMLMediaElement 的子元素，在 MDN 上，您会找到一个很好的列表，其中包含所有这些东西的属性和方法。这肯定对构建您自己的音频播放器很有用。HTMLAudioElement本身并没有向它的父级添加太多内容。

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

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

＆如果这个东西是供个人使用或使用 Chrome 或 Safari 的团队，你可以把它变成一个Web 组件，这将是最好的，最面向未来的方法。但是Shadow DOM 的支持仍然很差。

这是正确的静音方法吗？

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

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

其他想法...

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

于 2013-05-31T01:46:28.807 回答