plaid/src/components/Player.vue

<template>
  <div class="bg-gray-800 rounded-sm">
    <div class="flex items-center space-x-3.5 sm:space-x-5 lg:space-x-3.5 xl:space-x-5">
      <Button class='text-red-400' ref='button' @play='play' @stop='stop' />
      <div class="min-w-0 flex-auto space-y-0.5">
        <!-- //- <p class="text-white text-sm sm:text-base lg:text-sm xl:text-base font-semibold uppercase">
        //-   <abbr title="Episode">Ep.</abbr> 128
        //- </p> -->
        <h2 class="text-white text-base sm:text-xl lg:text-base xl:text-xl font-semibold truncate" v-text='title'>
        </h2>
        <!-- //- <p class="text-gray-400 text-base sm:text-lg lg:text-base xl:text-lg font-medium">
        //-   Full Stack Radio
        //- </p> -->
      </div>
    </div>
  </div>


</template>

<script>
import eventBus from '../js/eventBus'

import { Howl } from 'howler'
import Button from './Button.vue'

export default {
  components: { Button },
  data () {
    return {
      loading: true,
      status: 'pause',
      volume: 100,
      title: 'RadioBlackout > DIRETTA',
      subtitle: '',
      live: true,
      player: null
    }
  },
  destroyed () {
    eventBus.$off('play:now')
  },
  mounted () {
    const t = this
    eventBus.$on('play:now', function (url) {
        t.play(url)
        })
  },
  methods: {
    play (url) {
      var urls;
      if (url === undefined) {
        const rnd = Math.random()
        urls = [
        'https://stream.radioblackout.org/blackout.ogg?rnd=' + rnd,
        'https://stream.radioblackout.org/blackout.mp3'
        ]
      } else {
        urls = [url]
      }
      this.player = new Howl({
        autoSuspend: false,
        html5: true,
        preload: true,
        src: urls,
      })
      console.log(this.player)
      this.player.play()
    },
    stop () {
      if (this.player) {
        this.player.stop()
      }
      this.$refs.button.stop()
    },
  }
}
</script>