Riverine is an extremely light and simple React wrapper for the HTML Media Element. It allows for quick setup and and styling for dynamically created audio players, as well as a fairly straightforward setup. Default styles are included incase the developer does not want to style the component themself.

Please take a look at Riverine on Github & npm.

npm install --save riverine

Simply install to dependencies, import into a project, and begin.

import './css/main.css';
import React from 'react';
import { render } from 'react-dom';
import Riverine from 'riverine';

const main = document.getElementById('main');

const Root = () => (
    playClass="fa fa-play"
    pauseClass="fa fa-pause"

ReactDOM.render(<Root/>, main);

Riverine will append a unique suffix to the playerId prop. This will act as a unique ID when creating multiple players on the same page. Besides the source prop, the remaining props exist as names for custom CSS styles. There are no styles included in this package, and it is up to the developer to create their unique player.

Here's an example of a single player built with Riverine.

Follow the links below for more information about me and my projects or head to my website. If you find an issue, please report it to Riverine's GitHub issues.