React Tunes Player

A simple responsive .ogg/.mp3 player.

Demo

Demo - https://react-tunes-player.mfbproject.co.za/

Installation

npm install --save react-tunes-player

or

yarn add react-tunes-player

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import ReactTunesPlayer from 'react-tunes-player';

const data = [
  {
    tune:
      'https://react-tunes-player.mfbproject.co.za/assets/audio/the_lego_tune.ogg',
    name: 'The lego tune',
    album: 'https://react-tunes-player.mfbproject.co.za/assets/images/dune.jpg',
  },
  {
    tune:
      'https://react-tunes-player.mfbproject.co.za/assets/audio/bensound-funkysuspense.mp3',
    name: 'Funky Suspense',
    album:
      'https://react-tunes-player.mfbproject.co.za/assets/images/funkysuspense.jpg',
  },
];

ReactDOM.render(
  <ReactTunesPlayer tunes={data} />,
  document.querySelector('.app'),
);

Example folder on how to use react-tunes-player

example

Tune Type

| Name | Type | Description | Example | | :----| :----| :-----------| :-----------| | tune | string | This is the tune location | tune: 'https://react-tunes-player.mfbproject.co.za/assets/audio/the_lego_tune.ogg' | | name | string | This is the tune name | name: 'The lego tune' | | album | string | This is the tune album art location | album: 'https://react-tunes-player.mfbproject.co.za/assets/images/dune.jpg' |

Example:

// Tune Type
{
     tune: "/assets/audio/the_lego_tune.ogg",
     name: "The lego tune",
     album: "/assets/images/dune.jpg"
}

Available Props

| Prop | Type | Description | |:----------|:--------------|:----------------------------------------| | tunes | Array<Tune> | Array of Tune Type | | oldPlayer | boolean | load old v5 player - default is false | | darkMode | boolean | light or dark them - default is true |

Example:

// tunes
[
 {
     tune: "/assets/audio/the_lego_tune.ogg",
     name: "The lego tune",
     album: "/assets/images/dune.jpg"
 }
]

Responsive Design

375 Mobile

768 Tablet

1024 Laptop

Greater than 1024 is the same laptop

Available CSS Overrides

| Class | Description | |:-------------------------------------|:---------------------------------------------------------------------------| | .album | Override Album container | | .album-cover | Override Album Cover container | | .album-img | Override Album Image | | .album-header | Override Album Header container | | .album-header-font | Override Album Header Font | | .player | Override Player Container (Main Grid) | | .player-controls | Override Player Controls Container | | .player-controls-list | Override Player Controls List Container | | .player-controls-list-skip-back | Override Player Controls List Skip Back Button Container | | .skip-back | Override Skip Back Button | | .player-controls-list-play-circle | Override Player Controls List Play Button Container | | .play-circle | Override Play Button | | .player-controls-list-pause-circle | Override Player Controls List Pause Button Container | | .pause-circle | Override Pause Button | | .player-controls-list-skip-forward | Override Player Controls List Skip Forward Button Container | | .skip-forward | Override Skip Forward Button | | .seek-control | Override Seek Control Container | | .seek-control-time-progress | Override Seek Control Time Progress | | .seek-control-progress | Override Seek Control Progress | | .seek-control-time-total | Override Seek Control Time Total | | .volume-controls | Override Volume Controls Container | | .volume-controls-list | Override Volume Controls List Container | | .volume-controls-list-x | Override Volume Controls List X Container (Mute Button Container) | | .volume-x | Override Mute Button | | .volume-controls-list-0 | Override Volume Controls List 0 Container (Low Volume Button Container) | | .volume | Override Low Volume Button | | .volume-controls-list-1 | Override Volume Controls List 1 Container (Medium Volume Button Container) | | .volume-1 | Override Medium Volume Button | | .volume-controls-list-2 | Override Volume Controls List 2 Container (High Volume Button Container) | | .volume-2 | Override High Volume Button Container |

Music Credits

Royalty Free Music from Bensound

Dune: The Battle for Arrakis

License

MIT License.

Copyright (c) 2017 Muzikayise Flynn Buthelezi (zuluCoda).