https://github.com/nypublicradio/vue-hifi

The easy way to play audio in your Vue app.
https://github.com/nypublicradio/vue-hifi

Last synced: 18 days ago
JSON representation

The easy way to play audio in your Vue app.

• Host: GitHub
• URL: https://github.com/nypublicradio/vue-hifi
• Owner: nypublicradio
• License: mit
• Created: 2020-12-11T12:06:05.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-04-22T05:41:25.000Z (over 1 year ago)
• Last Synced: 2024-09-15T04:39:47.895Z (4 months ago)
• Language: JavaScript
• Size: 320 KB
• Stars: 1
• Watchers: 9
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

README

        
This repo is an initial attempt at converting `ember-hifi` to `vue-hifi`.

### Run Development Server

`npm run dev`

### Install 

`npm install --save vue-hifi``

### Overview

`vue-hifi`  focuses on simple stream playback of HLS and other formats.

It uses two playback libraries: HLS.js and Howler.js. When using Howler.js, it forces Howler’s Native Audio option, as opposed to Web Audio extensions, which is Howler’s default. This way, we don’t have to implement Native Audio ourselves, and can use Howler’s Web Audio in the future for on-demand.

`vue-hifi` is implemented as a mixin that can be added to a Vue component. It takes in a list of URLs through the `play` method and plays the first URL with a format supported by the current browser, like so:

```

  


    play

    pause

    stop

    togglePause

    
isLoading: {{ isLoading }}

    
isPlaying: {{ isPlaying }}

  


import vueHifi from '../src/mixins/vue-hifi'

export default {

  mixins: [vueHifi],

  methods: {

    playTest () {

      this.play([

        'https://hls-live.wnyc.org/wnycfm32/playlist.m3u8',

        'https://fm939.wnyc.org/wnycfm-app'

      ])

    }

  }

}

```

Right now, it tries Native Audio through Howler.js first, and then HLS.js. In this scenario, the following playback libraries will be used when playing an HLS stream:

- Safari Desktop: native Audio through Howler

- Chrome Desktop: HLS.js (Chrome doesn’t support HLS on Native Audio default)

- Firefox Desktop: HLS.js (Firefox doesn’t support HLS on Native Audio by default)