chadpaulson / React Cassette Player
Licence: gpl-2.0
Simple ReactJS HTML5 audio player component built with SVG icons from The Noun Project.
Stars: β 93
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Cassette Player
Skplayer
π΅ A simple & beautiful HTML5 music player
Stars: β 437 (+369.89%)
Mutual labels: audio, music, player, music-player, audio-player
Swift Radio Pro
Professional Radio Station App for iOS!
Stars: β 2,644 (+2743.01%)
Mutual labels: audio, music, player, music-player, audio-player
React Music Player
π΅ Maybe the best beautiful HTML5 responsive player component for react :)
Stars: β 321 (+245.16%)
Mutual labels: audio, music, player, audio-player, html5
Sbplayerclient
ζ―ζε
¨ζ ΌεΌηmacηθ§ι’ζζΎε¨
Stars: β 110 (+18.28%)
Mutual labels: audio, music, player, music-player, audio-player
Strawberry
π Strawberry Music Player
Stars: β 972 (+945.16%)
Mutual labels: audio, music, music-player, audio-player
Html Midi Player
πΉ Play and display MIDI files on the web
Stars: β 158 (+69.89%)
Mutual labels: music, player, music-player, audio-player
Fradioplayer
A simple radio player framework for iOS, macOS, tvOS.
Stars: β 183 (+96.77%)
Mutual labels: audio, music, player, audio-player
Musicplayer
A minimal music player built on electron.
Stars: β 145 (+55.91%)
Mutual labels: audio, music, player, music-player
Webaudiofont
Use full GM set of musical instruments to play MIDI and single sounds or effects. Support for reverberation and equaliser. No plugins, no Flash. Pure HTML5 implementation compatible with desktop and mobile browser. See live examples.
Stars: β 600 (+545.16%)
Mutual labels: audio, music, player, music-player
Pandoraplayer
π
ΏοΈ PandoraPlayer is a lightweight music player for iOS, based on AudioKit and completely written in Swift.
Stars: β 1,037 (+1015.05%)
Mutual labels: audio, music, player, music-player
Canaree Music Player
Complete music player published in the Play Store. Heavily relies on Dagger, kotlin coroutines and Clean architecture.
Stars: β 371 (+298.92%)
Mutual labels: audio, music, music-player, audio-player
Audio player flutter
π§ Apple Music / Tidal Audio Player for Flutter
Stars: β 52 (-44.09%)
Mutual labels: audio, music, music-player, audio-player
Openplayerjs
Lightweight HTML5 video/audio player with smooth controls and ability to play VAST/VPAID/VMAP ads
Stars: β 255 (+174.19%)
Mutual labels: audio, player, html5-audio, html5
Lofi Player
π§ A Lofi Player built with HTML, CSS and Javascript using Parcel as Module Bundler https://lakscastro.github.io/lofi-player
Stars: β 38 (-59.14%)
Mutual labels: music, player, music-player, html5
Tauonmusicbox
The Linux desktop music player from the future! π
Stars: β 494 (+431.18%)
Mutual labels: audio, music, player, music-player
Vyplayindicator
PlayIndicator inspired by Apple's Music Player.
Stars: β 47 (-49.46%)
Mutual labels: audio, music, music-player, audio-player
Yesplaymusic
ι«ι’εΌη第δΈζΉη½ζδΊζζΎε¨οΌζ―ζ Windows / macOS / Linux
Stars: β 12,981 (+13858.06%)
Mutual labels: music, player, music-player
Waveform Playlist
Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV! Project inspired by Audacity.
Stars: β 919 (+888.17%)
Mutual labels: audio, music, audio-player
Muse
π§ All you need is a simple and diligent HTML 5 music player written in React.
Stars: β 82 (-11.83%)
Mutual labels: audio, player, html5
Aplayer
π Wow, such a beautiful HTML5 music player
Stars: β 5,887 (+6230.11%)
Mutual labels: music, player, html5
react-cassette-player
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].