12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- <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>
|