原生js音乐播放器搜索功能代码

以下是一个基于原生 JavaScript 的音乐播放器搜索功能代码示例：

HTML 结构：

<div class="music-player">
  <input type="text" id="search-input" placeholder="搜索歌曲">
  <ul id="playlist">
    <li data-src="path/to/song1.mp3">歌曲1</li>
    <li data-src="path/to/song2.mp3">歌曲2</li>
    <li data-src="path/to/song3.mp3">歌曲3</li>
    <!-- 其他歌曲 -->
  </ul>
  <audio id="audio-player"></audio>
</div>

CSS 样式：

.music-player {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

#search-input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
  margin-bottom: 10px;
}

#playlist {
  list-style: none;
  padding: 0;
  margin: 0;
}

#playlist li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

#playlist li:hover {
  background-color: #f2f2f2;
}

JavaScript 代码：

const searchInput = document.getElementById("search-input");
const playlist = document.getElementById("playlist");
const audioPlayer = document.getElementById("audio-player");

// 歌曲列表
const songs = [
  { title: "歌曲1", src: "path/to/song1.mp3" },
  { title: "歌曲2", src: "path/to/song2.mp3" },
  { title: "歌曲3", src: "path/to/song3.mp3" },
  // 其他歌曲
];

// 初始化歌曲列表
function initPlaylist() {
  playlist.innerHTML = "";
  for (let i = 0; i < songs.length; i++) {
    const song = songs[i];
    const li = document.createElement("li");
    li.textContent = song.title;
    li.setAttribute("data-src", song.src);
    playlist.appendChild(li);
  }
}

// 搜索歌曲
function searchSongs() {
  const query = searchInput.value.trim().toLowerCase();
  const filteredSongs = songs.filter(song =>
    song.title.toLowerCase().includes(query)
  );
  playlist.innerHTML = "";
  for (let i = 0; i < filteredSongs.length; i++) {
    const song = filteredSongs[i];
    const li = document.createElement("li");
    li.textContent = song.title;
    li.setAttribute("data-src", song.src);
    playlist.appendChild(li);
  }
}

// 播放歌曲
function playSong(src) {
  audioPlayer.src = src;
  audioPlayer.play();
}

// 初始化
initPlaylist();

// 监听搜索输入框变化
searchInput.addEventListener("input", searchSongs);

// 监听歌曲列表点击
playlist.addEventListener("click", e => {
  const li = e.target.closest("li");
  if (li) {
    const src = li.getAttribute("data-src");
    playSong(src);
  }
});

这段代码会在页面上创建一个音乐播放器，其中包含一个搜索框、一个歌曲列表和一个音频播放器。当用户在搜索框中输入查询时，会根据搜索关键词过滤歌曲列表。当用户点击歌曲列表中的某一项时，会播放该歌曲。