音樂播放按鈕

一.看效果

二.思路

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');
			}

		}