A web audio player born for podcasts.

View on Github

Listening made easy

Seek control

Seek to any timestamp listed in your show notes.

03:05 Some info
04:05 Some other info
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.

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

to a random chapter

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.