Seek control

Seek to any timestamp listed in your show notes.

anchor.addEventListener('click', (e) => {
    const href = e.target.getAttribute('href')
    const time = formatTime(href)
    instance.seek(time)
    instance.play()
  })

Synced timestamp

Share audio progress with query string url.

window.onload = () => {
    const hash = window.location.hash
    const time = formatTime(hash)
    instance.seek(time)
  }

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

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.

Dark mode

Choose among auto dark light .

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.