🎧 Simple React Audio Player

A ready-to-use single-source HTML5-audio player component for React.

After trying out just about every audio component out there for a project I was building, none of them were exactly what I needed: they either had too many functions, flat out didn't work properly, or were just wrappers over the browser's built-in HTML5 audio without access to the player HTML.

I wanted just a simple audio player without a ton of controls that plays a single sound source. This player does not support multiple sources (e.g. for a playlist) so to build a playlist, just use multiple <AudioPlayer /> components which is exactly how I use them.

The players include a Play/Pause button, progress slider, duration, and Mute button. That's it. There are some basic styles but those can be easily customized to your needs.

The Play/Pause and Mute buttons are set with Font Awesome classes so to see the buttons just add the Font Awesome free npm package to your project or link to the css in your public index.html file. Otherwise, you can use your own svgs to create your own buttons pretty easily.

Installation

npm install simple-react-audio-player --save

Dependencies

Include Font Awesome if you want to use the default buttons.

Usage

Here is an example <Playlist /> component using multiple <AudioPlayer /> components:

import React, { Component } from 'react'
import AudioPlayer from 'simple-react-audio-player'
 
const Playlist = (props) => {
    return (
        <ul className="playlist">
            <li key={yourkey}>
                <AudioPlayer src={/* url to sound file or passed-down prop */} />
            </li>
            <li key={yourkey}>
                <AudioPlayer src={/* url to sound file or passed-down prop */} />
            </li>
            <li key={yourkey}>
                <AudioPlayer src={/* url to sound file or passed-down prop */} />
            </li>
 
        </ul>
    )
}
 
export default Playlist
 

Notes

The <AudioPlayer /> component sets the preload attribute on the <audio> element to auto by default.

License

ISC