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>