mythical-player v1.2.3

Mythical Player

How to use

Add as a dependency on your code

npm i --save mythical-player

In your JS:

import { MythicalPlayerComponent } from 'mythical-player';

// call the player
MythicalPlayerComponent({
  style: {
    ambient: 'auto', // auto | light | dark
    accent: 'default', // accent color
    height: '620px', // player height
    trackInfoHorizontal: 'left' // track info area alignt, left | right
  },
  playlist: { ... }, // playlist JSON
  useShadowDOM: true, // use shadow DOM true | false
  list: {
    showCovers: true, // show track cover image in playlist
    showTrackNumber: true, // show track number in playlist
    showIconIsPlaying: true, // show plaiyng status icon
    showFileExtension: true // show track format
  },
  id: 'default' // player element id
});

Use generated JS file

Add generated js file mythical-player.dist.js to your HTML:

<script src="mythical-player.dist.js"></script>

Add an empty placeholder element:

<div id="player-default"></div>

And call the player:

MythicalPlayer({
  placeholder: document.getElementById('player-default'), // placeholder
  props: {
    style: {
      ambient: 'auto', // auto | light | dark
      accent: 'default', // accent color
      height: '620px', // player height
      trackInfoHorizontal: 'left' // track info area alignt, left | right
    },
    playlist: { ... }, // playlist JSON
    useShadowDOM: true, // use shadow DOM true | false
    list: {
      showCovers: true, // show track cover image in playlist
      showTrackNumber: true, // show track number in playlist
      showIconIsPlaying: true, // show plaiyng status icon
      showFileExtension: true // show track format
    },
    id: 'default' // player element id
  }
});

Accent colors:

• gray
• zinc
• neutral (default)
• stone
• red
• orange
• amber
• yellow
• lime
• green
• emerald
• teal
• cyan
• sky
• blue
• indigo
• violet
• purple
• fuchsia
• pink
• rose

Playlist format:

[
  {
    "title": "Track title",
    "artist": "Track artist",
    "album": "Track album",
    "format": "mp3",
    "duration": 210,
    "cover": {
      "path": "/asset-path",
      "extension": "jpg",
      "name": "image-name-without-extension"
    },
    "file": "file-route.mp3"
  },
  {
    "title": "Track title",
    "artist": "Track artist",
    "album": "Track album",
    "format": "ogg",
    "duration": 210,
    "cover": {
      "path": "/asset-path",
      "extension": "jpg",
      "name": "image-name-without-extension"
    },
    "file": "file-route.ogg"
  }
]

How to donate

I need money to continue supporting Mythical Player. If you have some spare money, please donate some money in this link: https://paypal.me/mythical2024