CSS實現音樂關閉自動播放

/* 禁止音頻自動播放 */
audio {
display:none;
}
/* 播放按鈕樣式 */
.play-btn {
width: 40px;
height: 40px;
background-color: #ffffff;
border: 1px solid #000000;
border-radius: 50%;
cursor: pointer;
}
/* 暫停按鈕樣式 */
.pause-btn {
display: none;
width: 40px;
height: 40px;
background-color: #ffffff;
border: 1px solid #000000;
border-radius: 50%;
cursor: pointer;
}

在實現網站音樂播放功能時，我們常常希望用戶可以自主選擇是否播放音樂。但是默認情況下，音頻標簽會自動播放，這對于用戶來說可能并不友好。因此，我們需要通過CSS來控制音樂關閉自動播放。

首先，我們需要將音頻標簽的顯示設為none，這樣音頻就不會自動播放。音頻標簽可以使用以下CSS隱藏。

audio {
display:none;
}

接著，我們需要添加播放和暫停按鈕，讓用戶主動控制音樂的播放和暫停。我們可以使用CSS來設置按鈕的樣式，如下所示。

.play-btn {
/* 播放按鈕樣式 */
}
.pause-btn {
/* 暫停按鈕樣式 */
display: none; /* 初始狀態為隱藏 */
}

然后，我們需要使用JavaScript來控制按鈕的行為，如下所示。

let audio = document.querySelector('audio');
let playBtn = document.querySelector('.play-btn');
let pauseBtn = document.querySelector('.pause-btn');
playBtn.onclick = function() {
audio.play();
playBtn.style.display = 'none';
pauseBtn.style.display = 'block';
}
pauseBtn.onclick = function() {
audio.pause();
pauseBtn.style.display = 'none';
playBtn.style.display = 'block';
}

通過上述CSS和JavaScript的實現，我們就可以控制音樂的播放和暫停，并且可以禁止音樂自動播放，讓用戶更加友好地使用網站。