Что может быть причиной этой ошибки: Невозможно прочитать свойства null (чтение «play») TypeError: Невозможно прочитать свойства null (чтение «play»)?

Если вы хотите присвоить свой аудиоэлемент переменной в React, вам, вероятно, потребуется добавить хуки в ваше приложение: в данном случае хуки useState и useEffect. Вы можете найти много информации о крючках в Интернете, поэтому я сосредоточусь на решении вашей проблемы. (В любом случае, если вы хотите узнать больше о хуках, начните здесь: https://legacy.reactjs.org/docs/hooks-state.html).

Давайте начнем с объявления крючка setState, который мы будем использовать для установки вашей переменной.

const [audioElement, setAudioElement] = useState();

Чтобы убедиться, что этот код запускается только один раз и у вас есть только один экземпляр вашего аудио-элемента, мы устанавливаем его значение внутри хука useEffect с пустым массивом в качестве зависимости.

useEffect(() => {
  setAudioElement(new Audio('https://file-examples.com/storage/fe91f66a2a65f065f9ba741/2017/11/file_example_MP3_700KB.mp3'));
}, []);

(Я нашел источник аудио на этом сайте, просто чтобы убедиться, что у нас есть работающий файл https://file-examples.com/index.php/sample-audio-files/sample-mp3-download/).

На этом этапе мы можем добавить два метода, которые будут запускать и останавливать звук.

// start
const AudioStartClick = () => {  
  audioElement.play();
};
// stop
const AudioStopClick = () => {  
  audioElement.pause();
};

Бонус

Как объясняется здесь https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio, мы не на 100 % уверены, что аудиоэлемент может воспроизводиться сразу, поэтому мы можем добавьте прослушиватель событий, чтобы убедиться, что мы можем использовать этот элемент.

Для этого нам нужно добавить новый крючок useState для управления логическим значением и новый крючок useEffect для прослушивания события.

const [canPlay, setCanPlay] = useState(false);
useEffect(() => {
  audioElement?.addEventListener("canplaythrough", (event) => {
    setCanPlay(true);
  });
}, [audioElement]);

Теперь, когда у нас есть эта информация, нам просто нужно добавить пару строк, чтобы убедиться, что мы не вызываем play и не останавливаемся на элементе, который не способен воспроизводиться.

// start
const AudioStartClick = () => {
  if (!canPlay) return;
  audioElement.play();
};
// stop
const AudioStopClick = () => {
  if (!canPlay) return;
  audioElement.pause();
};

Наконец, вот полный пример кода:

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

export function App(props) {

  const [audioElement, setAudioElement] = useState();
  const [canPlay, setCanPlay] = useState(false);

  useEffect(() => {
    setAudioElement(new Audio('https://file-examples.com/storage/fe91f66a2a65f065f9ba741/2017/11/file_example_MP3_700KB.mp3'));
  }, []);

  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio
  useEffect(() => {
    audioElement?.addEventListener("canplaythrough", (event) => {
      setCanPlay(true);
    });
  }, [audioElement]);


  const AudioStartClick = () => {  
    if (!canPlay) return;
    audioElement.play();
   };

   const AudioStopClick = () => {  
    if (!canPlay) return;
    audioElement.pause();
   };

  return (
    <div className='App'>
      <button onClick = {AudioStartClick}> Start </button>
      <button onClick = {AudioStopClick}> Stop </button>
    </div>
  );
}