H5Player

Installation

$ yarn add h5player
# or
$ npm install h5player -S

Usage

1. Load h5player

• Via global

  <link rel="stylesheet" href="https://unpkg.com/h5player/dist/style.css">
  <script src="https://unpkg.com/h5player/dist/index.js"></script>
  <script>
  const { H5Player } = window;
  </script>

• Via CMD

  const H5Player = require('h5player');

• Via ESModule

  import H5Player from 'h5player';

2. Create a player and append it to document.body (or any mounted element).

   const player = new H5Player({
     image: 'http://example.com/path/to/default/image',
     getLyric: (song, callback) => {
       const lyric = getLyricFromSomewhereElse(song);
       callback(lyric);
     },
   });
   document.body.appendChild(player.el);
   
   player.setSongs([
     {
       name: 'Song1',
       url: 'http://example.com/path/to/song1.mp3',
       additionalInfo: 'whatever',
     }, {
       name: 'Song2',
       url: 'http://example.com/path/to/song2.mp3',
     }
   ]);
   player.play(0);

Document

Each player is built with player = new H5Player(options). options is an object with properties below:

• theme: optional string

  Possible values are normal (by default) and simple. Can be changed by player.setTheme(theme).

• mode: optional string

  The repeat mode for the playlist, possible values are repeatAll (by default), repeatOne and repeatOff. Can be changed by player.setMode(mode).

• showPlaylist: optional Boolean

  Whether to show playlist. Can be changed by player.setPlaylist(show).

• image: optional string or object

  Image shown when no image is assigned for the current song.
  It can be a string of the path to the image or an object with theme names as the keys and image paths as the values.
  The recommended image size for normal theme is 130 * 130, and 34 * 34 for simple theme.

• getLyric: optional function

  An async function to get the lyric. There are two parameters for the callback. The first parameter is the song object and the second is a callback to send the lyric to the player.

The player object has following methods:

• setSongs(Array songs)

  Set playlist for the player, songs is a list of objects with properties below:

  • name: required string

    The name of the song.

  • url: required string

    A downloadable URL.

  • artist: optional string

    The name of the artist.

  • duration: optional integer

    Length of the song in seconds.

  • image: optional string or object

    The image for the current song. Similar to the default image in common settings.

  • lyric: optional string

    Lyric of the song, e.g. [00:00]foo\n[00:05]bar\n....

• play(int index)

  Start playing the index-th song.

• setTheme(string theme)

  Change theme.

• setMode(string mode)

  Change repeat mode.

• setPlaylist(boolean show)

  Toggle playlist on / off.

When the play status is changed, a PlayerEvent will be fired with its detail set to an object with following attributes:

• player

  The Player object that is related to this event

• type

  'play' or 'pause'

The player is mounted to player.el, you need to append it to the container.

Snapshots

Normal theme:

Simple theme: (multiple players)