So I created a simple web app using Howler with react to stream songs we previously upload to the website. I used firebase to store the audio files and howler to play them back.
{isPlaying === false ? (
<button onClick = {handlePlay}>
Play
</button>
) : (
<button onClick = {handlePause}
Pause
</button>
)}
This is my code for the toggle button and the event handler functions are shown below.
const [isPlaying, setIsPlaying] = useState(false);
const src = song.audio;
const sound = new Howl ({
src,
html5: true
})
const handlePause = () => {
sound.stop();
setIsPlaying(false);
}
const handlePlay = () => {
sound.play();
setIsPlaying(true);
}
Here, the toggle button and the play functionality works fine but I can't get the song to pause (song plays when the 'play' button is clicked, and the button changes to 'pause' but the song won't pause when the button is clicked again)
I've only built simple HTML CSS web pages before, this is my first web app using a framework/library. I referred Howler's documentation on github, but couldn't figure this out. If someone can help me, I'd be more than grateful. Thanks in advance!
I ran into a similar issue using React with Howler and it seems to be an issue with the library itself.
The only solution I could find to get around this was to use the library react-howler. You can check it out here: react-howler
You just need to pass a boolean into the playing property of the ReactHowler to pause.
So your code would look something like this:
import React from "react";
import { useState } from "react";
import ReactHowler from "react-howler";
export const Sound = () => {
const [playing, setPlaying] = useState(false);
const src = song.audio;
const playSound = () => {
setPlaying(true);
};
const pauseSound = () => {
setPlaying(false);
};
return (
<div>
<ReactHowler playing={playing} src={[src]} />
<button onClick={playSound}>Play</button>
<button onClick={pauseSound}>Pause</button>
<p>{playing ? "Playing" : "Not playing"}</p>
</div>
);
};