📄️ Data Attributes
The easiest way to use the player is to add data-dhivehigpt-player to a standard ` element. All configuration is read from data-*` attributes on that same element.
📄️ Programmatic API
For full control, skip auto-init and create an AudioPlayer yourself.
📄️ React
@javaabu/dhivehigpt-player/react provides a ` component wrapping AudioPlayer`. Requires React 17+ as a peer dependency (not installed unless you import this subpath).
📄️ Vue
@javaabu/dhivehigpt-player/vue provides a ` component wrapping AudioPlayer`. Requires Vue 3+ as a peer dependency (not installed unless you import this subpath).
📄️ Styling & Theming
The player is intentionally neutral so it can sit on any site, with #39bbb0 (DhivehiGPT teal) as the only accent color. Styling options are deliberately limited to a handful of variants rather than an open-ended theming API, since this is a shared brand element embedded on third-party pages.
📄️ Sticky player
Articles are often long enough that the player scrolls out of view while it's still playing. Enable data-sticky="true" (or sticky
📄️ Using via jsDelivr / CDN / Download
For sites with no JS build step, load the player directly from jsDelivr:
📄️ Alpine.js
The player works with Alpine.js out of the box — no special integration needed for the common case.
📄️ Laravel Livewire
Livewire re-renders components by diffing/morphing the existing DOM against newly-rendered server HTML (via morphdom). Because it doesn't know about the player DOM this library injects next to your `` element, an unguarded Livewire update can strip that injected DOM out from under an active player during a re-render.
📄️ jQuery
@javaabu/dhivehigpt-player/jquery registers $.fn.dhivehigptPlayer, a thin wrapper around the programmatic API. It's a separate entry point from the core player — kept out of the main jsDelivr/CDN script entirely — so sites that don't use jQuery aren't shipped its bytes.
📄️ Svelte
@javaabu/dhivehigpt-player/svelte exports a DhivehiGPTPlayer.svelte component wrapping AudioPlayer.
📄️ Angular
There's no separate @javaabu/dhivehigpt-player/angular package. A full installable Angular library needs Angular's own build tooling (ng-packagr, the Angular compiler) to produce a proper Angular Package Format bundle — a much heavier toolchain than the rest of this library, and not something this project takes on just for one framework.