[分享]css做音乐播放器代码

你是否曾经想过给自己的网站添加一个音乐播放器? 通过CSS和HTML，我们可以轻松地创建一个漂亮的播放器。下面是一些实现音乐播放器的代码示例。 .player { display: ...

你是否曾经想过给自己的网站添加一个音乐播放器? 通过CSS和HTML，我们可以轻松地创建一个漂亮的播放器。下面是一些实现音乐播放器的代码示例。

 <div class="player">
    <audio id="myAudio" src="song.mp3"></audio>
    <button class="play-btn" onclick="play()"> <i class="fa fa-play"></i> </button>
    <button class="pause-btn" onclick="pause()"> <i class="fa fa-pause"></i> </button>
  </div>

  <style>
    .player {
      display: flex;
      align-items: center;
      margin: 20px;
    }

    .play-btn, .pause-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 24px;
      margin: 0 10px;
    }

    .play-btn i, .pause-btn i {
      color: #333;
    }

    .play-btn:hover i, .pause-btn:hover i {
      color: #4CAF50;
    }
  </style>

  <script>
    var audio = document.getElementById("myAudio");

    function play() {
      audio.play();
      document.querySelector(".play-btn").style.display = "none";
      document.querySelector(".pause-btn").style.display = "block";
    }

    function pause() {
      audio.pause();
      document.querySelector(".play-btn").style.display = "block";
      document.querySelector(".pause-btn").style.display = "none";
    }
  </script> 

在上面的示例中，我们首先通过HTML创建了一个音频元素并将其嵌套在一个带有“player”类的div元素内。之后，我们定义了两个按钮，一个用于播放音频，另一个用于暂停音频。

然后，我们使用CSS对播放器进行了样式设置，使其显示得更美观。我们通过将.flex-container元素的显示设置为“flex”，并使用“align-items”属性将其内容垂直居中，使得播放器的布局显示得极其优雅。

最后，我们使用JavaScript编写了两个函数用于播放和暂停音频，依次切换“play-btn”和“stop-btn”元素的显示状态。

上面的例子只是一个简单的音乐播放器。我们可以通过CSS的各种功能和JavaScript的不同技巧来扩展播放器的功能和样式。