bouton.jsx

/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

import useSound from './useSound';

const propTypes = {

};

const defaultProps = {
 
};

const Son = () => {
    const sound = useSound('/sound.mp3');
    return (
        <div>
            <button
                type="button"
                onClick={() => {
                    if (sound.playing) {
                        sound.stop();
                    } else {
                        sound.play();
                    }
                }}
            >
                {sound.playing ? 'Arrêter le son' : 'Jouer le son'}
            </button>
        </div>
    );
};

Son.propTypes = propTypes;
Son.defaultProps = defaultProps;

export default Son;

useAudio.js

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

let CachedHowl;

export const useHowl = () => {
    const HowlRef = useRef(CachedHowl || null);
    const [loaded, setLoaded] = useState();
    useEffect(() => {
        let canceled = false;
        if (HowlRef.current === null) {
            import('howler').then(({ Howl }) => {
                if (!canceled) {
                    CachedHowl = Howl;
                    HowlRef.current = Howl;
                    setLoaded(true);
                }
            });
        }
        return () => {
            HowlRef.current = null;
            canceled = true;
        };
    }, []);

    return {
        loaded,
        Howl: HowlRef.current,
    };
};

const useSound = (url, opts = {}) => {
    const { Howl } = useHowl();
    const soundRef = useRef(null);
    const [loaded, setLoaded] = useState(false);
    const [playing, setPlaying] = useState(false);

    useEffect(() => {
        if (Howl !== null) {
            const sound = new Howl({
                src: url,
                preload: false,
                loop: true,
                ...opts,
            });
            sound.once('load', () => {
                setLoaded(true);
            });
            sound.on('play', () => {
                setPlaying(true);
            });
            sound.on('pause', () => {
                setPlaying(false);
            });
            sound.on('stop', () => {
                setPlaying(false);
            });
            sound.on('end', () => {
                setPlaying(false);
            });
            soundRef.current = sound;
        }
        return () => {
            if (soundRef.current !== null) {
                soundRef.current.unload();
            }
            soundRef.current = null;
        };
    }, [Howl, url]);

    return {
        loaded,
        playing,
        play: () => {
            if (soundRef.current !== null) {
                setPlaying(true);
                if (!loaded) {
                    soundRef.current.load();
                }
                soundRef.current.play();
            }
        },
        pause: () => {
            if (soundRef.current !== null && playing) {
                setPlaying(false);
                soundRef.current.pause();
            }
        },
        stop: () => {
            if (soundRef.current !== null && playing) {
                setPlaying(false);
                soundRef.current.stop();
            }
        },
    };
};

export default useSound;