react-tunes-player

A simple .ogg/.mp3 player.

Usage no npm install needed!

<script type="module">
  import reactTunesPlayer from 'https://cdn.skypack.dev/react-tunes-player';
</script>

README

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