Simple ReactJS HTML5 audio player component built with SVG icons from The Noun Project.
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
lib
src Updates default tapeColor and labelColor props to better feature app … Oct 10, 2016
.babelrc Adds .babelrc. Apr 9, 2016
.gitignore
.travis.yml Bumps to version 1.1.0 and supports node >= 4. Apr 9, 2016
LICENSE Adds functional proof of concept. Dec 11, 2014
README.md
gulpfile.js
package.json

README.md

react-cassette-player

Build Status

screenshot

Demo @ https://chadpaulson.github.io/react-cassette-player/

Install

npm install react-cassette-player

Basic Usage

var React = require('react')
var ReactDOM = require('react-dom')
var Cassette = require('react-cassette-player')

var audio = 'http://static.echonest.com/audio2/01%20-%20Virginia%20Reel%20Around%20The%20Fountain.mp3'
ReactDOM.render(<Cassette src={audio} />, document.body)

Props

src Required: URI of HTML5 audio resource you wish to play.
preload Optional: metadata (default), auto or none.
mimeType Optional: audio/mpeg (default), audio/ogg or audio/wav string.
cassetteColor Optional: RGB or HEX string.
labelColor Optional: RGB or HEX string.
tapeColor Optional: RGB or HEX string.
controlsColor Optional: RGB or HEX string.
containerClass Optional: react-cassette-player (default) string.
scaleMethod Optional: meet (default) or slice string. See preserveAspectRatio.

All props can be referenced in the demo source. Don't hesitate to ask questions.

Attribution

SVG icons used by react-cassette-player are licensed Creative Commons (CC BY 3.0) and must be purchased by the Noun Project. Otherwise, you must add the following attribution to your project.

Play icon designed by Björn Andersson from the Noun Project. Cassette icon designed by Daniel Llamas Soto from the Noun Project.

Music

Demo audio courtesy of Echo Nest Labs.

Motivation

Desire to build a functional Noun while experimenting with React SVG support. Feedback and contributions are welcome.