JavaScript实现音乐导航效果

JavaScript实现音乐导航效果，可以分为以下步骤：

1. HTML 结构

首先需要准备一个包含音乐链接和对应导航按钮的 HTML 结构，如下所示：

<ul id="musicList">
  <li>
    <a href="music1.mp3">Music 1</a>
    <button data-src="music1.mp3">Play</button>
  </li>
  <li>
    <a href="music2.mp3">Music 2</a>
    <button data-src="music2.mp3">Play</button>
  </li>
</ul>

其中包含了多个列表项，每个列表项对应一首音乐，包含了音乐链接 a 和对应的导航按钮 button，button 标签设置了 data-src 属性用于存储音乐链接。

2. JavaScript 代码

接下来，针对上述 HTML 结构，我们来编写 JavaScript 代码实现音乐导航效果，步骤如下：

2.1 获取元素和初始化

首先，我们需要获取 HTML 结构中的元素，并初始化一些变量，代码如下所示：

const musicList = document.getElementById('musicList')
const playButtons = musicList.querySelectorAll('button')
const audio = new Audio()
let currentMusicIndex = 0

其中，musicList 获取了包含音乐和导航按钮的父级元素，playButtons 获取了所有导航按钮，audio 创建了一个音频对象，currentMusicIndex 用于记录当前播放的音乐在列表中的索引。

2.2 监听导航按钮点击事件

接下来，我们需要为每个导航按钮设置点击事件监听，点击时播放对应音乐，代码如下所示：

playButtons.forEach((playButton, index) => {
  playButton.addEventListener('click', () => {
    currentMusicIndex = index
    audio.src = playButton.dataset.src
    audio.play()
  })
})

这里使用了 forEach 方法遍历所有导航按钮并为其添加了点击事件监听，点击按钮时会获取到该按钮所对应的音乐链接，设置 audio 对象的 src 属性进行播放。

2.3 监听音乐播放完成事件

最后，我们需要为音乐播放结束事件添加监听，自动播放下一首音乐，代码如下所示：

audio.addEventListener('ended', () => {
  currentMusicIndex++
  if (currentMusicIndex >= playButtons.length) {
    currentMusicIndex = 0
  }
  audio.src = playButtons[currentMusicIndex].dataset.src
  audio.play()
})

这里监听了 ended 事件，该事件会在音乐播放完成时触发，播放下一首音乐时需要判断索引是否超出音乐列表的范围，并设置 audio 对象的 src 属性进行播放。

3. 示例说明

以上代码示例为静态HTML，通过jquery 呈现音乐列表实现。代码如下：

<div id="musicList">
  <ul>
    <li>
      <a href="./assets/music/m1.mp3">Music 1</a>
      <button data-src="./assets/music/m1.mp3" class="music-item-btn">播放</button>
    </li>
    <li>
      <a href="./assets/music/m2.mp3">Music 2</a>
      <button data-src="./assets/music/m2.mp3" class="music-item-btn">播放</button>
    </li>
    <li>
      <a href="./assets/music/m3.mp3">Music 3</a>
      <button data-src="./assets/music/m3.mp3" class="music-item-btn">播放</button>
    </li>
  </ul>
</div>

// 获取元素
const playButtons = $("#musicList").find(".music-item-btn")
const audio = new Audio()
let currentMusicIndex = 0

// 监听导航按钮点击事件
playButtons.on("click", function() {
  currentMusicIndex = $(this).parent().index()
  audio.src = $(this).data("src")
  audio.play()
})

// 监听音乐播放完成事件
audio.addEventListener('ended', () => {
  currentMusicIndex++
  if (currentMusicIndex >= playButtons.length) {
    currentMusicIndex = 0
  }
  audio.src = playButtons.eq(currentMusicIndex).data("src")
  audio.play()
})

另外，根据实际需要，可以进一步优化代码，比如支持随机播放、单曲循环、暂停等功能，在此就不展开了。