js实现网页播放器图片随歌曲切换

要实现网页播放器图片随着歌曲切换，可以使用JavaScript来实现。具体实现方法如下：

1. 在播放器页面中，为每首歌曲添加一个对应的图片。这些图片可以放在同一个文件夹中，方便管理。

2. 在JavaScript代码中，使用数组来存储这些图片的路径。

3. 在播放器初始化时，将当前歌曲对应的图片路径设置为播放器的背景图片。

4. 当用户切换歌曲时，根据当前歌曲的索引值，获取对应的图片路径，并将其设置为播放器的背景图片。

以下是一个简单的实现示例：

<!-- 播放器页面 -->
<div class="player">
  <img class="bg-img" src="default.jpg" />
  <audio src="song1.mp3"></audio>
</div>

// JavaScript 代码
var bgImgs = ['song1.jpg', 'song2.jpg', 'song3.jpg']; // 存储图片路径的数组
var audio = document.querySelector('audio'); // 获取音频元素
var bgImg = document.querySelector('.bg-img'); // 获取背景图片元素
var currentIndex = 0; // 当前歌曲索引

// 初始化播放器
function initPlayer() {
  // 设置默认背景图片
  bgImg.style.backgroundImage = 'url(' + bgImgs[currentIndex] + ')';
  
  // 监听音频播放结束事件，切换下一首歌曲
  audio.addEventListener('ended', function() {
    currentIndex++;
    if (currentIndex >= bgImgs.length) {
      currentIndex = 0;
    }
    // 切换背景图片
    bgImg.style.backgroundImage = 'url(' + bgImgs[currentIndex] + ')';
    // 切换歌曲
    audio.src = 'song' + (currentIndex + 1) + '.mp3';
    audio.play();
  });
}

// 初始化播放器
initPlayer();

在上面的例子中，我们使用了一个 `bgImgs` 数组来存储所有歌曲对应的图片路径，使用 `currentIndex` 变量来记录当前歌曲的索引值。在初始化播放器时，我们将默认的背景图片设置为第一首歌曲对应的图片路径。当用户切换歌曲时，我们根据当前索引值获取对应的图片路径，并将其设置为播放器的背景图片。同时，我们也切换了音频元素的 `src` 属性来播放对应的歌曲。