基于JavaScript开发网页音乐推荐应用

介绍

音乐推荐应用现在非常普遍，我们可以看到很多像 Spotify、Pandora 和 SoundCloud 这样的流媒体平台。

这个项目将使用 JavaScript 创建一个简单的音乐推荐应用。用户可以搜索、播放和喜欢音乐，应用可以根据用户的偏好推荐新的歌曲。

用到的技术

HTML

HTML 是网页的骨架，用于定义页面的内容和结构。在这个应用中，我们将使用 HTML 来构建页面的各个组件。

  <div class="container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      ...
    </div>
    <!-- 推荐歌曲列表 -->
    <div class="recommended-songs">
      ...
    </div>
    <!-- 播放列表 -->
    <div class="playlist">
      ...
    </div>
  </div>

CSS

CSS 是用于美化页面的样式表语言。在这个应用中，我们将使用 CSS 来定义页面的外观和布局。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.search-bar {
  width: 100%;
  margin-bottom: 1rem;
  padding: 1rem;
  ...
}
.recommended-songs {
  width: 100%;
  ...
}
.playlist {
  width: 100%;
  ...
}

JavaScript

JavaScript 是一种通用编程语言，用于编写网页上动态的行为。在这个应用中，我们将使用 JavaScript 来实现搜索、播放和推荐歌曲。

功能实现

搜索

首先，我们需要添加一个搜索栏，让用户可以输入搜索关键字。当用户输入关键字并点击搜索按钮时，应用会使用这些关键字查询 Web API 并返回匹配的歌曲。

async function searchSongs(query) {
  const response = await fetch(`https://some-music-api.com/search?query=${query}`);
  const songs = await response.json();
  return songs;
}
const searchButton = document.querySelector('#search-button');
searchButton.addEventListener('click', async () => {
  const searchInput = document.querySelector('#search-input');
  const query = searchInput.value;
  const songs = await searchSongs(query);
  // 显示搜索结果
  showSongs(songs);
});

播放和喜欢

当用户点击歌曲时，应用应该播放这首歌曲。用户还可以喜欢一个歌曲，应用应该记录这个用户喜欢的歌曲并在将来的推荐中考虑这个歌曲。

function playSong(song) {
  const audioElement = document.querySelector('#audio');
  const sourceElement = document.querySelector('#audio-source');
  sourceElement.src = song.url;
  audioElement.load();
  audioElement.play();
}
function likeSong(song) {
  // 记录用户喜欢的歌曲，例如：
  localStorage.setItem('likedSongs', JSON.stringify([...likedSongs, song]));
}
const songElements = document.querySelectorAll('.song');
songElements.forEach(songElement => {
  const playButton = songElement.querySelector('.play-button');
  const likeButton = songElement.querySelector('.like-button');
  const song = {
    name: songElement.querySelector('.song-name').textContent,
    artist: songElement.querySelector('.song-artist').textContent,
    url: songElement.querySelector('.song-url').href
  };
  playButton.addEventListener('click', () => {
    playSong(song);
  });
  likeButton.addEventListener('click', () => {
    likeSong(song);
  });
});

推荐

一旦用户开始喜欢歌曲，应用将开始为他们推荐新歌曲。这可以通过使用用户已经喜欢的歌曲作为查询参数来实现。

async function recommendSongs(likedSongs) {
  const response = await fetch(`https://some-music-api.com/recommend?likedSongs=${JSON.stringify(likedSongs)}`);
  const songs = await response.json();
  return songs;
}
const likedSongs = JSON.parse(localStorage.getItem('likedSongs'));
if (likedSongs) {
  const recommendedSongs = await recommendSongs(likedSongs);
  showSongs(recommendedSongs);
}

结论

在该项目中，我们使用 HTML、CSS 和 JavaScript 来实现了一个基本的音乐推荐应用。用户可以搜索、播放和喜欢歌曲，应用可以根据用户的偏好推荐新歌曲。