HTML5音频播放器：如何通过HTML元素而不是div ID来选择？ [英] HTML5 Audio Player: How to select by HTML elements instead of div ID's?

问题描述

制作一个html5播放器，我将从带有id的div转向简单的html元素。

旧情况 （作品）

 < audio src =track1.mp3id =audio>< / audio> 
<控制> 
 < pause id =pausestyle =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> < /音频> 
<控制> 
< play style =display：none> PLAY< / play> 
< pause style =display：none> PAUSE< / pause> 
< progress>< bar>< / bar>< / progress> 
< / controls> 
  

在@grateful& @Nathan Montez 部分

  var myAudio = document.getElementsByTagName（'audio' ）[0]; 
 var play = document.getElementsByTagName（'play'）[0]; 
 var pause = document.getElementsByTagName（'pause'）[0]; 
 ... etc 
  

在新版本中，进度条不起作用！我们忽略了什么？谢谢！

解决方案

document.getElementsByTagName（'audio'） will return一个数组，即使它只有1的长度。您需要这样做：

  document.getElementsByTagName（'audio' ）[0]; 
  

Making an html5 player, I'm moving away "from divs with id's" towards "simple html elements".

Old Situation (works)

<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 gets elements by divs with an id

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

---

Desired Situation (doesn't work fully)

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

Updated Javascript, after help of @grateful & @Nathan Montez works partially

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

In the new version the progress bar does not work! What have we overlooked? Thanks!

解决方案

document.getElementsByTagName('audio') will return an array, even if it only has a length of 1. You need to do this:

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

这篇关于HTML5音频播放器：如何通过HTML元素而不是div ID来选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！