VanBlog如何使用客制化播放音乐（2）？

群友说可以用这个：https://aplayer.js.org/#/zh-Hans/

我也试试。

自定义 HTML (head)写入：

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

自定义 HTML (body)写入（我依旧是那两首歌）：

html
<div id="aplayer"></div>

<style>
  /* 将播放器固定在屏幕右边中央 */
  .aplayer {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 270px; /* 根据需要调整播放器的宽度 */
    z-index: 9999; /* 保证播放器位于页面的最上层 */
  }
</style>

<script>
  // 获取上次的播放进度和音频索引
  const savedTime = localStorage.getItem('aplayer-current-time');
  const savedIndex = localStorage.getItem('aplayer-current-index') || 0;

  // 初始化播放器
  const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: false, // 禁用吸底模式，使控件固定在右边
    autoplay: false, // 不自动播放
    listFolded: false, // 播放列表默认展开
    loop: 'all', // 顺序循环播放所有音频
    audio: [
      {
        name: '去海边.mp3',
        artist: 'Unknown Artist',
        url: '/static/music/output.mp3',
        cover: '',
      },
      {
        name: '病变.mp3',
        artist: 'Unknown Artist',
        url: '/static/music/output2.mp3',
        cover: '',
      }
    ]
  });

  // 恢复上次播放的音频和进度
  ap.list.switch(savedIndex); // 切换到上次播放的音频
  ap.audio.currentTime = savedTime || 0; // 恢复播放进度

  // 监听播放时间更新事件，将播放进度存储到localStorage
  ap.on('timeupdate', function () {
    localStorage.setItem('aplayer-current-time', ap.audio.currentTime);
  });

  // 监听音频切换事件，将当前音频索引存储到localStorage
  ap.on('listswitch', function (index) {
    localStorage.setItem('aplayer-current-index', index);
  });

  // 页面关闭或刷新时，保存播放状态
  window.addEventListener('beforeunload', function () {
    localStorage.setItem('aplayer-current-time', ap.audio.currentTime);
    localStorage.setItem('aplayer-current-index', ap.list.index);
  });
</script>

是要好看很多呢：

如果延续播放不行，就只有在body放这个代码了：

js


```html
<div id="aplayer"></div>

<style>
  /* 将播放器固定在屏幕右边中央 */
  .aplayer {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 270px; /* 根据需要调整播放器的宽度 */
    z-index: 9999; /* 保证播放器位于页面的最上层 */
  }
</style>

<script>
  const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: false, // 禁用吸底模式，使控件固定在右边
    autoplay: false, // 不自动播放
    listFolded: false, // 播放列表默认展开
    loop: 'all', // 顺序循环播放所有音频
    audio: [
      {
        name: 'Output 1',
        artist: 'Unknown Artist',
        url: '/static/music/output.mp3', // 音乐文件1的URL
        cover: '', // 你可以添加封面图片URL
      },
      {
        name: 'Output 2',
        artist: 'Unknown Artist',
        url: '/static/music/output2.mp3', // 音乐文件2的URL
        cover: '', // 你可以添加封面图片URL
      }
    ]
  });
</script>

还是放最底下可以上拉吧，以上的代码全部不看，只把下面的代码给入body即可：

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

<div id="aplayer"></div>

<style>
  /* 将播放器固定在底部，宽度调整为更适合的大小 */
  .aplayer {
    position: fixed;
    bottom: -400px; /* 播放器初始隐藏位置 */
    left: 50%; /* 居中显示 */
    transform: translateX(-50%); /* 将播放器在水平方向居中 */
    width: 320px; /* 自定义播放器的宽度 */
    z-index: 9999;
    transition: bottom 0.4s ease; /* 平滑过渡 */
  }

  /* 拉起后的状态 */
  .aplayer.open {
    bottom: 0; /* 拉起时显示在屏幕底部 */
  }

  /* 显示小标签，提示用户可以向上滑动 */
  #pull-tab {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 320px; /* 与播放器宽度保持一致 */
    height: 30px;
    background-color: #333;
    color: white;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    z-index: 10000;
  }
</style>

<div id="pull-tab">拉起播放器</div> <!-- 显示在播放器上方的小标签，用来拉起播放器 -->

<script>
  // 获取上次的播放进度和音频索引
  const savedTime = localStorage.getItem('aplayer-current-time');
  const savedIndex = localStorage.getItem('aplayer-current-index') || 0;

  // 初始化播放器
  const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: false, // 禁用吸底模式
    autoplay: false, // 不自动播放
    listFolded: false, // 播放列表默认展开
    loop: 'all', // 顺序循环播放所有音频
    audio: [
      {
        name: '去海边.mp3',
        artist: 'Unknown Artist',
        url: '/static/music/output.mp3',
        cover: '',
      },
      {
        name: '病变.mp3',
        artist: 'Unknown Artist',
        url: '/static/music/output2.mp3',
        cover: '',
      }
    ]
  });

  // 恢复上次播放的音频和进度
  ap.list.switch(savedIndex); // 切换到上次播放的音频
  ap.audio.currentTime = savedTime || 0; // 恢复播放进度

  // 监听播放时间更新事件，将播放进度存储到localStorage
  ap.on('timeupdate', function () {
    localStorage.setItem('aplayer-current-time', ap.audio.currentTime);
  });

  // 监听音频切换事件，将当前音频索引存储到localStorage
  ap.on('listswitch', function (index) {
    localStorage.setItem('aplayer-current-index', index);
  });

  // 页面关闭或刷新时，保存播放状态
  window.addEventListener('beforeunload', function () {
    localStorage.setItem('aplayer-current-time', ap.audio.currentTime);
    localStorage.setItem('aplayer-current-index', ap.list.index);
  });

  // 切换播放器的显示状态
  const aplayerElement = document.querySelector('.aplayer');
  const pullTab = document.getElementById('pull-tab');
  let isOpen = false;

  pullTab.addEventListener('click', function() {
    isOpen = !isOpen;
    if (isOpen) {
      aplayerElement.classList.add('open');
      pullTab.innerHTML = '收起播放器';
    } else {
      aplayerElement.classList.remove('open');
      pullTab.innerHTML = '拉起播放器';
    }
  });
</script>