A simple circular HTML5 audio player.
Features:
- Circular Progress Bar
- Play/Pause-Button
- clickable text below the player UI, starts audio from beginning
- 30fps update frequency
Usage:
- Reference the CSS and JavaScript file in your html:
<link rel="stylesheet" type="text/css" media="screen" href="audio-player.css" />
<script src="audio-player.js"></script>
- Place the audio player and the UI in your HTML:
<audio>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
Sadly, your browser doesn't support audio playback :(
</audio>
<div class="audio-player">
<div class="audio-player-back-ring"></div>
<div class="audio-player-back-ring-center"></div>
<div class="audio-player-progress-ring">
<div class="audio-player-progress-segment audio-player-progress-segment-1" style="display: none;"></div>
<div class="audio-player-progress-segment audio-player-progress-segment-2" style="display: none;"></div>
<div class="audio-player-progress-segment audio-player-progress-segment-3" style="display: none;"></div>
<div class="audio-player-progress-segment audio-player-progress-segment-4" style="display: none;"></div>
<div class="audio-player-progress-ring-center"></div>
</div>
<div class="audio-player-controls">
<img src="Play-Icon.svg" alt="Tastatur-Demo abspielen" class="audio-player-button">
</div>
</div>
<p class="audio-player-text">Listen!</p>
Dependencies:
- jquery