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;

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

react中添加背景音乐相关推荐

React中添加class——借助第三方库classnames
一.vue中添加class vue中添加class是一件非常简单的事情: 你可以通过传入一个对象: 你也可以传入一个数组: 甚至是对象和数组混合使用: 二.React中添加class React在JS ...
UE4 学习记录八给场景中添加背景音乐和动画音效，运动加速效果
这只是用来记录我学习UE4过程的,可能帮不到你,先说声抱歉.为了防止误导他人,请勿转载,请勿转载,请勿转载. 本文的主题是给场景中添加背景音乐和动画的音效.总章目录(https://blog.csdn ...
Java 中添加背景音乐
Java 中添加背景音乐 GUI 中添加背景音乐添加循环播放的背景音乐背景音乐音量调节好了,以上主要是多放几个关键词,方便能让需要的人都能搜到以下就是可直接使用的方法, 之后按提示导包就 o ...
react中添加debounce 实现
react中添加debounce 实现 handelChange(e) { // 输入框修改的时候执行的方法e.persist() // react默认会清楚所有的默认属性,所以需要添加这段,保留参数 ...
html中添加背景音乐的标签,添加背景音乐的html标签是什么
添加背景音乐的html标签是,bgsound是用以插入背景音乐,但只适用于IE,在netscape和firefox中并不适用,其参数设定很少,语法如"". 添加背景音乐的html标 ...
在 react 中添加enter键出搜索
在React 中enter 键的大致思路就是在document.body上添加"keyup/keydown"事件,然后在keycode=13即按下enter键时触发此事件. 接下来 ...
如何在PowerPoint中添加背景音乐
转载者: ppt课件免费下载来源: www.2ppt.cn PPT播放幻灯片时,如果加上配乐,效果会好很多.如何在幻灯片中添加背景音乐,并在特定时间播放特定音乐呢? Ste ...
css文件插入背景音乐,在HTML中添加背景音乐
方法一: 在源代码中编写以下几句代码将能实现在HTML网页内添加背景音乐: src="http://demo.mimvp.com/html5/take_you_fly.mp3"&g ...
怎么给php加音乐,视频中添加背景音乐怎么给视频添加背景给视频中某段加背景音乐...
给视频添加背景音乐,视频更换背景音乐,前面我写过相关的简易教程了,你只要稍微花几分钟按教程操作一次,慢慢熟悉下就会感觉是非常简单方便的方法,也比较实用的,还有一些延伸的方案,此教程详见:http:// ...

react中添加背景音乐

效果图

react中添加背景音乐相关推荐

最新文章

热门文章