聆听音符，抒写诗篇：网易云音乐WebApp开发之旅

前端

2023-10-12 09:09:09

前言

音乐，是人类灵魂的共鸣，是穿越时空的桥梁。网易云音乐，作为国内领先的音乐流媒体平台，以其丰富的曲库、优质的服务和独特的社交属性，吸引了亿万用户的喜爱。

如果你也是网易云音乐的忠实用户，是否曾想过将这份热爱融入到自己的技术领域中呢？本文将为你带来一份详细的教程，指导你如何使用Vue3和TypeScript构建一个功能齐全的网易云音乐WebApp，让你随时随地畅享音乐盛宴。

2. 技术栈介绍

在本教程中，我们将使用以下技术栈：

Vue3：一个渐进式JavaScript框架，可以轻松构建高效、灵活的Web应用程序。
TypeScript：一个严格类型化的编程语言，可以帮助我们编写更健壮、更易维护的代码。
CSS：用于控制网页的外观和布局。
HTML：用于构建网页的结构。
JavaScript：一种高级编程语言，可以在网页上实现交互和动态效果。

3. 项目搭建

首先，我们需要创建一个新的Vue3项目。你可以使用Vue CLI工具来快速创建一个项目。

vue create my-netease-music-webapp

进入项目目录，安装TypeScript：

npm install -D typescript

然后，你需要创建一个tsconfig.json文件来配置TypeScript编译器。你可以使用以下配置：

{
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "sourceMap": true,
    "strict": true,
    "jsx": "react",
    "noImplicitAny": true,
    "esModuleInterop": true
  },
  "include": [
    "src"
  ]
}

4. 构建网易云音乐WebApp

现在，我们可以开始构建我们的网易云音乐WebApp了。

4.1 歌曲播放器

首先，我们需要创建一个歌曲播放器组件。这个组件将负责播放歌曲、控制播放进度和显示歌曲信息。

<template>
  <div class="music-player">
    <div class="player-controls">
      <button @click="play">播放</button>
      <button @click="pause">暂停</button>
      <button @click="next">下一首</button>
      <button @click="previous">上一首</button>
      <input type="range" v-model="currentTime" @input="seek">
    </div>
    <div class="song-info">
      <div class="song-title">{{ currentSong.title }}</div>
      <div class="artist-name">{{ currentSong.artist }}</div>
      <div class="album-name">{{ currentSong.album }}</div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useSong } from './useSong'

export default {
  setup() {
    const { currentSong, play, pause, next, previous, seek } = useSong()
    const currentTime = ref(0)

    return {
      currentSong,
      currentTime,
      play,
      pause,
      next,
      previous,
      seek
    }
  }
}
</script>

<style>
.music-player {
  width: 100%;
  height: 100px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.player-controls {
  display: flex;
  align-items: center;
}

.player-controls button {
  margin-right: 10px;
}

.song-info {
  margin-left: 20px;
}

.song-title {
  font-size: 24px;
}

.artist-name {
  font-size: 16px;
}

.album-name {
  font-size: 14px;
}
</style>

4.2 歌曲列表

接下来，我们需要创建一个歌曲列表组件。这个组件将负责显示歌曲列表并允许用户选择歌曲进行播放。

<template>
  <ul class="song-list">
    <li v-for="song in songs" :key="song.id">
      <button @click="playSong(song)">{{ song.title }}</button>
    </li>
  </ul>
</template>

<script>
import { ref, computed } from 'vue'
import { useSongs } from './useSongs'

export default {
  setup() {
    const { songs, playSong } = useSongs()

    return {
      songs,
      playSong
    }
  }
}
</script>

<style>
.song-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.song-list li {
  margin-bottom: 10px;
}
</style>

4.3 搜索栏

最后，我们需要创建一个搜索栏组件。这个组件将允许用户搜索歌曲。

<template>
  <input type="text" v-model="keyword" @input="search">
</template>

<script>
import { ref, computed } from 'vue'
import { useSearch } from './useSearch'

export default {
  setup() {
    const keyword = ref('')
    const { search } = useSearch()

    return {
      keyword,
      search
    }
  }
}
</style>