JSFiddle - React, Tailwind, and code Playground

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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">hello
  <div id="container"></div>
</div>

Vue

const vm = new Vue({
	el: '#app',
  created() {
  	const shk = new Shikwasa({
  		audio: { src: 'https://stream.loudspeaker.fm/radio/8020/talk'}
		})

    shk.on('waiting', () => {
      console.log('on:waiting', 'show loader – this is the only occasion where a loader appear')
    })
		
    shk.on('canplaythrough', () => {
      console.log('on:canplaythrough', 'hide loader')
    })
  },
})