Shikwasa demo

using shikwasa@latest

by jessuni

HTML

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

JavaScript

const player = new Shikwasa({
  container: document.querySelector('.container'),
  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',
    src: 'https:\/\/media.blubrry.com\/1051771\/d1nz8yczgon8of.cloudfront.net\/episodes\/EP11.mp3',
  }
})


player.on('durationchange', () => {
console.log('durationchange', player.audio.duration, player.duration)})

player.on('loadeddata', () => {
console.log('loadeddata', player.audio.duration, player.duration)})

player.on('progress', () => {
console.log('progress', player.audio.duration, player.duration)} )

player.on('loadedmetadata', () => {
console.log('loadedmetadata', player.audio.duration, player.duration)} )