cycjimmy / vue-h5-audio-controls

A simple h5 music controller for vue

vue-h5-audio-controls

• Simple h5 music controller for vue. Demo.
• This plugin extends @cycjimmy/h5-audio-controls to support vue@2. Its rendering mode is still DOM.

Language: En | 中文

---

How to use

Install

$ npm install @cycjimmy/vue-h5-audio-controls --save
# or
$ yarn add @cycjimmy/vue-h5-audio-controls

Usage

Use plugin by calling the Vue.use(). This has to be done before you start your app by calling new Vue():

import Vue from 'vue';
import H5AudioControls from '@cycjimmy/vue-h5-audio-controls';

Vue.use(H5AudioControls);

Put <h5-audio-controls /> into vue node which is preferably the root node

<template>
  <div>
    <h5-audio-controls 
      src="https://www.xxx.com/foo.mp3"
    />
  </div>
</template>

• Props

  • src: [Require][string] a url to an audio file
  • position: [Option][string] the position of audio controller.
    • Choose one of the four options:
      • 'left-top'
      • 'top-right'(Default)
      • 'right-bottom'
      • 'left-bottom'
  • positionType: [Option][string] Set position type of audio controller.
    • Choose one of the five options:
      • 'fixed'(Default)
      • 'absolute'
      • 'relative'
      • 'sticky'
      • 'static'
  • buttonSize: [Option][string|number] Set button wrapper size.
  • iconSize: [Option][string|number] Set button icon size.
  • playIcon: [Option][string] Set play icon.
  • pauseIcon: [Option][string] Set pause icon.
  • autoPlay: [Option][boolean] Whether to play immediately after loading. Default true.

• Methods

  • play(): Play the audio.
  • pause(): Pause the audio.
  • stop(): Stop the audio.
  • isPlaying(): Return whether the audio is playing.

An advanced example

<template>
  <div>
    <h5-audio-controls 
      ref="h5AudioControls"
      :src="audioControlsConfig.src"
      :position="audioControlsConfig.position"
      :buttonSize="audioControlsConfig.buttonSize"
      :iconSize="audioControlsConfig.iconSize"
      :playIcon="audioControlsConfig.playIcon"
      :pauseIcon="audioControlsConfig.pauseIcon"
      :autoPlay="audioControlsConfig.autoPlay"
    />

    <!-- This is an external control button to simulate methods -->
    <botton @click="trigger">Trigger</botton>
  </div>
</template>
  
<script>
  import playIcon from './images/icon-play.png';
  import pauseIcon from './images/icon-pause.png';

  export default {
    name: 'app',
    data() {
      return {
        audioControlsConfig: {
          src: 'https://www.xxx.com/foo.mp3',
          position: 'left-top',
          buttonSize: '15vw',
          iconSize: '12vw',
          playIcon,
          pauseIcon,
          autoPlay: true
        }
      };
    },
    methods: {
      trigger(){
        if(this.$refs.h5AudioControls.isPlaying()) {
          this.$refs.h5AudioControls.pause();
        } else {
          this.$refs.h5AudioControls.play();
        }
      }
    }
  };
</script>

Quick experience（Use in browser）

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="vue-h5-audio-controls.umd.min.js"></script>
<script type="module">
  Vue.use(H5AudioControls);

  new Vue({
    el: '#app',
    template: `
    <div>
      <h5-audio-controls
        src: 'https://www.xxx.com/foo.mp3'
      />
    </div>`,
  });
</script>
<div id="app"></div>

CDN

To use via a CDN include this in your html:

<script src="https://cdn.jsdelivr.net/npm/@cycjimmy/vue-h5-audio-controls@1/dist/h5-audio-controls.umd.min.js"></script>