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

Posted 2023-02-21

【中文标题】使用 audio.play() 函数时反应错误

【英文标题】：React error when using audio.play() function

【发布时间】：2019-10-17 07:31:17

【问题描述】：

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

【问题讨论】：

你的文件名是什么？您可以显示更多代码，因为它可能不相关。在我看来，这可能是一个环境或反应错误。如果可以，请尝试重新安装 ReactJS。

我认为我的其余代码对这个功能没有任何影响，因为我特意创建了一个新组件来测试它是否可能是我的代码的错误。我认为重新安装 React 似乎是合理的，感谢您的回答:)

打开您的浏览器网络选项卡，查看对 mp3 文件的请求是否指向正确的 url。

路径正确可能是React引起的问题

可以分享完整的组件代码吗？同时，您也可以尝试html5音频标签，看看您的mp3是否被加载。

【参考方案1】：

像这样导入您的音频文件

import audio from './filepath'

只需将文件路径替换为您的音频文件的位置 然后创建一个音频并以这种方式添加它的源

const audioElement = new Audio()
audioElement.src = audio

只播放音频

audioElement.play()

【参考方案2】：

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

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

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

【参考方案3】：

同样的事情也发生在我身上，因为玩家承诺的镀铬变化。 只需将您的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");
          );
      

您可以阅读更多关于它的信息here on chrome blogs about player promise changes

【讨论】：

谢谢兄弟.. 它像黄油一样光滑:ok:

【参考方案4】：

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

【讨论】：

虽然此代码可以解决 OP 的问题，但最好包含关于您的代码如何解决 OP 问题的说明。通过这种方式，未来的访问者可以从您的帖子中学习，并将其应用到他们自己的代码中。 SO 不是编码服务，而是知识资源。此外，高质量、完整的答案更有可能得到支持。这些功能，以及所有帖子都是独立的要求，是 SO 作为一个平台的一些优势，使其与论坛区分开来。您可以编辑以添加其他信息和/或使用源文档补充您的解释

【参考方案5】：

好的，我设法解决了我的问题。导致此错误是因为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 解决这个问题。