I'm currently developing a web app with React and TypeScript. One of the components I created is called SoundEffect, which plays an mp3 file based on the type of sound passed as a prop.
interface ISoundEffectProps {
soundType: string,
// duration?: number, <- want to add this
}
const SoundEffect: React.FunctionComponent<ISoundEffectProps> = (props) => {
const sound = soundSelector(props.soundType)
return (
<div>
<audio src={sound} autoPlay></audio>
</div>
);
};
export default SoundEffect;
The function soundSelector() retrieves the corresponding mp3 file based on the soundType. I now wish to incorporate a duration feature so that when the component is rendered like this:
<SoundEffect soundType="count-down" duration=3000/>
the sound only plays for 3 seconds before stopping. Currently, I have to create separate mp3 files with different durations, which feels unnecessary. Since buttons cannot be added to this component, I'm unsure if a function-triggering component can be used (please correct me if I'm wrong). If anyone has a solution or knows of libraries/packages that could help resolve this issue, kindly provide assistance. Thank you!
------I'll detail a solution below------
interface ISoundEffectProps {
id: string,
soundType: string,
duration?: number,
}
const SoundEffect: React.FunctionComponent<ISoundEffectProps> = (props) => {
const sound = soundSelector(props.soundType); // "../assets/sounds/example.mp3"
const audio = document.getElementById(props.id) as HTMLAudioElement;
// without "as HTMLAudioElement", audio becomes HTMLElement, which does not have pause() method.
function startTimer(duration: number) {
if (audio != null) { // <- audio.pause() creates uncaught typeerror when audio is null
const interval = setInterval(() => {
audio.pause();
}, duration 1000);
}
}
return (
<div>
<audio autoPlay id={props.id} onPlay={()=> startTimer(props.duration || 10)}>
<source src={sound} type="audio/mp3"/>
</audio>
</div>
);
}
Now, I can use this component as follows:
<SoundEffect id="beep_id", soundType="beep", duration={5}/>
This component will stop playing the sound after 5 seconds. Similarly, setting duration={10} would cause it to stop after 10 seconds.