React audio Cannot set property 'volume' of undefined

Question

I am trying to play an mp3 using the Audio element but whenever the player renders an error occurs:- Cannot set property 'volume' of undefined.

Play prop is just a boolean value.

The useRef() current property shows me the mp3 file when I console.log it.

I removed the volume property but then it displays the same error for audio.play().

why is the audio undefined?

import React, { useState, useRef } from "react";
import "../../Static/player.css";
import Nowplaying from "./Nowplaying";
import SongInfo from "./SongInfo";
import Slider from "./Slider";
import Duration from "./Duration";
import song from "../../Static/assets/song.mp3";

const Player = (props) => {

  const { Play } = props;

  const [percentage, setPercentage] = useState(0)
  const [duration, setDuration] = useState(0)
  const [currentTime, setCurrentTime] = useState(0)

  const audioRef = useRef()


  const onChange = (e) => {
    const audio = audioRef.current
    audio.currentTime = (audio.duration / 100) * e.target.value
    setPercentage(e.target.value)
  }


  const play = () => {
    const audio = audioRef.current
    audio.volume = 0.1

    if (!Play) {
      audio.play()
    }

    if (Play) {
      audio.pause()
    }
  }

  const getCurrDuration = (e) => {
    const percent = ((e.currentTarget.currentTime / e.currentTarget.duration) * 100).toFixed(2)
    const time = e.currentTarget.currentTime

    setPercentage(+percent)
    setCurrentTime(time.toFixed(2))
  }

  if (Play) {
    play();
  } else {
    play();
  }

  return (
    <div className="player-screen">
      <div className="play-screen">
        <div className="navbar">
          <Nowplaying />
        </div>
        <div className="song-info">
          <SongInfo />
        </div>
        <div className="player-controls">
          <Slider percentage={percentage} onChange={onChange} />
          <Duration
            duration={duration}
            currentTime={currentTime}
          />
          <audio
            ref={audioRef}
            onTimeUpdate={getCurrDuration}
            onLoadedData={(e) => {
              setDuration(e.currentTarget.duration.toFixed(2));
            }}
            src={song}
          ></audio>
        </div>
      </div>
    </div>
  );
};

export default Player;

what wrong am I doing?

Answer 1

This part of code:

  if (Play) {
    play();
  } else {
    play();
  }

gets immediately called, before React even has the chance to set audioRef.current to the Audio element. Your function hasn't even finished rendering yet, React doesn't even know where audioRef is used.

Move that piece of code into a useEffect, or better yet, replace your audioRef with a callback function (which can still store the Audio element in another ref or state variable), as shown here.