benwiley4000
commented
4 years ago Hey! These are great questions, thanks for the detailed post.
To try to give you some quick tentative answers:
From all the Cassette examples I see, that usually if there are multiple players per page - they are just simple play buttons without displaying the audio duration and so on. Can it be changed so every file has duration and progress and all the details?
Yeah for sure, you can have multiple fully functional players on the same page. The docs page is an example of this. You can also see a version of that on my own website: https://benwiley.org/music. And I guess in your own code you've figured something out, at least partway.
I'm not sure how to give them unique ID or other RIGHT way of doing it, so when we change the progress of the main player the progress should also be changed only for the currently playing player in the playlist.
Yeah, good question! I ran into the same issue when I was designing the music page for my website, which I linked above. The problem is that the playerContext will only hold onto the currentTime for whichever media clip is loaded and doesn't retain state for other tracks. If you try to render a MediaProgressBar under each track of course you'll get some confusing UI.
I think the best solution (or at least what I came up with) is to only display the progress bar under the track that is currently playing, and to hide it if the track isn't playing. Alternatively, if you want to keep the progress bar rendered for a track that isn't playing, you can display a ProgressBar whose value is set to 0 for inactive tracks.
on the docs website we got this "main" footer player, how do we actually build such kind of footer player? I cannot find examples of this. But from what I understand it's just a simple player which is fixed to the bottom of the page with css?
Yeah, indeed it's just a simple player with some CSS to fix it to the bottom. Assuming your page is wrapped in a PlayerContextProvider, you can render a MediaPlayerControls from the @cassette/player package which will have a default look you can customize. Note that MediaPlayerControls will inherit the state of the surrounding media from the PlayerContextProvider but MediaPlayer would create its own playerContext, which probably wouldn't be what you would want.
~~
Does all that make sense? Let me know if you have more questions, and if it would be helpful I could try to apply what I'm talking about to the code you shared.
Catsvilles
Hi! I'm trying to build quite a complex audio platform and after days of looking for the right audio player, I think cassette might be the one I need. But I kinda stuck here and before I go deeper and start reinventing the wheels, I thought, I better ask for advice and guidance, and if available examples :)
So, I'm trying the get multiple audio players per page and one footer "main player", all the players will be customized and display waveforms (which I render serverside). Here is a simple example (even though here the footer player has just simple progress bar in my case it would have also a waveform)
From all the Cassette examples I see, that usually if there are multiple players per page - they are just simple play buttons without displaying the audio duration and so on. Can it be changed so every file has duration and progress and all the details?
I found this demo app https://github.com/benwiley4000/cassette-demo-app and tried to modify it's code a bit, to achieve what I'm looking for but unfortunately, I cannot get it to work right, even though I managed to attach a
ProgressBarto the players I'm not sure how to give them unique ID or other RIGHT way of doing it, so when we change the progress of the main player the progress should also be changed only for the currently playing player in the playlist. Here is the screenshot and the code I managed to "compose":import React, { Component } from 'react'; import './App.css';
import { PlayerContextProvider, FullscreenContextProvider, playerContextFilter, PlayerContextGroup } from '@cassette/core'; import { MediaPlayerControls } from '@cassette/player'; import { MediaProgressBar } from '@cassette/components'; import './player_styles.scss';
import playlist from './playlist';
function TrackPosition({ activeTrackIndex, playlist }) { return ( <div style={{ fontSize: '1rem', display: 'flex', alignItems: 'center', fontWeight: 'bold' }}
function PlaylistMenu({ playlist, activeTrackIndex, onSelectTrackIndex }) { return ( <div style={{ width: '280px', marginTop: '2rem', marginBottom: '2rem', fontSize: '1.2rem' }}
); }
PlaylistMenu = playerContextFilter(PlaylistMenu, [ 'playlist', 'activeTrackIndex', 'onSelectTrackIndex' ]);
function FfwButton({ playbackRate, onSetPlaybackRate }) { return ( <div style={{ fontSize: '2rem', display: 'flex', alignItems: 'center', fontWeight: 'bold', WebkitUserSelect: 'none', MozUserSelect: 'none', msUserSelect: 'none', userSelect: 'none', WebkitTouchCallout: 'none' }} onTouchStart={() => onSetPlaybackRate(3)} onMouseDown={() => onSetPlaybackRate(3)} onMouseUp={() => onSetPlaybackRate(1)} onMouseLeave={() => onSetPlaybackRate(1)} onTouchEnd={() => onSetPlaybackRate(1)}