Difference between revisions of "Audio Element"
Jump to navigation
Jump to search
Line 2: | Line 2: | ||
<html> | <html> | ||
− | < | + | <body onload="initialize()"> |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<div> | <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> | |
− | + | <span>The controls below control the Audio Player above.</span><br/> | |
− | + | <span>The audio player itself only exposes a limited set of functions to keyboard control: </span> | |
− | + | <ul> | |
− | + | <li>play and pause</li> | |
− | + | <li>volume up/down</li> | |
+ | <li>a very coarse seek functionality.</li> | ||
+ | </ul><br/> | ||
+ | <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> | ||
+ | <fieldset> | ||
+ | <legend>Audio Controls</legend> | ||
+ | <table role="presentation"> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <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> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 15:24, 13 July 2015
HTML Audio Element
The controls below control the Audio Player above.
The audio player itself only exposes a limited set of functions to keyboard control:
The controls below expose the total functionality in a cleanly keyboard accessible manner.
These controls may naturally be styled with standard CSS techniques, and the audio player itself could be entirely hidden.
The audio player itself only exposes a limited set of functions to keyboard control:
- play and pause
- volume up/down
- a very coarse seek functionality.
The controls below expose the total functionality in a cleanly keyboard accessible manner.
These controls may naturally be styled with standard CSS techniques, and the audio player itself could be entirely hidden.