Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

React Tunes Player

npm status Build Status Coverage Status

A simple responsive .ogg/.mp3 player.

react-tunes-player-example

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

Example:

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

Responsive Design

375 Mobile

react-tunes-player-mobile.png

768 Tablet

react-tunes-player-tablet.png

1024 Laptop

react-tunes-player-laptop

Greater than 1024 is the same laptop

Music Credits

Royalty Free Music from Bensound

Dune: The Battle for Arrakis

License

MIT License.

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