plain, self-contained javascript class that shows a compact resolution independant circular player. You can mousewheel/touch-drag to scrub the file. Only once instance on a page plays at a time. No other dependencies.
A circle with a play/pause button. This is a SVG object generated by code. You can determine the progress bar width, and overall theme colour (on white).
include the script in the regular way, then initialise it against all items.
<script src="circularAudioPlayer.js"></script>
<script>
document.querySelectorAll(".mp3").forEach((mp3,index) => {
new CircularAudioPlayer(mp3, mp3.dataset.src, {
size: 32,
lineColor: "#007bff",
lineWidth: 2
});
});
</script>
MIT.