Skip to content

An audio player library for React that lets you use your own UI component

License

Notifications You must be signed in to change notification settings

kenfehling/react-designable-audio-player

Repository files navigation

react-designable-audio-player

An audio player library for React that lets you use your own UI component.

Control functions and state are provided to your UI component as props from an Higher Order Component (HOC).

Built on top of the HTML5 <audio> element.

build status

Online demo

kenfehling.github.io/react-designable-audio-player

In the wild

The library is used on my personal webpage.

Installation

npm install --save kenfehling/react-designable-audio-player

Usage

You can create whatever React component you like for the player view. The library provides many props for your component to use, as well as some prebuilt components for common player elements.

import React from 'react';
import {connectAudioPlayer} from 'react-designable-audio-player';

const AudioPlayer = ({play, stop, next, prev, isPlaying, timeElapsed, timeRemaining, currentTrack:{artist, title}}) => (
    <div>
        <ul>
            <li><a href="#" onClick={play}>{isPlaying ? 'Pause' : 'Play'}</a></li>
            <li><a href="#" onClick={stop}>Stop</a></li>
            <li><a href="#" onClick={next}>Next</a></li>
            <li><a href="#" onClick={prev}>Prev</a></li>
        </ul>
        <div>{artist} - {title}</div>
        <br />
        <div>Time elapsed: {timeElapsed}</div>
        <div>Time remaining: {timeRemaining}</div>
    </div>
);

Create an array of objects to hold all of your tracks. Each object must have an artist, title, and file.

const tracks = [{
    artist: 'Ken Fehling',
    title: 'Flung',
    file: '//archive.org/download/kenfehling_music/flung.mp3'
}, {
    artist: 'Ken Fehling',
    title: 'Putter',
    file: '//archive.org/download/kenfehling_music/putter.mp3'
}];

Call connectAudioPlayer with your component and tracks.

export default connectAudioPlayer(AudioPlayer, tracks);

API

Exports:

  • connectAudioPlayer
  • TitleMarquee
  • TimeSlider
  • Playlist

connectAudioPlayer

This is all you need to connect your custom UI component to the player library.

connectAudioPlayer(Component, tracks, [options])

options

name type default description
autoplay bool false Should the first track start playing automatically?

Provided props

A number of props are provided for your component to use.

Functions
name params description
play Play the current track, or pause if already playing
stop Stop the playback
seek number Seek to a point in the current track (in seconds)
next Go to the next track in the playlist
prev Go to the previous track in the playlist
goto number Go to a certain track number (starting with 1)
gotoAndPlay number Go to a certain track number (starting with 1) and start playing
State
name type description
currentTrack.number number Number of the current track (starting with 1)
currentTrack.artist string Artist of the current track
currentTrack.title string Title of the current track
currentTrack.durationSeconds number Duration of the current track in seconds
currentTrack.durationString string Duration of the current track as a string (mm:ss)
isPlaying bool Is the player currently playing?
timeElapsed string Time elapsed in the current track as a string (mm:ss)
timeRemaining string Time remaining in the current track as a string (mm:ss)
secondsElapsed number Time elapsed in the current track in seconds
secondsRemaining number Time remaining in the current track in seconds

Prebuilt components

TitleMarquee, TimeSlider, and Playlist are stylable components for common player elements.

TitleMarquee

Use the TitleMarquee component to show the current tracking playing.

Props
name type default description
className string CSS class name(s) of the title marquee container
textFn function Takes currentTrack, returns custom text to show inside the marquee
duration number 10 Duration of the scroll in seconds

TimeSlider

The TimeSlider component shows the current progress and allows seeking within the playing track. The component is based on rc-slider and all props and other customizations for that library are available.

Props
name type default description
className string CSS class name(s) of the time slider container

Playlist

The Playlist shows all of the tracks, indicates the current track, and handles select and click events appropriately.

Props
name type default description
className string CSS class name(s) of the playlist container
itemClassName string CSS class name(s) of all of the playlist items
currentItemClassName string CSS class name(s) of the current playlist item
itemComponent Component Custom component for a playlist item

About

An audio player library for React that lets you use your own UI component

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published