用bootstrap写一个带有10条音乐，放在一个列表，并且可以播放音乐的，音乐播放网站

好的，这是一个比较复杂的任务，需要用到Bootstrap框架和音乐播放器插件。以下是一个基本的实现：

1. 首先引入Bootstrap和jQuery库，以及音乐播放器插件。

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>

2. 创建一个列表，并在每个列表项中添加音乐标题、作者和音频文件地址。

<ul class="list-group">
  <li class="list-group-item" data-src="music/song1.mp3">
    <h5 class="mb-1">Song 1</h5>
    <small class="text-muted">Author 1</small>
  </li>
  <li class="list-group-item" data-src="music/song2.mp3">
    <h5 class="mb-1">Song 2</h5>
    <small class="text-muted">Author 2</small>
  </li>
  ...
</ul>

3. 使用jQuery遍历每个列表项，并调用音乐播放器插件。

<script>
$(function() {
  $('li.list-group-item').each(function() {
    var title = $(this).find('h5').text();
    var author = $(this).find('small').text();
    var src = $(this).data('src');
    $(this).jPlayer({
      ready: function() {
        $(this).jPlayer('setMedia', {
          title: title,
          artist: author,
          mp3: src
        });
      },
      swfPath: 'https://cdn.bootcdn.net/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.swf',
      supplied: 'mp3',
      cssSelectorAncestor: '#' + $(this).attr('id') + '_container',
      wmode: 'window',
      useStateClassSkin: true,
      autoBlur: false,
      smoothPlayBar: true,
      keyEnabled: true,
      remainingDuration: true,
      toggleDuration: true
    });
  });
});
</script>

4. 最后，为每个列表项创建一个播放器容器，并在容器中添加播放器控件和歌曲信息。

<ul class="list-group">
  <li class="list-group-item" data-src="music/song1.mp3" id="song1">
    <h5 class="mb-1">Song 1</h5>
    <small class="text-muted">Author 1</small>
    <div id="song1_container" class="jp-audio">
      <div class="jp-type-single">
        <div class="jp-gui jp-interface">
          <div class="jp-controls">
            <button class="jp-play" role="button" tabindex="0">Play</button>
            <button class="jp-pause" role="button" tabindex="0">Pause</button>
            <button class="jp-stop" role="button" tabindex="0">Stop</button>
            <div class="jp-progress">
              <div class="jp-seek-bar">
                <div class="jp-play-bar"></div>
              </div>
            </div>
            <div class="jp-volume-controls">
              <button class="jp-mute" role="button" tabindex="0">Mute</button>
              <button class="jp-unmute" role="button" tabindex="0">Unmute</button>
              <div class="jp-volume-bar">
                <div class="jp-volume-bar-value"></div>
              </div>
            </div>
          </div>
          <div class="jp-details">
            <div class="jp-title"></div>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="list-group-item" data-src="music/song2.mp3" id="song2">
    <h5 class="mb-1">Song 2</h5>
    <small class="text-muted">Author 2</small>
    <div id="song2_container" class="jp-audio">
      <div class="jp-type-single">
        <div class="jp-gui jp-interface">
          <div class="jp-controls">
            <button class="jp-play" role="button" tabindex="0">Play</button>
            <button class="jp-pause" role="button" tabindex="0">Pause</button>
            <button class="jp-stop" role="button" tabindex="0">Stop</button>
            <div class="jp-progress">
              <div class="jp-seek-bar">
                <div class="jp-play-bar"></div>
              </div>
            </div>
            <div class="jp-volume-controls">
              <button class="jp-mute" role="button" tabindex="0">Mute</button>
              <button class="jp-unmute" role="button" tabindex="0">Unmute</button>
              <div class="jp-volume-bar">
                <div class="jp-volume-bar-value"></div>
              </div>
            </div>
          </div>
          <div class="jp-details">
            <div class="jp-title"></div>
          </div>
        </div>
      </div>
    </div>
  </li>
  ...
</ul>

以上是一个基本的实现，你可以根据需要修改样式和控件。