Needlessly Provoking Marsupials

npm

Bring the best of OSS JavaScript development to your projects with npm Orgs - private packages & team management tools.Learn more »

react-tunes-player

3.0.0 • Public • Published

React Tunes Player

npm status Build Status Coverage Status

A simple .ogg/.mp3 player. This component uses Redux to store its state. The benefit of using Redux is the ability to dispatch actions to control the player functions.

Example

  • pauseCurrentTune() - This action creator will dispatch an action to pause current tune being played.
  • playCurrentTune() - This action creator will dispatch an action to play the current tune.
  • setNextTune() - This action creator will dispatch an action to go to the next tune in the tunes list.
  • setPreviousTune() - This action creator will dispatch an action to go to the previous tune in the tunes list.

Demo

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

Dependency

  • Redux

Installation

npm install --save react-tunes-player

Usage

Example Repo on how to use react-tunes-player

https://github.com/zulucoda/react-tunes-player-test

React

Import ReactTunesPlayerContainer into your view

import { ReactTunesPlayerContainer } from "react-tunes-player";

Add ReactTunesPlayerContainer to your view.

 
<ReactTunesPlayerContainer
    tunes={[
      {
        tune: "/assets/audio/the_lego_tune.ogg",
        name: "The lego tune",
        album: "/assets/images/dune.jpg"
      },
      {
        tune: "/assets/audio/bensound-funkysuspense.mp3",
        name: "Funky Suspense",
        album: "/assets/images/funkysuspense.jpg"
      }
    ]}
/>

ReactTunesPlayerContainer takes in tunes prop, tunes must set with the following info:

//Tune object
{
 tune: [URL/LOCATION_FOR_TUNE],
 name: [NAME_OF_THE_TUNE],
 album: [URL/LOCATION_FOR_ALBUM_ART]
}

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

Redux

Import reactTunesPlayerReducer into your reducers files

import { reactTunesPlayerReducer } from "react-tunes-player";

Add to combineReducers

export default combineReducers({
  reactTunesPlayerReducer
});

Inspirations

Development

NOTE: This repo was created using create-react-app, and it was ejected to generate this npm package.

Thanks to Pavel Lokhmakov - Have a look at his blog post on how to create npm package using create-react-app

Best way to create npm packages with create-react-app

Music Credits

Royalty Free Music from Bensound

Dune: The Battle for Arrakis

License

MIT License.

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

install

npm i react-tunes-player

Downloadsweekly downloads

2

version

3.0.0

license

none

last publish

collaborators

  • avatar
Report a vulnerability