轻松搞定！用Vue3 + 网易云API，打造私人在线音乐播放器

2022-12-27 12:45:53

引入Vue3框架和设置项目环境

在开始构建音乐播放器前，先确保本地开发环境中已安装Node.js与npm。接着利用Vue CLI初始化新项目。

npm install -g @vue/cli
vue create my-music-player
cd my-music-player

集成网易云API接口

注册网易云开发者账号并申请相关API Key后，可以使用这些API来获取音乐数据。例如通过/song/detail接口查询歌曲详情：

// 在Vue组件methods中调用此函数
fetchSongDetail(id) {
    const apiKey = 'your-api-key-here';
    fetch(`https://music.163.com/api/song/detail?ids=[${id}]&csrf_token=`, { headers: {'cookie': `os=pc; appver=2.0.2; __remember_me=true; MUSIC_U=${apiKey}` }})
        .then(response => response.json())
        .then(data => console.log(data));
}

实现音乐播放功能

使用HTML5的<audio>标签实现基本播放控制。配合Vue的数据绑定和事件监听机制，可以构建一个用户友好的播放界面。

<!-- template部分 -->
<audio :src="currentSongUrl" controls ref="player"></audio>
<button @click="play">播放</button>

<script setup>
import {ref} from 'vue'

const currentSongUrl = ref('');
const player = ref(null);

function play() {
    player.value.play();
}
</script>

歌曲搜索功能实现

通过网易云API的/search接口，用户可以按关键词搜索歌曲。

// 搜索函数
searchSongs(query) {
    fetch(`https://music.163.com/api/search/get?hlpretag=%E2%94%A0&hlposttag=%E2%94%A2&s=${query}&type=1&offset=0&total=true&limit=5`, { headers: {'cookie': `os=pc; appver=2.0.2` }})
        .then(response => response.json())
        .then(data => console.log('搜索结果:', data.result.songs));
}

歌单管理功能

网易云API提供歌单相关的接口，用户可以创建、编辑和删除自己的播放列表。

// 添加歌曲到指定歌单的示例代码
addSongToPlaylist(playlistId, songId) {
    const apiKey = 'your-api-key-here';
    fetch(`https://music.163.com/api/playlist/manipulate/tracks`, { 
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded', 'cookie': `os=pc; appver=2.0.2` },
        body: `op=add&pid=${playlistId}&trackIds=[${songId}]`
    }).then(response => console.log('歌单更新:', response))
}

评论查看功能

网易云API也支持获取歌曲评论的功能，为用户提供互动空间。

fetchComments(songId) {
    fetch(`https://music.163.com/api/v1/resource/comments/R_SO_4_${songId}`, { headers: {'cookie': `os=pc; appver=2.0.2` }})
        .then(response => response.json())
        .then(data => console.log('评论:', data.comments));
}