Awesome

H5 Audio Controls

• Simple h5 music controller Demo

How to use

Install

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

Usage

import h5AudioControls from '@cycjimmy/h5-audio-controls';
# OR
const h5AudioControls = require('@cycjimmy/h5-audio-controls');

h5AudioControls(audioSrc [, options])

• audioSrc: [Require][string] a url to an audio file

• The options supports:

  • context: [Option][string|element] the context of audio controller. Default document.body.
  • 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.

• h5AudioControls instance supports the following methods:

  • load(): Init controller.
  • play(): Play the audio.
  • pause(): Pause the audio.
  • stop(): Stop the audio.
  • isPlaying(): Return whether the audio is playing.
  • changeAudioSrc(src): Dynamically modify the value of audioSrc.
  • changePosition(position): Dynamically modify the value of position.
  • changeButtonSize(size): Dynamically modify the value of buttonSize.
  • changeIconSize(size): Dynamically modify the value of iconSize.
  • change(key, val): Dynamically change the value of configuration properties.
    • Supports the following keys:
      • 'audioSrc': Change the value of audioSrc. change('audioSrc', 'yourSrc') is the same as changeAudioSrc('yourSrc')
      • 'position': Change the value of position. change('position', 'left-top') is the same as changePosition('left-top')
      • 'buttonSize': Change the value of buttonSize. change('buttonSize', '16vw') is the same as changeButtonSize('16vw')
      • 'iconSize': Change the value of iconSize. change('iconSize', '10vw') is the same as changeIconSize('10vw')
      • 'playIcon': Change the value of playIcon.
      • 'pauseIcon': Change the value of pauseIcon.
      • 'autoPlay': Change the value of autoPlay.

Use in browser

<script src="h5-audio-controls.umd.min.js"></script>
<script>
  var audioSrc = '../media/test_audio.mp3';
  h5AudioControls(audioSrc).load();
</script>

CDN

To use via a CDN include this in your html:

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