useAudioContext

import { useEffect } from 'react';

export function makeGetAudioCtxSingleton() {
  let ctx;

  function createAudioCtx() {
    return new AudioContext();
  }

  return () => {
    if (!ctx) {
      ctx = createAudioCtx();
    }
    return ctx;
  };
}

export function useAudioContext({ getAudioCtx }) {
  const audioCtx = getAudioCtx();

  function pause() {
    audioCtx.suspend();
  }

  function play() {
    audioCtx.resume();
  }

  useEffect(() => {
    /** auto-play is very rude */
    if (audioCtx.state === 'running') {
      audioCtx.suspend();
    }

    return () => {
      audioCtx.close();
    };
  }, [audioCtx]);

  return { audioCtx, pause, play };
}

withAudioContext

import React from 'react';
import PropTypes from 'prop-types';

import {
  makeGetAudioCtxSingleton,
  useAudioContext,
} from '../hooks/useAudioContext';

function AudioContextWrapper({ Component, getAudioCtx, ...rest }) {
  const audioCtx = useAudioContext({ getAudioCtx });

  return <Component {...audioCtx} {...rest} />;
}

AudioContextWrapper.propTypes = {
  Component: PropTypes.func.isRequired,
  getAudioCtx: PropTypes.func.isRequired,
};

export function withAudioContext(Component) {
  return function AudioContextSingletonWrapper(props) {
    return (
      <AudioContextWrapper
        Component={Component}
        getAudioCtx={makeGetAudioCtxSingleton()}
        {...props}
      />
    );
  };
}