一.看效果

二.思路

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