mosaic-audio

Mosaic Audio

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

npm i mosaic-audio --save

Supply a player ID, a source file, and CSS class names for each nested element. The margin property is used to determine whether or not the playhead moves via margin change or via padding change. If margin is marked as false, it'll move by increasing padding.

Sample usage:

import './css/main.css';

import React from 'react';
import ReactDOM from 'react-dom';
import Mosaic from 'mosaic-audio';

const App = () => (
  <Mosaic
    playerId="audio-"
    source="audio/1.wav"
    playerClass="audioplayer"
    playClass="fa fa-play"
    pauseClass="fa fa-pause"
    timelineClass="timeline"
    playheadClass="playhead"
    durationClass="duration"
    margin="false"
  />
);

ReactDOM.render(<App/>, document.getElementById('app'));

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