Difference between revisions of "Audio Element"

From Level Access Web Labs
Jump to navigation Jump to search
 
(One intermediate revision by the same user not shown)
Line 80: Line 80:
 
<div>
 
<div>
 
</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>
 
<div>
Line 85: Line 95:
 
<legend><b>Audio Controls</b></legend>
 
<legend><b>Audio Controls</b></legend>
 
<table role="presentation">
 
<table role="presentation">
<tr><td>
+
<tr>
<span><label for="progress">Progress: </label></span><br/>
+
  <td>
<input type="range" id="progress" min="0" max="100" value="0" step="1" oninput="seekChange()" /><br/>
+
    <span><label for="progress">Progress: </label></span><br/>
<button id="bttnPlay" onclick="play()" data-Val="Play">Play the Audio</button><br/>
+
    <input type="range" id="progress" min="0" max="100" value="0" step="1" oninput="seekChange()" /><br/>
<button onclick="rePlay()">Restart the Audio</button>
+
    <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>
 
<td>
 
<td>
<span><label id="lblVolume" for="volume" >Volume: </label></span><br/>
+
  <button id="bttnMute" onclick="mute()">Mute Volume</button>
<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>
<td>
+
</tr>
<button id="bttnMute" onclick="mute()">Mute Volume</button>
 
</td></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