Listening made easy
Seek control
Seek to any timestamp listed in your show notes.
Synced timestamp
Share audio progress with query string url.
shikwasa.js.org/#t=06:05
to the address bar of a new browser tab to witness the magic.
window.onload = () => {
const hash = window.location.hash
const time = formatTime(hash)
instance.seek(time)
}
Chapters
Interactive chapters
Better than show notes! Always let the audience know where they are by the highlighted chapter.
import { Player, Chapter } from 'shikwasa'
Shikwasa.use(Chapter)
const player = new Player({
audio: {
src: '...',
chapters: [
{
title: 'Final Q&A',
startTime: 2300,
endTime: 4500,
},
]
},
})
Jump to the desired chapter in no time with updateChapter
.
Track content popularity
Know what your audience cares about.
instance.on('chapterchange', (newChapter, oldChapter) => {
recordAudienceBehavior(newChapter, oldChapter)
})
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.
Customization
Although we'd like to keep things simple for you, feel free to get your hands dirty.
More...
- No dependencies
- Audio element not existing in DOM
- Live audio stream support
- Notice how the other player automatically paused when a new player starts playing? Shikwasa has full of these delightful details.