@cycjimmy/vue-h5-audio-controls

Simple h5 music controller for vue


Keywords
vue, h5, audio, control, music
License
MIT
Install
npm install @cycjimmy/vue-h5-audio-controls@1.0.1

Documentation

vue-h5-audio-controls

libraries dependency status libraries sourcerank Release date semantic-release npm license

  • Simple h5 music controller for vue. Demo.
  • This plugin extends @cycjimmy/h5-audio-controls to support vue@3. Its rendering mode is still DOM. h5 audio controls image
  • It is no longer supported vue@2. If you use vue@2, you can use v1.

Language: En | 中文


How to use

Install

NPM version NPM bundle size npm download

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

Usage

vue

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

<template>
  <h5-audio-controls :src />
</template>

<script setup>
  import { ref } from 'vue';
  import H5AudioControls from '@cycjimmy/vue-h5-audio-controls';

  const src = ref('https://www.xxx.com/foo.mp3');
</script>
  • 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="h5AudioControlsRef"
      :src="audioControlsConfig.src"
      :position="audioControlsConfig.position"
      :positionType="audioControlsConfig.positionType"
      :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 setup>
  import { ref } from 'vue';
  import H5AudioControls from '@cycjimmy/vue-h5-audio-controls';
  
  import playIcon from './images/icon-play.png';
  import pauseIcon from './images/icon-pause.png';

  const h5AudioControlsRef = ref();
  const audioControlsConfig = ref({
    src: 'https://www.xxx.com/foo.mp3',
    position: 'left-top',
    positionType: 'fixed',
    buttonSize: '15vw',
    iconSize: '12vw',
    playIcon,
    pauseIcon,
    autoPlay: true,
  });

  const trigger = () => {
    if (h5AudioControlsRef.value.isPlaying()) {
      h5AudioControlsRef.value.pause();
    } else {
      h5AudioControlsRef.value.play();
    }
  };
</script>

CDN

jsdelivr

To use via a CDN include this in your html:

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

<!-- or -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@cycjimmy/vue-h5-audio-controls@2/dist/h5-audio-controls.es.js"></script>