Difference between revisions of "Audio Element"

From Level Access Web Labs
Jump to navigation Jump to search
Line 2: Line 2:
  
 
<html>
 
<html>
<body onload="initialize()">
+
<html>
 +
<head>
 +
<title>Audio example </title>
 +
<script type="text/javascript">
 +
function play() {
 +
//  document.getElementById("a1").play();
 +
a1.play();
 +
  var s = document.createElement("span");
 +
  s.style.color = "red";
 +
s.appendChild(document.createTextNode("(Invalid)"));
 +
document.getElementById("lblpass").appendChild(s);
 +
 
 +
}
 +
function stop() {
 +
  document.getElementById("a1").pause();
 +
  var s = document.createElement("span");
 +
  s.style.color = "red";
 +
s.appendChild(document.createTextNode("(Invalid)"));
 +
document.getElementById("lblpass").appendChild(s);
 +
 
 +
}
 +
</script>
 +
</head>
 +
<body>
 +
<p id="p1">Label</p>
 +
<audio aria-labelledby="p1" controls="controls" id="a1" title="test is a title">
 +
  <source src="http://www.accessibilityhq.com/type_on_me.mp3" type="audio/mpeg">
 +
  <!-- fallback for non-HTML5 browsers -->
 +
</audio>
 
<div>
 
<div>
<audio id="audioElem" controls="" >
+
  <label for="uname">Username:</label>
<source src="https://upload.wikimedia.org/wikipedia/commons/5/53/Classical_guitar_scale.ogg" type="audio/mpeg">
+
  <input type="text" id="uname" /></div>
<!-- Fallback content. In non-HTML5 browsers, this content will be displayed visibly. -->
+
  <div>
This HTML5 Audio Element is apparently not supported by your browser.
+
  <label id="lblpass" for="pass">Password:</label>
</audio>
+
  <input type="password" id="pass" />
<div>
+
  </div>
<div>
+
  <div>
<span>The controls below control the Audio Player above.</span><br/>
+
    <button onclick="play();">Start</button>
<span>The audio player itself only exposes a limited set of functions to keyboard control: </span>
+
  </div>
<ul>
+
  <div>
<li>play and pause</li>
+
  <button onclick="stop();">Stop</button>
<li>volume up/down</li>
+
  </div>
<li>a very coarse seek functionality.</li>
 
</ul><br/>
 
<span>The controls below expose the total functionality in a cleanly keyboard accessible manner.</span><br/>
 
<span>These controls may naturally be styled with standard CSS techniques, and the audio player itself could be entirely hidden.</span>
 
</div>
 
<br/>
 
<div>
 
<fieldset>
 
<legend>Audio Controls</legend>
 
<table role="presentation">
 
<tr>
 
<td>
 
<span><label for="progress">Progress: </label></span><br/>
 
<input type="range" id="progress" min="0" max="100" value="0" step="1" oninput="seekChange()" /><br/>
 
<button id="bttnPlay" onclick="play()" data-Val="Play">Play the Audio</button><br/>
 
<button onclick="rePlay()">Restart the Audio</button>
 
</td>
 
<td>
 
<span><label id="lblVolume" for="volume" >Volume: </label></span><br/>
 
<input type="range" id="volume" min="0" max="100" value="100" oninput="volChange()" /><br/>
 
<button onclick="volUp()">Increase Volume</button><br/>
 
<button onclick="volDown()">Decrease Volume</button>
 
</td>
 
<td>
 
<button id="bttnMute" onclick="mute()">Mute Volume</button>
 
</td>
 
</tr>
 
</table>
 
</fieldset>
 
</div>
 
 
</body>
 
</body>
 +
</html>
 
</html>
 
</html>
  
 
[[Category:HTML5]]
 
[[Category:HTML5]]
 
[[Category:Elements]]
 
[[Category:Elements]]

Revision as of 15:24, 13 July 2015

HTML Audio Element

Audio example

Label

</html>