react-cassette-player



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

Install

``
npm install react-cassette-player
`

Basic Usage

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

var audio = 'http://www.krecs.com/media/samples/sam_klp002_07_crashingthrough.mp3'
ReactDOM.render(, 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.

Motivation

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

Music

Courtesy of Echo Nest Labs and K Records.