标签：audio bofang 音乐 播放按钮 turn 添加 播放

一.看效果

二.思路

1.创建一个audio标签，给audio添加hidden属性使其隐藏,添加id名称为music，添加loop属性使其循环播放

2.创建一个按钮，添加id名称为bofang，添加点击事件bofang（）；

3.通过audio.play()方法控制播放音乐，通过audio.pause()方法控制暂停音乐；

4.给bofang()函数添加if条件判断,当音乐播放时（audio.paused//用来判断音乐是否是播放状态），点击按钮暂停音乐；当音乐暂停时，点击按钮播放音乐

三.代码

1.html

	<audio id="music" loop="" hidden>
		<source	src="1.mp3"type="audio/mpeg">
	</audio>
	<button id="bofang"  onclick="bofang()">
		<i class="fa fa-play" aria-hidden="true"></i>
	</button>
/*
加在audio标签上
controls="" ：是否展现播放器
autoplay="" ：是否自动播放

*/

2.CSS

	#bofang {
				border: none;
				width: 70px;
				height: 70px;
				border-radius: 50%;
				/* background-color: #000000; */
				background-image: url(5.jpg);
				background-position: center center;
				background-size: cover;
				cursor: pointer;
				position: absolute;
				right: 10px;
				top: 10px;
				color: #ffd1d1;
				border: 2px solid #ffff03;
				font-size: 16px;
				/* opacity: 0.7; */
				/* 去除蓝色背景 */
				user-select: none;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				z-index: 99999;
                                /*去除轮廓*/
				outline: none;
				
			}

			/* 设置旋转 */
			/*无过渡效果： cubic-bezier(0.37, 0.34, 0.74, 0.73) */
			.turn {
				animation: turn 5s infinite cubic-bezier(0.37, 0.34, 0.74, 0.73);
			}

			@keyframes turn {
				from {
					transform: rotate(0deg)
				}

				to {
					transform: rotate(360deg);
				}
			}

3.js

		function bofang() {
			var audio = document.getElementById('music');
			if (audio.paused) {//判读是否播放  
				audio.play(); // 播放 
				$('#bofang').html('<i class="fa fa-pause" aria-hidden="true"></i>').addClass('turn');
			} else {
				audio.pause(); //pause()暂停; 
				$('#bofang').html('<i class="fa fa-play" aria-hidden="true"></i>').removeClass('turn');
			}

		}

标签：audio,bofang,音乐,播放按钮,turn,添加,播放
来源： https://www.cnblogs.com/mywifeisMsHu/p/15307183.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。