Difference between revisions of "Audio Element"

From Level Access Web Labs
Jump to navigation Jump to search
Line 2: Line 2:
  
 
<html>
 
<html>
−
<head>
+
<body onload="initialize()">
−
<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>
−
  <label for="uname">Username:</label>
+
<audio id="audioElem" controls="" >
−
  <input type="text" id="uname" /></div>
+
<source src="https://upload.wikimedia.org/wikipedia/commons/5/53/Classical_guitar_scale.ogg" type="audio/mpeg">
−
  <div>
+
<!-- Fallback content. In non-HTML5 browsers, this content will be displayed visibly. -->
−
  <label id="lblpass" for="pass">Password:</label>
+
This HTML5 Audio Element is apparently not supported by your browser.
−
  <input type="password" id="pass" />
+
</audio>
−
  </div>
+
<div>
−
  <div>
+
<div>
−
    <button onclick="play();">Start</button>
+
<span>The controls below control the Audio Player above.</span><br/>
−
  </div>
+
<span>The audio player itself only exposes a limited set of functions to keyboard control: </span>
−
  <div>
+
<ul>
−
  <button onclick="stop();">Stop</button>
+
<li>play and pause</li>
−
  </div>
+
<li>volume up/down</li>
 +
<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>

Revision as of 15:24, 13 July 2015

HTML Audio Element

The controls below control the Audio Player above.
The audio player itself only exposes a limited set of functions to keyboard control:
  • play and pause
  • volume up/down
  • a very coarse seek functionality.

The controls below expose the total functionality in a cleanly keyboard accessible manner.
These controls may naturally be styled with standard CSS techniques, and the audio player itself could be entirely hidden.

Audio Controls






Retrieved from "https://labs.levelaccess.com/index.php?title=Audio_Element&oldid=1876"