react-tunes-player
A simple .ogg/.mp3 player.
Last updated 10 months ago by zulucoda .
Original npm · Tarball · package.json
$ cnpm install react-tunes-player 
SYNC missed versions from official npm registry.

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

Current Tags

  • 3.0.0                                ...           latest (10 months ago)

11 Versions

  • 3.0.0                                ...           10 months ago
  • 2.0.0                                ...           10 months ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 0.2.5                                ...           2 years ago
  • 0.2.4                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 12
Last Day 0
Last Week 1
Last Month 0
Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |