A web audio player born for podcasts.

View on Github

Listening made easy

Seek to any timestamp listed in your shownotes.

03:05 Some info
04:05 Some other info
anchor.onClick = () => {
    const href = anchor.getAttribute('href')
    const time = formatTime(time)
    instance.seek(time)
    instance.play()
  }

Share audio progress with query string url.

copy 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.

to a random chapter

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.