Listening made easy
Seek to any timestamp listed in your shownotes.
Share audio progress with query string url.
shikwasa.js.org/#t=06:05
to the address bar of a new browser tab
window.onload = () => {
const hash = window.location.hash
const time = formatTime(hash)
instance.seek(time)
}
Chapters
Better than shownotes! Always let users know where they are by the highlighted chapter.
const instance = new Shikwasa({
audio: {
src: '...',
chapters: [
{
title: 'Final Q&A',
startTime: 2300,
endTime: 4500,
},
]
},
})
Jump to the desired chapter in no time with updateChapter
.
If the chapter data is unknown to you, but the audio file has id3tagv2-chapters data, we support reading and organizing chapter data with a little help of an external library. Learn more
Accessibility aware
Keyboard control
Seek to audio position with → ← PageUp PageDown Home End , or simply play around with Tab Space ⏯︎ (⏯︎ control requires specifying an audio source first) .
Bonus: The focus outline is visible only when you navigates with a keyboard.
ARIA support
Visually impaired people deserve an accessible listening experience. ARIA markup, check.
Theme
Dark mode
Choose among .
Theme color
Blend it in with your site. Any color.
More...
- No dependencies
- Audio element not existing in DOM
- Notice how the other player automatically paused when a new player starts playing? Shikwasa has full of these delightful details.