html 自适应 音乐播放器,使用HTML5+Boostrap打造简单的音乐播放器

好的，我可以为你提供一些思路和代码示例。

首先，你需要在HTML页面中添加一个音乐播放器的容器，例如：

<div class="music-player">
  <audio id="audio-player" preload="auto" controls>
    <source src="music.mp3" type="audio/mpeg">
  </audio>
</div>

接着，你可以使用Bootstrap中的网格系统来布局音乐播放器和其他元素，例如：

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="music-player">
        <audio id="audio-player" preload="auto" controls>
          <source src="music.mp3" type="audio/mpeg">
        </audio>
      </div>
    </div>
    <div class="col-md-4">
      <h2>播放列表</h2>
      <ul class="playlist">
        <li><a href="music.mp3">歌曲1</a></li>
        <li><a href="music2.mp3">歌曲2</a></li>
        <li><a href="music3.mp3">歌曲3</a></li>
      </ul>
    </div>
  </div>
</div>

然后，你可以使用JavaScript来动态加载播放列表中的歌曲，例如：

var playlist = document.querySelector('.playlist');
var audioPlayer = document.querySelector('#audio-player');

playlist.addEventListener('click', function(e) {
  e.preventDefault();
  var song = e.target.getAttribute('href');
  audioPlayer.src = song;
  audioPlayer.play();
});

最后，你可以使用CSS来美化音乐播放器和播放列表，例如：

.music-player {
  margin-bottom: 20px;
}

.playlist {
  list-style: none;
  padding: 0;
}

.playlist li {
  margin-bottom: 10px;
}

.playlist li a {
  color: #333;
  text-decoration: none;
}

.playlist li a:hover {
  color: #000;
  text-decoration: underline;
}

这只是一个简单的示例，你可以根据自己的需求和设计风格进行修改和扩展。希望能对你有所帮助！