Difference between revisions of "Audio Element"

From Level Access Web Labs
Jump to navigation Jump to search
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
=HTML Audio Element=
 
=HTML Audio Element=
  
<html>
+
<html lang="en-us">
 +
<head>
 +
<title>Accessible HTML5 Audio Player Example</title>
 +
<script type="text/javascript">
 +
var audioElem;
 +
//Begin Button Control Code
 +
function play()
 +
{
 +
if (audioElem.paused) {audioElem.play();}
 +
else {audioElem.pause();};
 +
};
 +
function rePlay()
 +
{
 +
audioElem.currentTime = 0;
 +
audioElem.play();
 +
};
 +
function mute()
 +
{
 +
var bttnMute = document.getElementById("bttnMute");
 +
if (audioElem.muted )
 +
{
 +
document.getElementById('lblVolume').textContent = "Volume: ";
 +
document.getElementById('volume').disabled = false;
 +
document.getElementById('volume').style.visibility = "visible";
 +
bttnMute.textContent = "Mute the Audio";
 +
}
 +
else
 +
{
 +
document.getElementById('lblVolume').textContent = "Volume:  (Muted)";
 +
document.getElementById('volume').disabled = true;
 +
document.getElementById('volume').style.visibility = "hidden";
 +
bttnMute.textContent = "UnMute the Audio";
 +
};
 +
audioElem.muted = !audioElem.muted;
 +
};
 +
function volUp(){audioElem.volume+=0.1;};
 +
function volDown(){audioElem.volume-=0.1;};
 +
//End Button Control code
 +
//Begin Range Slider onChange code
 +
function volChange(){audioElem.volume = document.getElementById('volume').value / 100;};
 +
function seekChange(){audioElem.currentTime = document.getElementById('progress').value;};
 +
//End Range Slider onChange Code
 +
//Begin Event Handler code
 +
function timerWatch(event) {document.getElementById('progress').value = audioElem.currentTime;};
 +
function volumeWatch(event) {document.getElementById('volume').value = audioElem.volume * 100;};
 +
//Setting the logic to change the button labels here, as part of an event handler, keeps the UI responsive and synchronized.
 +
function playWatch(event)
 +
{
 +
var bttnPlay = document.getElementById("bttnPlay");
 +
bttnPlay.textContent = "Pause the Audio";
 +
};
 +
function pauseWatch(event)
 +
{
 +
var bttnPlay = document.getElementById("bttnPlay")
 +
bttnPlay.textContent = "Play the Audio";
 +
};
 +
//End Event Handler Code
 +
//Initialization code for onLoad.
 +
function initialize()
 +
{
 +
audioElem = document.getElementById('audioElem');
 +
audioElem.addEventListener("timeupdate", timerWatch);
 +
audioElem.addEventListener("volumechange", volumeWatch);
 +
audioElem.addEventListener("play", playWatch);
 +
audioElem.addEventListener("pause", pauseWatch);
 +
document.getElementById('progress').setAttribute("max", Math.ceil(audioElem.duration));
 +
document.getElementById('progress').value = audioElem.currentTime;
 +
};
 +
</script>
 +
</head>
 
<body onload="initialize()">
 
<body onload="initialize()">
 
<div>
 
<div>
Line 10: Line 79:
 
</audio>
 
</audio>
 
<div>
 
<div>
 +
</div>
 +
 +
<hr>
 
<div>
 
<div>
<span>The controls below control the Audio Player above.</span><br/>
+
<audio id="audioElem" >
<span>The audio player itself only exposes a limited set of functions to keyboard control: </span>
+
<source src="https://upload.wikimedia.org/wikipedia/commons/5/53/Classical_guitar_scale.ogg" type="audio/mpeg">
<ul>
+
<!-- Fallback content. In non-HTML5 browsers, this content will be displayed visibly. -->
<li>play and pause</li>
+
This HTML5 Audio Element is apparently not supported by your browser.
<li>volume up/down</li>
+
</audio>
<li>a very coarse seek functionality.</li>
+
<div>
</ul><br/>
+
<hr>
<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>
 
<div>
<fieldset>
+
<fieldset style="padding:3px; width: auto; display: inline-block">
<legend>Audio Controls</legend>
+
<legend><b>Audio Controls</b></legend>
<table role="presentation">
+
<table role="presentation">
<tr>
+
<tr>
<td>
+
  <td>
<span><label for="progress">Progress: </label></span><br/>
+
    <span><label for="progress">Progress: </label></span><br/>
<input type="range" id="progress" min="0" max="100" value="0" step="1" oninput="seekChange()" /><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 id="bttnPlay" onclick="play()" data-Val="Play">Play the Audio</button><br/>
<button onclick="rePlay()">Restart the Audio</button>
+
    <button onclick="rePlay()">Restart the Audio</button>
</td>
+
  </td>
<td>
+
<td>
<span><label id="lblVolume" for="volume" >Volume: </label></span><br/>
+
  <span><label id="lblVolume" for="volume" >Volume: </label></span><br/>
<input type="range" id="volume" min="0" max="100" value="100" oninput="volChange()" /><br/>
+
  <input type="range" id="volume" min="0" max="100" value="100" oninput="volChange()" /><br/>
<button onclick="volUp()">Increase Volume</button><br/>
+
  <button onclick="volUp()">Increase Volume</button><br/>
<button onclick="volDown()">Decrease Volume</button>
+
  <button onclick="volDown()">Decrease Volume</button>
</td>
+
</td>
<td>
+
<td>
<button id="bttnMute" onclick="mute()">Mute Volume</button>
+
  <button id="bttnMute" onclick="mute()">Mute Volume</button>
</td>
+
</td>
</tr>
+
</tr>
</table>
+
</table>
 
</fieldset>
 
</fieldset>
 
</div>
 
</div>
 +
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 20:37, 10 September 2021

HTML Audio Element

Accessible HTML5 Audio Player Example



Audio Controls