https://github.com/chadpaulson/react-cassette-player
Simple ReactJS HTML5 audio player component built with SVG icons from The Noun Project.
https://github.com/chadpaulson/react-cassette-player
audio audio-player cassette html5 html5-audio javascript music music-player player react react-component react-components svg svg-icons
Last synced: about 1 year ago
JSON representation
Simple ReactJS HTML5 audio player component built with SVG icons from The Noun Project.
- Host: GitHub
- URL: https://github.com/chadpaulson/react-cassette-player
- Owner: chadpaulson
- License: gpl-2.0
- Created: 2014-12-11T14:52:27.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-10-06T06:18:57.000Z (over 2 years ago)
- Last Synced: 2025-04-02T11:37:32.983Z (about 1 year ago)
- Topics: audio, audio-player, cassette, html5, html5-audio, javascript, music, music-player, player, react, react-component, react-components, svg, svg-icons
- Language: JavaScript
- Homepage: https://chadpaulson.github.io/react-cassette-player
- Size: 458 KB
- Stars: 98
- Watchers: 4
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [react-cassette-player](https://chadpaulson.github.io/react-cassette-player/)
[](https://travis-ci.org/chadpaulson/react-cassette-player)
[](https://chadpaulson.github.io/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 = 'https://wavves.s3.amazonaws.com/la.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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio). |
All props can be referenced in the [demo source](https://github.com/chadpaulson/react-cassette-player/tree/gh-pages). Don't hesitate to [ask questions](https://github.com/chadpaulson/react-cassette-player/issues/new).
## Attribution
SVG icons used by react-cassette-player are licensed [Creative Commons (CC BY 3.0)](https://creativecommons.org/licenses/by/3.0/us/) and must be purchased by the [Noun Project](http://thenounproject.com). Otherwise, you must add the following attribution to your project.
> [Play](http://thenounproject.com/term/play/15109/) icon designed by [Björn Andersson](http://thenounproject.com/bjorna1/) from the Noun Project.
> [Cassette](http://thenounproject.com/term/cassette/37972/) icon designed by [Daniel Llamas Soto](http://thenounproject.com/yamasoto/) from the Noun Project.
## Music
[Demo audio](https://chadpaulson.github.io/react-cassette-player/) courtesy of [Echo Nest Labs](http://static.echonest.com/labs/).
## Motivation
Desire to build a functional [Noun](http://thenounproject.com) while experimenting with React SVG support. [Feedback and contributions](https://github.com/chadpaulson/react-cassette-player/issues/new) are welcome.