Difference between revisions of "Audio Element"

From Level Access Web Labs
Jump to navigation Jump to search
Line 1: Line 1:
 
=HTML Audio Element=
 
=HTML Audio Element=
  
<html>
+
<html lang="en-us">
<html>
 
 
<head>
 
<head>
<title>Audio example </title>
+
<title>Accessible HTML5 Audio Player Example</title>
<script type="text/javascript">
+
<script type="text/javascript">
function play() {
+
var audioElem;
// document.getElementById("a1").play();
+
//Begin Button Control Code
a1.play();
+
function play()
  var s = document.createElement("span");
+
{
  s.style.color = "red";
+
if (audioElem.paused) {audioElem.play();}
s.appendChild(document.createTextNode("(Invalid)"));
+
else {audioElem.pause();};
document.getElementById("lblpass").appendChild(s);
+
};
 +
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()">
 +
<div>
 +
<audio id="audioElem" controls="" >
 +
<source src="https://upload.wikimedia.org/wikipedia/commons/5/53/Classical_guitar_scale.ogg" type="audio/mpeg">
 +
<!-- Fallback content. In non-HTML5 browsers, this content will be displayed visibly. -->
 +
This HTML5 Audio Element is apparently not supported by your browser.
 +
</audio>
 +
<div>
 +
</div>
  
}
+
<div>
function stop() {
+
<fieldset>
  document.getElementById("a1").pause();
+
<legend>Audio Controls</legend>
  var s = document.createElement("span");
+
<table role="presentation">
  s.style.color = "red";
+
<tr><td>
s.appendChild(document.createTextNode("(Invalid)"));
+
<span><label for="progress">Progress: </label></span><br/>
document.getElementById("lblpass").appendChild(s);
+
<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>
</script>
+
<td>
</head>
+
<span><label id="lblVolume" for="volume" >Volume: </label></span><br/>
<body>
+
<input type="range" id="volume" min="0" max="100" value="100" oninput="volChange()" /><br/>
<p id="p1">Label</p>
+
<button onclick="volUp()">Increase Volume</button><br/>
<audio aria-labelledby="p1" controls="controls" id="a1" title="test is a title">
+
<button onclick="volDown()">Decrease Volume</button>
  <source src="http://www.accessibilityhq.com/type_on_me.mp3" type="audio/mpeg">
+
</td>
  <!-- fallback for non-HTML5 browsers -->
+
<td>
</audio>
+
<button id="bttnMute" onclick="mute()">Mute Volume</button>
<div>
+
</td></tr>
  <label for="uname">Username:</label>
+
</table>
  <input type="text" id="uname" /></div>
+
</fieldset>
  <div>
+
</div>
  <label id="lblpass" for="pass">Password:</label>
 
  <input type="password" id="pass" />
 
  </div>
 
  <div>
 
    <button onclick="play();">Start</button>
 
  </div>
 
  <div>
 
  <button onclick="stop();">Stop</button>
 
  </div>
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 15:35, 13 July 2015

HTML Audio Element

Accessible HTML5 Audio Player Example

Audio Controls