react中添加背景音乐

本是古典 何须时尚 2022-10-11 12:26 403阅读 0赞
" class="reference-link">效果图在这里插入图片描述

创建组件

  1. import react from 'react';
  2. import styles from './Helloworld.less';
  5. class Helloworld extends react.Component {
  6.   constructor(props) {
  7.     super(props);
  8.     this.state = {
  9.       audioUrl: '',
  10.     };
  11.   }
  13.   // 关闭按钮 警报效果
  14.   playClickedImg = () => {
  15.     let audio_player = document.getElementById('audio_player');
  16.     if (audio_player.paused) {
  17.       audio_player.play();
  18.     } else {
  19.       audio_player.pause();
  20.     }
  21.   };
  23.   render() {
  24.     return (
  25.       <div>
  26.         <div className={styles.container}>
  27.           <div className={styles.dot} onClick={this.playClickedImg}></div>
  28.           <div className={styles.pulse}></div>
  29.           <div className={styles.pulse_big}></div>
  30.         </div>
  31.         <div id='audioBox'>
  32.           <audio id="audio_player" loop autoPlay="true">
  33.             <source src={require('../../pubilc/image/alarmSound/alarmSound1.mp3')}/>
  34.           </audio>
  35.         </div>
  36.       </div>
  37.     );
  38.   }
  39. }
  41. export default Helloworld;

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

发表评论

表情：
评论列表 （有 0 条评论，403人围观）

还没有评论，来说两句吧...

相关阅读

    相关 MFC添加游戏背景音乐

    前一阵在给基于MFC的一个小游戏添加背景音乐的时候，刚开始是准备new一个新线程，但是在参考了一些资料与教程之后，决定采用MCI这个API，开始使用的是winmm.lib接口，

    ゝ一纸荒年。ゝ一纸荒年。/ 0 赞/ 141 阅读

    相关 JAVAF给页面添加背景音乐

    非常简单的一个例子 我的业务场景是点击页面中的菜单栏中某个菜单时，播放背景音乐，切换其他菜单时关闭音乐 FXML页面的button绑定后台controller代码就不写

    亦凉亦凉/ 0 赞/ 413 阅读