我尝试通过 React 中的 onClick 事件触发函数来播放声音,但出现以下错误:
未捕获的错误:您提供的错误不包含堆栈跟踪。
在 B (index.js:1582)
在 G (index.js:1899)
在评估(index.js:1914)
在评估(index.js:1933)
在评估(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;
同样的事情也发生在我身上,因为玩家承诺的镀铬变化。
只需更换你的player.play()
with
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 博客 https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)