Difference between revisions of "Audio Element"

From Level Access Web Labs
Jump to navigation Jump to search
 
(2 intermediate revisions by 2 users not shown)
Line 81: Line 81:
 
</div>
 
</div>
  
<div style="border: 5px inset #000000 ;padding:3px; width: auto; display: inline-block">
+
<hr>
<fieldset style="border:none">
+
<div>
<legend>Audio Controls</legend>
+
<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>
 +
<fieldset style="padding:3px; width: auto; display: inline-block">
 +
<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