HTML5 音频播放器：如何通过 HTML 元素而不是 div ID 来 select？

Question

成为 html5 玩家，我正在 "from divs with id's" 向 "simple html elements" 移动。

旧情况（有效）

<audio src="track1.mp3" id="audio"></audio>
<controls>
    <play id="play" style="display:none">PLAY</button>
    <pause id="pause" style="display:none">PAUSE</button>
    <div id="progress"><div id="bar"></div></div>
</controls>

Javascript 通过id为

的div获取元素

var myAudio = document.getElementById('audio');
var play = document.getElementById('play');
var pause = document.getElementById('pause');
... etc

期望的情况（不能完全工作）

<audio src="track1.mp3"></audio>
<controls>
    <play style="display:none">PLAY</play>
    <pause style="display:none">PAUSE</pause>
    <progress><bar></bar></progress>
</controls>

已更新 Javascript，在@grateful 和 @Nathan Montez 的帮助下部分

var myAudio = document.getElementsByTagName('audio')[0];
var play = document.getElementsByTagName('play')[0];
var pause = document.getElementsByTagName('pause')[0];
... etc

新版本进度条不能用了！我们忽略了什么？谢谢！

Answer 1

document.getElementsByTagName('audio') 将 return 一个数组，即使它的长度只有 1。你需要这样做：

document.getElementsByTagName('audio')[0];

Answer 2

将评论移至答案：

从标签中删除双引号。

目前是<progress"></progress> 它应该显示为 <progress></progress>

更新：

我认为您的问题的原因是元素解析为 HTMLUnknownElements。因此，您可能需要使用 Google Polymer 之类的东西来提供您正在寻找的功能。我认为您不能像这样直接使用未知元素，因为它们与原生 HTMLElement 对象不同 API。

HTML5 音频播放器：如何通过 HTML 元素而不是 div ID 来 select？

HTML5 Audio Player: How to select by HTML elements instead of div ID's?

html

javascript

code-cleanup

getelementsbyname

html5-audio