Реакция на ошибку при использовании функции audio.play ()

Question

Я пытаюсь воспроизвести звук, вызвав функцию с событием onClick в React, и я получаю следующую ошибку:

Uncaught Error: предоставленная вами ошибка не содержит трассировки стека.

в B (index.js: 1582)

при G (index.js: 1899)

на eval (index.js: 1914)

на eval (index.js: 1933)

на eval (index.js: 1414)

import React from "react";
import firebase from "../../firebase";
import classes from "./Sidenav.module.sass";

const Sidenav = props => {
  const logout = () => {
    firebase.auth().signOut();
    window.location.href = "..";
  };

  const playAudio = () => {
    let audio = new Audio("../../assets/bellNotification.mp3");
    audio.play();
  };

  return (
    <div style={props.styles.sideNavDiv} className={classes.sidenavDiv}>
      <i />
      <div style={props.styles.iconDiv} className={classes.iconDiv}>
        <i className={"material-icons " + classes.navIcon}>account_box</i>
        <p className={classes.iconText}>Account</p>
      </div>
      <div style={props.styles.iconDiv} className={classes.iconDiv}>
        <i className={"material-icons " + classes.navIcon}>settings</i>
        <p className={classes.iconText}>Settings</p>
      </div>
      <div style={props.styles.iconDiv} className={classes.iconDiv}>
        <i className={"material-icons " + classes.navIcon}>trending_up</i>
        <p className={classes.iconText}>Check Progress</p>
      </div>
      <div style={props.styles.iconDiv} className={classes.iconDiv}>
        <i className={"material-icons " + classes.navIcon}>looks_one</i>
        <p className={classes.iconText}>1RM calculator</p>
      </div>
      <div
        onClick={props.toggleModal}
        style={props.styles.iconDiv}
        className={classes.iconDiv}
      >
        <i className={"material-icons " + classes.navIcon}>alarm</i>
        <p className={classes.iconText}>Edit timers</p>
      </div>
      <div
        onClick={playAudio}
        style={props.styles.iconDiv}
        className={classes.iconDiv}
      >
        <i className={"material-icons " + classes.navIcon}>help</i>
        <p className={classes.iconText}>Help</p>
      </div>
      <div
        onClick={logout}
        style={props.styles.iconDiv}
        className={classes.iconDiv}
      >
        <i className={"material-icons " + classes.navIcon}>
          power_settings_new
        </i>
        <p className={classes.iconText}>Logout</p>
      </div>
    </div>
  );
};

export default Sidenav;

Answer 1

Хорошо, мне удалось исправить мою проблему.Эта ошибка вызвана тем, что new Audio(url).play() указывает на index.html в общедоступной папке и по какой-то причине он не работает в корневом div в моем случае.Я создал элемент audio в файле index.html и переместил mp3-файл в общую папку. <audio id="audio"><source src="bellNotification.mp3" type="audio/mpeg"></source></audio>

Я изменил функцию следующим образом

const playAudio = () => { document.getElementById("audio").play(); };

Это работает для меня, но я надеюсь, что кто-то может решить эту проблему с чистыми js без доступа к HTMLфайл.