使用 audio.play() 函数时反应错误

Question

我正在尝试通过在 React 中使用 onClick 事件触发函数来播放声音，但出现以下错误：

未捕获的错误：您提供的错误不包含堆栈跟踪。

在 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

同样的事情发生在我身上也是因为玩家承诺中的 chrome 变化。只需将您的替换player.play()为

const playPromise = player.play();

      if (playPromise !== undefined) {
        playPromise
          .then(_ => {
            // Automatic playback started!
            // Show playing UI.
            console.log("audio played auto");
          })
          .catch(error => {
            // Auto-play was prevented
            // Show paused UI.
            console.log("playback prevented");
          });
      }

您可以在 Chrome 博客上阅读有关播放器承诺更改的更多信息

Answer 2

好的，我设法解决了我的问题。导致此错误的原因是该new Audio(url).play()指向公共文件夹中的index.html，并且由于某种原因它似乎在我的情况下在根div 中不起作用。我在index.html 文件中创建了音频元素，并将mp3 文件移至公共文件夹。 <audio id="audio"><source src="bellNotification.mp3" type="audio/mpeg"></source></audio>

我像这样改变了功能

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

它对我有用，但我希望有人可以用纯js解决这个问题，而无需访问html文件。