Lightweight, dependency-free audio player for DhivehiGPT read-aloud audio.
Just data-dhivehigpt-player on a standard <audio> tag.
data-accent="true" — the brand-teal filled skin.
data-dark="true" — or leave it on "auto" (the default) to follow the visitor's OS setting.
Time, speed, and volume controls can each be toggled off individually.
data-speeds="0.5,1,1.5,2,3"
The bar measures its own container width (via CSS container queries, not the viewport), so it reflows the same way in a narrow sidebar as it does on a phone. Below 430px it switches to two rows — seek + time on top, speed/volume/credit on the bottom, both aligned to the play button; below 260px the credit text and volume slider drop to icon-only. Resize your window, or just compare the three widths below.
340px
320px
240px (icon-only)
Press play, then scroll — a second bar animates up from the bottom of the screen and stays there through pause, dismissed only by its stop button. The bar above never moves.