How to make 2 audio files playable as 1 in React?

Question

I am trying to make a website for a class where users can upload music (think soundcloud) and also 'add-on' to music that's been uploaded. This 'add-on' feature will work like TikTok's duet feature, where 2 audio files will play and pause at the same time with a single click of a button. The problem is, I am not sure how to implement it (I'm new to React and web development in general). Is there a library that does this, or is there any tips that can help me get started? Any feedback is appreciated!

Answer 1

Maybe you can try this solution

https://stackoverflow.com/a/30493651/17177726

You can create a function that takes the audio's ID as a parameter and use that function on a button

Answer 2

You can try the use-sound hook. It makes handling multiple sounds simultaneously a breeze.

You can either create two instances of the hook like this:

import useSound from 'use-sound';
import sound1 from '../audio/sound1.mp3';
import sound2 from '../audio/sound2.mp3';

const [sound1] = useSound(sound1);
const [sound2] = useSound(sound2);

Or you can use a sprite to layer them together in the same instance.