web-dev-qa-db-fra.com

React lors de l'utilisation de la fonction audio.play ()

J'essaie de jouer un son en déclenchant la fonction avec l'événement onClick dans React et j'obtiens l'erreur suivante:

Erreur non interceptée: l'erreur que vous avez fournie ne contient pas de trace de pile.

à 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;
javascriptreactjserror-handlingjsx
4
Kacper Biedka

D'accord, j'ai réussi à résoudre mon problème. Cette erreur est due au fait que la new Audio(url).play() pointe vers l'index.html dans le dossier public et pour une raison quelconque, il ne semble pas fonctionner dans le div racine dans mon cas. J'ai créé l'élément audio dans le fichier index.html et déplacé le fichier mp3 dans le dossier public. <audio id="audio"><source src="bellNotification.mp3" type="audio/mpeg"></source></audio>

J'ai changé la fonction comme ça

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

Cela fonctionne pour moi mais j'espère que quelqu'un pourra résoudre ce problème avec des js purs sans accéder au fichier html.

0
Kacper Biedka