[分享]css3播放音乐

CSS3是一种用于网页设计的样式表语言，它为开发人员带来了一些令人兴奋的新功能。其中之一就是播放音乐。对于那些想要在网站上添加背景音乐或音效的人来说，这是一个很好的功能。现在，就让我们来看看CSS3的...

CSS3是一种用于网页设计的样式表语言，它为开发人员带来了一些令人兴奋的新功能。其中之一就是播放音乐。对于那些想要在网站上添加背景音乐或音效的人来说，这是一个很好的功能。现在，就让我们来看看CSS3的音乐播放功能如何实现吧。

/* 定义音频样式 */
audio {
  display: none;
}

/* 播放按钮样式 */
.play-btn {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #000;
  color: #fff;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 2px rgba(0,0,0,0.5);
}

/* 音乐播放 */
.play-btn::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid #fff;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 音乐暂停 */
.play-btn.pause::after {
  border-left: none;
  border-right: 20px solid #fff;
}

/* JavaScript 控制音乐播放 */
var audio = document.querySelector("audio");
var playBtn = document.querySelector(".play-btn");

playBtn.addEventListener("click", function() {
  if (audio.paused) {
    audio.play();
    playBtn.classList.add("pause");
  } else {
    audio.pause();
    playBtn.classList.remove("pause");
  }
}); 

如上所示，我们首先定义了音频样式以及播放按钮样式。要开始 JavaScript 音乐播放，我们初始化了一个音频对象和一个播放按钮对象。接下来，我们添加了一个事件监听器，以检测用户何时单击播放按钮。如果音频对象尚未播放，则播放音频对象并将按钮类列表添加到暂停状态。反之，则暂停音频对象并将按钮类列表移除“暂停”状态。

这就是如何使用CSS3播放音乐了。我们可以按照这个例子制作一个网站的音乐播放器，或者是添加任何需要音乐或音效的地方。现在，你可以用网站设计问世，并添加音乐来使其更加生动活泼。