Mythical Player

JS audio 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"
  }
]

Contributing

Contributions are welcome! For more information, please see the contributing guide.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Support

If you find this project helpful, please consider donating to support its development.