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

IT技术 javascript reactjs error-handling jsx
2021-04-27 11:05:50

我正在尝试通过在 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;
4个回答

同样的事情发生在我身上也是因为玩家Promise中的 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 博客上阅读有关播放器Promise更改的更多信息

使用import audio from '../assets/audio.mp3'//your map3 path there 然后创建一个对象let audio = new Audio(audio) 并在所需的函数中播放声音audio.play()

好的，我设法解决了我的问题。这个错误是因为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(); };

它对我有用，但我希望有人可以在不访问 html 文件的情况下用纯 js 解决这个问题。

对我来说，当音频文件被重命名时，我开始收到这个非常模糊的错误。

index.js:1 未捕获的错误：您提供的错误不包含堆栈跟踪。

在尝试不同的播放方法之前，请检查您的音频文件是否与代码中的路径和名称匹配。

其它你可能感兴趣的问题
上一篇从表单内的字符串两端删除空格 - React 下一篇react-leaflet 获取当前的经纬度 onClick