rcp
react-cassette-player
npm i react-cassette-player
rcp

react-cassette-player

Simple ReactJS HTML5 audio player component built with SVG icons from The Noun Project.

by Chad Paulson

1.1.2 (see all)License:GPLv2TypeScript:Not Found
npm i react-cassette-player
Readme

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://www.krecs.com/media/samples/sam_klp002_07_crashingthrough.mp3'
ReactDOM.render(<Cassette src={audio} />, document.body)

Props

srcRequired: URI of HTML5 audio resource you wish to play.
preloadOptional: metadata (default), auto or none.
mimeTypeOptional: audio/mpeg (default), audio/ogg or audio/wav string.
cassetteColorOptional: RGB or HEX string.
labelColorOptional: RGB or HEX string.
tapeColorOptional: RGB or HEX string.
controlsColorOptional: RGB or HEX string.
containerClassOptional: react-cassette-player (default) string.
scaleMethodOptional: 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.

Downloads/wk

8

GitHub Stars

94

LAST COMMIT

6yrs ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

3

OPEN PRs

0
VersionTagPublished
1.1.2
latest
6yrs ago
No alternatives found
No tutorials found
Add a tutorial