I am trying to use Howler.js in Reactjs using typescript.
I can able to play the sound but it does not pause or stop. Here is my code.
This a component where I am passing all the audio details using props.I did console.log() to check, is it going in else part and it goes and print the console.Please help me in this
import React, { useState } from 'react';import Button from 'components/button/button';import PlayIcon from 'assets/icons/play.svg';import PauseIcon from 'assets/icons/pause.svg';import AudioWave from 'assets/icons/sound-wave.svg';import { Howl, Howler } from 'howler'; interface Props { name?: string, audio?: any, loop?: boolean, autoplay?: boolean}const Audio = (props: Props) => { const { name, audio, loop, autoplay } = props; const [isPlaying, setIsPlaying] = useState(false); const [audioId, setAudioId] = useState(0); const sound = new Howl({ src: [audio], autoplay: autoplay, loop: loop, volume: 1, onend: function () { setIsPlaying(false); }, }); Howler.volume(0.5); const playAudio = () => { let Id: any; if (!isPlaying) { Id = sound.play(); setAudioId(Id); setIsPlaying(true); console.log('THS') } else { sound.stop(audioId); console.log('THATAT', audioId) } console.log(sound) } return (<div className="flex flex-col items-center justify-center rounded shadow-md w-full"> {console.log(isPlaying, audioId)}<div className="grid grid-cols-12 w-full"><div className="col-span-6 p-2"><p className="text-left"> {name}</p></div><div className="col-span-6 p-2"><p className="text-right text-light-gray"> {sound ? `${Duration.toTimeFormat(sound._duration * 1000)}s` : '0:00s'}</p></div></div><div className="grid grid-cols-12 w-full items-center justify-center"><div className="grid col-span-2 w-full p-2"><img className="w-full cursor" onClick={() => playAudio()} src={isPlaying ? PauseIcon : PlayIcon} alt="PlayPauseIcon" /></div><div className="grid col-span-10 p-2"><img className="w-full" alt="Audio Wave" src={AudioWave} /></div></div></div> )}export default Audio;