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>npm i sine-audio-player
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 |