mediaplayer.js

import React, { useEffect, useRef } from 'react';

const MediaPlayer = ({ id, vol, active, title, src, type }) => {

    const playerRef = useRef(null);

    useEffect(() => {

        const player = playerRef.current;

        if (active) {
            try { player.play() }
            catch (error) {
                console.error(`${player.id} failed to play ${player.title} from ${player.src}`, error)
            }
            
        } else {
            player.pause()
        }

    }, [active]);

    useEffect(() => {
        
        const player = playerRef.current;

        player.volume = vol;
        
    }, [vol])

    return (
        <div className="looping-audio-source-wrapper">
            <audio id={id} vol={vol} src={src} ref={playerRef} type={type}/>
        </div>
    );
};

export default MediaPlayer;