小程序 web-view h5页面背景音乐自动播放

/**
 * 年度账单-登录首页
 */
import React,{useEffect} from react
import swiper/swiper-bundle.min.css
import styles from ./styles.less
import bgm from ./bgm2.mp3
// 主体
const annualAccountLoginIndex = (props) => {
  const goAnnualAccount =()=>{
    const {location: { query: { name,phone} } } = props;
    props.history.push({
      pathname: `/annualAccountLoginDetail`,
      query:{
        name,
        phone
      }
    })
  }
  const imgUrl = http://oss.yoyoeco.com/Image/annualbill2021/
  useEffect(() => {
  	//  提前加载audio音乐
    const myAudio = new Audio()
    myAudio.preload = true;
    myAudio.autoplay = false;
    myAudio.loop = true;
    myAudio.src = bgm;
    document.getElementById("audioBox").appendChild(myAudio);
  }, [])
      
  return (
    <div className={styles.swpierBox} style={
         
  {background: `url(${imgUrl}index_bg.jpg) no-repeat center #000`,backgroundSize:cover, height:100vh}}>
      <div id=audioBox style={
         
  { position: fixed, top: 15, right: 15, width: 40, height: 40, zIndex: 0 }} />
      <div className={styles.heart} style={
         
  {width:41%,position:fixed,top:calc(52% + 5px),left:29.5%}} onClick={goAnnualAccount}>
        <img style={
         
  {display:block,width:100%}} src={`${imgUrl}index_button.png`} alt="" />
      </div>
    </div>
  )
}
export default annualAccountLoginIndex;