在網站中添加音樂可以為用戶帶來更好的視聽體驗，而在播放音樂的同時，用戶也需要有一個控制開關來控制音樂的播放和暫停。下面我們就來看如何使用CSS來創建播放音樂的開關。

/* 首先，我們需要設置一個帶有開關的容器 */ 
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* 在容器中創建圓形滑塊 */ 
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* 根據input的狀態來改變開關的背景顏色 */ 
.switch input:checked + .slider {
background-color: #2196F3;
}
/* 打開開關時使滑塊向右移動 */ 
.switch input:checked + .slider:before {
transform: translateX(26px);
}
/* 創建滑塊容器 */ 
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
/* 在滑塊容器中創建滑塊 */ 
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}

上述代碼中，我們首先創建了一個帶有開關的容器，然后根據input的狀態來改變開關的背景顏色，以及使滑塊向右移動。接著，我們創建了一個滑塊容器，并在其中創建了一個滑塊。通過以上代碼，我們成功地使用CSS創建了一個播放音樂的開關。