Question

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

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

在B（index.js：1582）

at 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

同样的事情也发生在我身上，这是因为球员承诺的改变。只需将您的player.play()替换为

var 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");
          });
      }

您可以详细了解here on chrome blogs about player promise changes

Answer 2

使用import audio from '../assets/audio.mp3'//your map3 path there 然后创建一个对象let audio = new Audio(audio) 并以所需的功能audio.play()

播放声音

Answer 3

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

我这样更改了功能

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

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

使用audio.play（）函数时反应错误

3 个答案: