Online demo

Sine Audio Player

Installation

Download repository ZIP.

Alternatively, you can load it from CDN:

<script src="https://cdn.jsdelivr.net/gh/tharunbirla/sine-audio-player/dist/sine-audio-player.min.js"></script>

Include the sine-audio-player.min.js file:

<script src="{path}/dist/sine-audio-player.min.js"></script>

Add <sine-player> tag between your HTML <body></body> tag. You add the attributes mentioned bellow in the table.

<sine-player src="your-audio.mp3"></sine-player>

You can add multiple players on a single page.

Option	Description	Values	Default
src	Specifies the URL of the audio file.	`URL`	`-`
muted	Specifies that the audio output should be muted.	`true`, `false`	`false`
preload	Specifies if and how the author thinks the audio should be loaded when the page loads.	`none`,`auto`,`metadata`	`false`
autoplay	Specifies that the audio will start playing as soon as it is ready.	`autoplay`	`false`
buffer-percentage	Specifies how much audio data must be rendered as soon as the user load the page	`number`	`50`

Other default options: | Options | Default | |---------|---------| | Volume | 100% | | Preview Volume | 50% |

You can focus on player elements with Tab key and use the following keys to use the player controls.

Key	Action
Tab	Focus on the next element
Shift + Tab	Focus on the previous element
Enter or Spacebar	Pause/Play
Right Arrow	Fast-forward
Left Arrow	Rewind
Enter or Spacebar	Show/hide volume slider
Up Arrow, Left Arrow	Increase volume
Down Arrow, Right Arrow	Decrease volume