JSFiddle - React, Tailwind, and code Playground

by jessuni

HTML

<script src="https://cdn.jsdelivr.net/npm/shikwasa@latest/dist/shikwasa.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shikwasa@latest/dist/shikwasa.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/shikwasa.chapter.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/shikwasa.chapter.min.css">
<div class="container-1"></div>
<div class="container-2"></div>

CSS

.container-1,
.container-2 {
  padding-top: 400px;
}

JavaScript

const chapters = [
  { title: 'First Chapter', startTime: 0, endTime: 2 },
  { title: 'Second Chapter', startTime: 2, endTime: 4 },
]

Shikwasa.use(Chapter)

const firstPlayer = new Shikwasa({
  container: document.querySelector('.container-1'),
  themeColor: '#000000',
  audio: {
    title: 'Episode title',
    artist: 'Shikwasa',
    cover: 'https://shikwasa.js.org/assets/logo-contrast.svg',
    src: 'https://shikwasa.js.org/assets/Minyo_San_Kyoku.mp3',
    chapters,
  }
})

const secondPlayer = new Shikwasa({
  container: document.querySelector('.container-2'),
  themeColor: '#000000',
  audio: {
    title: 'Episode title',
    artist: 'Shikwasa',
    cover: 'https://shikwasa.js.org/assets/logo-contrast.svg',
    src: 'https://shikwasa.js.org/assets/Minyo_San_Kyoku.mp3',
    chapters,
  }
})