5.0.5 • Published 2 months ago

@cycjimmy/h5-audio-controls v5.0.5

Weekly downloads
16
License
MIT
Repository
github
Last release
2 months ago

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 a url to an audio file
  • The options supports:

    • context: Option the context of audio controller. Default document.body.
    • position: Option the position of audio controller.
      • Choose one of the four options:
        • 'left-top'
        • 'top-right'(Default)
        • 'right-bottom'
        • 'left-bottom'
    • positionType: Option Set position type of audio controller.
      • Choose one of the five options:
        • 'fixed'(Default)
        • 'absolute'
        • 'relative'
        • 'sticky'
        • 'static'
    • buttonSize: Option Set button wrapper size.
    • iconSize: Option Set button icon size.
    • playIcon: Option Set play icon.
    • pauseIcon: Option Set pause icon.
    • autoPlay: Option 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>
5.0.5

2 months ago

5.0.4

5 months ago

5.0.3

2 years ago

5.0.2

3 years ago

5.0.1

3 years ago

5.0.0

3 years ago

4.0.0

3 years ago

3.4.1

4 years ago

3.4.0

5 years ago

3.3.3

5 years ago

3.3.1

5 years ago

3.3.2

5 years ago

3.3.0

5 years ago

3.2.1

5 years ago

3.2.0

5 years ago

3.1.2

5 years ago

3.1.1

5 years ago

3.1.0

5 years ago

3.0.0

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago