Skip to content
📼 A flexible media player component library for React that requires no up-front config
JavaScript CSS HTML
Branch: next
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs_helpers Improve styleguide screenshot wrapper styles. Apr 23, 2019
example Example updated. Oct 5, 2018
img Win95 Media Player example. Apr 25, 2019
packages v2.0.0-beta.4 Sep 27, 2019
.eslintignore Basic API docs set up. Oct 1, 2018
.eslintrc.json WIP: Setting up jest but JSX not transforming correctly. Dec 16, 2018
.gitignore Fixed quickstart stuff. Apr 23, 2019
.lintstagedrc.json
.npmignore
.prettierignore Basic API docs set up. Oct 1, 2018
.prettierrc.json prettier-check only runs on staged files. Sep 16, 2018
.travis.yml
CHANGELOG.md Bump beta release tag in Changelog file. Sep 27, 2019
CONTRIBUTING.md
LICENSE Update LICENSE date May 27, 2017
README.md Add Cassette talk to readme Jun 12, 2019
audio_player_example_01.png Screenshot added. Mar 16, 2016
babel.config.js Fix babel jest Dec 17, 2018
cassette.jpg Add cassette.jpg. Oct 2, 2018
demo.gif Demo gif added to readme. Oct 31, 2016
example.html Move example.html to root. Oct 5, 2018
getBabelConfig.js Fix babel jest Dec 17, 2018
getPackageWebpackConfig.js @cassette/hooks package added with new exports. Feb 11, 2019
jest.config.js Added module mapper to test config. Jan 5, 2019
lerna.json
old_photo.jpg Old photo added. Sep 7, 2018
package-lock.json
package.json v2.0.0-beta.4 Sep 27, 2019
postcss.config.js Upgrade webpack and related dependencies. Sep 2, 2018
prettier-check.js Prettier and linting set up for scss files. Sep 16, 2018
quickstart.md Wow I said the expression wrong Apr 24, 2019
styleguide.config.js Add reloadActiveTrack control prop Jun 12, 2019
webpack.config.js Fix webpack config for @cassette/hooks. Feb 11, 2019

README.md

Cassette

https://www.pexels.com/photo/black-lx90-cassette-tape-1228497/

Cassette is a zero-config-required media player component library for React. The default responsive UI works great in desktop or mobile web browsers. The flexible core handles the logical complexities of common audio and video player paradigms, while allowing you to implement any UI you can come up with.

This is Cassette v2, which is in beta.

See version 1 (also known as react-responsive-audio-player) here!

Cassette is split into four packages

  • @cassette/core provides React Context-based components which expose an API for consuming and updating media player state
  • @cassette/components contains some convenient React component building blocks which can be used in media player user interfaces created with @cassette/core
  • @cassette/player provides a responsive, zero-config-needed React media player component, implemented with @cassette/core
  • @cassette/hooks provides optional React Hooks for consuming media player state

See full documentation (with integrated live demos) here

Watch a talk introducing Cassette here

⚠️ Note on installation

If you wanted to install, for instance, the @cassette/core and @cassette/player packages, you would run:

npm install @cassette/core @cassette/player

I do not control, nor do I have any contact with the owner of, the npm package called cassette (without the @). If you npm install cassette, you will be using the wrong library! However it turns out this package is used for managing playlist data. So if you really want to confuse the other devs on your team, you can try using cassette and @cassette together!

If you're not using npm and you need production-ready scripts to include in your project, check out the releases. You can also look on unpkg, e.g. here.

📼 Cassette in the wild 📼

What can you build with Cassette? Here are some examples:

rexmort.us

A site showcasing creative content, including several podcast series which can be listened to while navigating the rest of the site.

How is Cassette used?

The MediaPlayerControls UI from the @cassette/player package can be seen at the bottom of the page, featuring the included play/pause, mute toggle, and media progress controls (with some custom CSS styles applied). PlayerContextProvider wraps the whole page, and is used on each of the podcast pages where we can select a podcast to play, and see an indication of which podcast is playing currently.

OwlTail

A web app where users can explore curated popular podcasts and schedule queues of podcasts to listen to in the browser.

How is Cassette used?

Instead of using Cassette's default UI, OwlTail's player UI is all custom-built. It relies on a page-level PlayerContextProvider to provide media data and functionality. The control UI at the bottom of the screen features some controls which don't even exist in the default Cassette UI, like a playback rate control, and buttons for skipping back and forward by 30 second intervals; even though Cassette doesn't provide this UI, its callbacks make it simple to implement this sort of behavior. The progress bar, although featuring custom UI, relies on the MediaProgressBar helper from the @cassette/components package, which is designed to work well with both mouse and touch devices.

The UI in the rest of the app is synced with the player via the PlayerContextProvider wrapper, so that the currently-playing podcast will always display as such when encountered in the queue or a podcast listing.

Win95 Media Player

A React component which is a clone of the Media Player application that shipped with Windows 95. It supports video and audio playback.

How is Cassette used?

Although the UI is totally different than what ships with Cassette, all the media playback internals are handled by Cassette. This means you can configure it the same way you would configure the MediaPlayer component from @cassette/player. The website features a video playlist and an audio playlist, and PlayerContextGroup from @cassette/core is used to prevent both audio from both pieces of media from playing simultaneously.

benwiley.org

A personal site featuring a portfolio of work, including some video game soundtrack pieces, which can be sampled while browsing the rest of the site's content.

How is Cassette used?

This site uses @cassette/player's PlayPauseButton and ForwardSkipButton components, while wrapping the MediaProgressBar helper from @cassette/components for a custom progress navigation UI. Because the PlayerContextProvider wraps the whole page, we can integrate playback controls inline on the music portfolio page, dynamically displaying a media progress control below the description for the currently-selected track.

Development

For building and testing instructions, see CONTRIBUTING.md.

Acknowledgements

Thanks to BrowserStack for providing their platform free of charge for this project (and many other open source projects). We're using BrowserStack to test compatibility across multiple browsers and platforms.

BrowserStack Logo

Icons

The standard control components make use of icons from various sources.

The CSS YouTube-style play/pause button and the skip button were authored in part by @benwiley4000, with heavy assistance from this CodePen by @OxyDesign.

The SVG repeat, shuffle, fullscreen and volume icons come from Google's material-design-icons.

You can’t perform that action at this time.