@cycjimmy/vue-h5-audio-controls

vue-h5-audio-controls

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

Language: En | 中文

How to use

Install

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

Usage

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

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>