Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including riverine with all npm packages installed. Try it out:

var riverine = require("riverine")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

riverine v0.0.2

A React audio component.


A simple, lightweight wrapper for the HTML media element, specifically targeting audio functionality. There is no styling included in this wrapper.

npm i riverine --save

Supply a source file, a margin boolean, a hover boolean, a loop boolean, and CSS class names for each nested element. If no class names or ID's are given, default classes/ID's are created. The margin property is used to determine whether or not the playhead moves via margin change or via padding change. If the margin is marked as false, it'll move by increasing padding. Its default value is true. Hover is used to add an option for mouseover progress selection. This is set to true in the demo.

Other available properties: playerId, playerClass, timelineClass, playheadClass, & durationClass.

Sample usage:

import './css/main.css';

import React from 'react';
import ReactDOM from 'react-dom';
import Riverine from 'riverine';

const Root = () => (

ReactDOM.render(<Root/>, document.querySelector('#root'));

Feel free to create an issue, or message me at @mskalandunas if you have any questions.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free