Skip to content
A simple .ogg/.mp3 player
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
lib/react-tunes-player
public
scripts
src
.babelrc
.gitignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json

README.md

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).

You can’t perform that action at this time.