我正在尝试通过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>
但是如何在那里显示时间表？这是我申请“静音”选项的正确方法吗？
-Thanks。
答案 0 :(得分：3)
我假设您已经了解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。
HTMLMediaElement没有静音方法，所以，是的，你需要编写一些像这样的脚本来执行此操作。
内联Javascript通常不受欢迎。为什么不将所有内容都移到外部文件中，或者至少一个脚本标记，以便它更易于管理？你甚至可以编写一个插件来使它全部模块化和填充。