Click on Play button after a pause restart the sound

[jlariza]

Good day,

I am using the AWSSoundPlayer example to create a soundplayer.

However, everytime I click on the play button after I have paused the sound, it starts all over again, the currentTime goes back to zero. Is it possible to keep the time state?

Thank you

[voronianski]

@jlariza are you sure that you pass all props properly? Also sharing code snippet would be helpful.

[jlariza]

@voronianski I am using the same example, the only difference is that I am using a different url for the soundtrack.

[tbarshchovskyi-elopage]

+1, same issue.
I use this type of url
} else if (this._track) { src = this._track.stream_url; }

Any update here? @voronianski @jlariza

[naveensomanna]

@jlariza I have the same issue did u get that solution?

[xanderjakeq]

Having a similar issue. pause/play works fine at first, but when the streamUrl is changed, pause, then click play, it will play the previous streamUrl.

my whole component:

const Player = props => {

	const {soundCloudAudio, streamUrl, trackTitle, currentTime, duration} = props;

	const [autoPlay, setAutoPlay] = useState(true);
	const [playing, setPlaying] = useState(false);

	const prevUrl = usePrevious(streamUrl);

	useEffect(() => {
		if(autoPlay){
			soundCloudAudio.play({streamUrl});
			setAutoPlay(false);
			setPlaying(true);
		} 
		if(prevUrl !== streamUrl) {
			setAutoPlay(true);
		}
	},[streamUrl])

	return (
		<PlayerContainer>
			<div id = 'options-container'>
				<PlayButton 
						{...props} 
						playing = {playing}
						onTogglePlay = {() => {
							setPlaying(!playing)
						}}
						className="playButton"/>
				<PrevButton {...props}/>
				<h2>{trackTitle}</h2>
				<Timer {...props}/>
			</div>
			<Progress 
					{...props}
					className = 'progressBarContainer'
					innerClassName = 'progress'
					value = {(currentTime/duration)*100 || 0}/>
		</PlayerContainer>
	);

	// referenced https://stackoverflow.com/questions/53446020/how-to-compare-oldvalues-and-newvalues-on-react-hooks-useeffect
	function usePrevious(value) {
		const ref = useRef();
		useEffect(() => {
		  ref.current = value;
		});
		return ref.current;
	}
};

[hassanamin994]

I faced the same issue on the Progress example, a small workaround i used was to stop re-rendering the component by setting a key attribute on it

here's a code sample

<ProgressSoundPlayer
key={progress-player-stream-${this.getStreamUrl()}}
streamUrl={this.getStreamUrl()}
/>

and inside the ProgressSoundPlayer component, set a key attribute on all the sub components i used

<PlayButton
className="flex-none h5 button button-transparent button-grow rounded"
{...this.props}
key={progress-player-play-${this.props.streamUrl}}
/>

[rsxdalv]

Tried the key method, but can't get it to stop rerendering

[yuredev]

I am facing the same issue.