The AudioContext was not allowed to start

I get a warning on page load even when I haven’t actually called play() yet. It seems like this is an issue in howler because they call new AudioContext() immediately.

Is it possible to somehow workaround this in use-sound?

[andrewmclagan]

We ended up rolling our own Howler hooks due to this issue. We came up with an elegant solution: Simply waiting for user interaction as the error states.

First need a hook that tracks first user interaction events according to the specs:

import { useEffect, useState } from 'react';

const events = ['mousedown', 'touchstart'];

export default function useInteraction() {
  const [ready, setReady] = useState(false);

  const listener = () => {
    if (ready === false) {
      setReady(true);
    }
  };

  useEffect(() => {
    events.forEach((event) => {
      document.addEventListener(event, listener);
    });

    return () => {
      events.forEach((event) => {
        document.removeEventListener(event, listener);
      });   
    };
  }, []);

  return ready;
}

Then we wrapped howler in a simple async dynamic import hook that only loads it after the first user interaction.

import { useState, useEffect } from 'react';
import useInteraction from '../useInteraction';

export default function useAudio(options) {
  const [audio, setAudio] = useState();

  const interacted = useInteraction();

  useEffect(() => {
    async function createAudoContext() {
      const { Howl } = await import('howler');
      setAudio(new Howl(options));
    }

    if (interacted) {
      createAudoContext();
    }

    return () => {
      if (audio) {
        audio.unload();
      }
    };
  }, [options]);

  const ready = Boolean(interacted && audio);

  return { audio, ready };
}

All this in only a few Kb of js. Simply use it like this:

const UsersList = ({ users }) => {
  const { audio, ready } = useAudio({ src: "https://g.com/ding.mp3" });

  useEffect(() => {
    if (ready) {
      audio.play()
    }
  }, [users.length, ready]);

  return <div>{users}</div>;
};

(pseudo code)

[ryan-sirka]

.current?.play()

hello sir, can i see full of your code to play audio?