Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-tunes-player with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactTunesPlayer = require("react-tunes-player")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-tunes-player v5.0.0

A simple .ogg/.mp3 player.

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

NameTypeDescriptionExample
tunestringThis is the tune locationtune: 'https://react-tunes-player.mfbproject.co.za/assets/audio/the_lego_tune.ogg'
namestringThis is the tune namename: 'The lego tune'
albumstringThis is the tune album art locationalbum: '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

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free