h5player

    2.0.0 • Public • Published

    H5Player

    NPM License

    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';
    1. 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:

    snapshot

    Simple theme: (multiple players)

    snapshot

    Keywords

    none

    Install

    npm i h5player

    DownloadsWeekly Downloads

    61

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    32.7 kB

    Total Files

    9

    Last publish

    Collaborators

    • gera2ld