Difference between revisions of "Audio Element"

From Level Access Web Labs
Jump to navigation Jump to search
(Created page with "=HTML Audio Element= <html> <head> <title>Audio example </title> <script type="text/javascript"> function play() { // document.getElementById("a1").play(); a1.play(); var ...")
 
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
=HTML Audio Element=
 
=HTML Audio Element=
  
<html>
+
<html lang="en-us">
 
<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>
 +
 
 +
<hr>
 +
<div>
 +
<audio id="audioElem" >
 +
<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>
 +
<hr>
  
}
+
<div>
function stop() {
+
<fieldset style="padding:3px; width: auto; display: inline-block">
  document.getElementById("a1").pause();
+
<legend><b>Audio Controls</b></legend>
   var s = document.createElement("span");
+
<table role="presentation">
   s.style.color = "red";
+
<tr>
s.appendChild(document.createTextNode("(Invalid)"));
+
  <td>
document.getElementById("lblpass").appendChild(s);
+
    <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>
  
}
 
</script>
 
</head>
 
<body>
 
<p id="p1">Label</p>
 
<audio aria-labelledby="p1" controls="controls" id="a1" title="test is a title">
 
  <source src="clip.mp3" type="audio/mpeg">
 
  <!-- fallback for non-HTML5 browsers -->
 
</audio>
 
<div><label for="uname">Username:</label><input type="text" id="uname" /></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>
 +
 +
[[Category:HTML5]]
 +
[[Category:Elements]]

Latest revision as of 20:37, 10 September 2021

HTML Audio Element

Accessible HTML5 Audio Player Example



Audio Controls