react中添加背景音乐

效果图

创建组件

import react from 'react';
import styles from './Helloworld.less';


class Helloworld extends react.Component {
  constructor(props) {
    super(props);
    this.state = {
      audioUrl: '',
    };
  }

  // 关闭按钮 警报效果
  playClickedImg = () => {
    let audio_player = document.getElementById('audio_player');
    if (audio_player.paused) {
      audio_player.play();
    } else {
      audio_player.pause();
    }
  };

  render() {
    return (
      <div>
        <div className={styles.container}>
          <div className={styles.dot} onClick={this.playClickedImg}></div>
          <div className={styles.pulse}></div>
          <div className={styles.pulse_big}></div>
        </div>
        <div id='audioBox'>
          <audio id="audio_player" loop autoPlay="true">
            <source src={require('../../pubilc/image/alarmSound/alarmSound1.mp3')}/>
          </audio>
        </div>
      </div>
    );
  }
}

export default Helloworld;

在相应的位置引用组件就可以了。