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.

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