Skip to content

cycjimmy/h5-audio-controls

 
 

Repository files navigation

H5 Audio Controls

libraries dependency status libraries sourcerank Coverage Status Release date rollup semantic-release jest npm license

  • Simple h5 music controller Demo

How to use

Install

NPM version NPM bundle size npm download

$ 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

jsdelivr

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>