1000字范文 > 【休憩时的练手】—— 制作简易的网易云音乐播放器

【休憩时的练手】—— 制作简易的网易云音乐播放器

时间：2024-02-17 07:53:44

制作简易的网易云音乐播放器

1、需求分析2、使用的API3、静态播放器界面效果4、功能分析5、接口文件6、功能完善7、完整js代码8、最终效果9、参考博客

1、需求分析

1-在输入框中输入相应关键词搜索，可以搜索到相应歌曲列表。

2-点击歌曲，获取指定歌曲详细信息（包括：歌曲链接+歌曲图片+歌曲评论）并开始播放。

3-点击播放mv，获取相应歌曲的mv，并在mv层播放。

2、使用的API

博主使用的是网易云音乐的接口api：

1-歌曲列表搜索api：/search?keywords=雪

2-获取歌曲链接api：/song/url?id=1001232

3-获取歌曲图片api：/song/detail?ids=1001232

4-获取歌曲评论列表api：/comment/hot?id=1001232&type=0

5-获取歌曲mvapi：/mv/url?id=1001232

3、静态播放器界面效果

vue相关代码

<template><section class="container"><section class="musicPlayer"><div class="header"><div class="logo"><img src="../assets/logo.png" alt=""><h1>网易云音乐</h1></div><div class="search"><input type="text" autocomplete="off" v-model.lazy="query" @keyup.enter="searchMusic" placeholder="搜索想听的歌" /></div></div><div class="music_list"><div class="music_content"><ul><li v-for="(item,index) in musicList"><a href="javascript:;" @click.stop @click="playMusic(item.id,index)" class="el-icon-video-play icon-bofang1"></a><label @click="playMusic(item.id,index)">{{item.artists[0].name}}-{{item.name}}</label><a href="javascript:;" v-if="item.mvid!=0" @click="playMv(item.mvid)" class="el-icon-video-camera-solid icon-MV"></a></li></ul></div><div class="music_detail" :class="{playing:isPlayin}"><img src="../assets/cd_tou.png" class="music_zhen" /><img :src="musicCover" class="music_pan autoRotate" /></div><div class="comment_box"><h1>热门评论</h1><p class="title" v-if="hotComments.length<=0">暂时还没有人评论</p><div class="comment_content" v-for="item in hotComments"><div class="userimg"><img :src="item.user.avatarUrl" /></div><div class="nickname"><h3>{{item.user.nickname}}</h3><div class="comment">{{item.content}}</div></div></div></div></div><div class="audiobox"><audio id="audio" :src="musicUrl" @play="play" @pause="pause" controls autoplay loop></audio></div><div class="mv" v-show="isShow"><video ref='video' :src="mvUrl" width="100%" height="100%" controls="controls"></video></div><div class="mock" @click="hide" v-show="isShow"></div></section></section></template>

css样式代码

4、功能分析

searchMusic(){ }——关键词搜索歌曲列表

async searchMusic(){//关键词搜索歌曲列表const resp = await searchMusic({keywords: this.query})this.musicList = resp.result.songs},

playMusic(muiscId,index) { }——根据歌曲id搜素此歌曲详细信息

async playMusic(muiscId,index) {//根据歌曲id搜素此歌曲详细信息//查询歌曲链接const resp1 = await getMusic({id: muiscId})this.musicUrl = resp1.data[0].url//查询歌曲图片const resp2 = await getMusicDetail({ids: muiscId})this.musicCover = resp2.songs[0].al.picUrl;//查询歌曲评论const resp3 = await getMusicComment({id: muiscId,type: 0})this.hotComments = resp3.hotComments;}，

play(){ }——音乐暂停

play(){//音乐暂停this.isPlayin = true;//光碟停止旋转},

pause(){ }——音乐暂停

pause(){//音乐暂停this.isPlayin = false;//光碟停止旋转},

playMv(mvid){ }——根据歌曲id搜索歌曲mv

async playMv(mvid){//根据歌曲id搜索歌曲mvconst resp = await getMusicMv({id: mvid})this.mvUrl = resp.data.url;//mv层展示this.isShow = true;},

hide(){ }

hide(){//mv关闭this.isShow = false;/*关闭mv*/this.$refs.video.pause();},

5、接口文件

编写一个api文件用来处理数据请求，需要注意的是，项目需要配置代理，可以参考博客《vue&vue-cli 3.0项目中遇到的有趣问题 -（二、vue解决跨域问题）》

import axios from "axios"const searchMusicAPI = "/search" //搜索歌曲列表接口const getMusicAPI = "/song/url" //获取歌曲链接接口const getMusicDetailAPI = "/song/detail" //获取歌曲图片接口const getMusicCommentAPI="/comment/hot" //获取歌曲评论接口const getMusicMvAPI="/mv/url" //获取歌曲mv接口export async function searchMusic(params) {//搜索歌曲列表const resp = await axios({method: "get",url: searchMusicAPI,params: params,});return resp.data;}export async function getMusic(params) {//获取歌曲链接const resp = await axios({method: "get",url: getMusicAPI,params: params,});return resp.data;}export async function getMusicDetail(params) {//获取歌曲图片const resp = await axios({method: "get",url: getMusicDetailAPI,params: params,});return resp.data;}export async function getMusicComment(params) {//获取歌曲评论const resp = await axios({method: "get",url: getMusicCommentAPI,params: params,});return resp.data;}export async function getMusicMv(params) {//获取歌曲mvconst resp = await axios({method: "get",url: getMusicMvAPI,params: params,});return resp.data;}

并在需要使用的地方import {searchMusic,getMusic,getMusicDetail,getMusicComment,getMusicMv} from '../api/music'引用

6、功能完善

1-页面初始化时执行一次音乐搜索，增加代码

async mounted() {//初始化歌曲列表const resp = await searchMusic({keywords: '泠鸢yousa'})this.musicList = resp.result.songs}

2-空值搜索会报错，需要做判断处理，增加代码

async searchMusic(){//关键词搜索歌曲列表if ((this.query).trim()!=="") {//清空收尾空格，注意控制查找会报错，应剔除}},

3-点击歌曲，通过判断是不是同一个歌曲来执行是切换播放状态操作还是获取新歌曲操作，注意按钮的改变，增加代码

async playMusic(muiscId,index) {//根据歌曲id搜素此歌曲详细信息if (muiscId!==this.musicid) {//当前歌曲切换为播放状态$(".music_content ul li").eq(index).find(".icon-bofang1").removeClass("el-icon-video-play");$(".music_content ul li").eq(index).find(".icon-bofang1").addClass("el-icon-video-pause");$(".music_content ul li").not($(".music_content ul li").eq(index)).find(".icon-bofang1").removeClass("el-icon-video-pause");$(".music_content ul li").not($(".music_content ul li").eq(index)).find(".icon-bofang1").addClass("el-icon-video-play");}else {let audio = document.getElementById("audio")if (audio.paused) {//判断歌曲播放状态//暂停则切换为播放audio.play();$(".music_content ul li").eq(index).find(".icon-bofang1").removeClass("el-icon-video-play");$(".music_content ul li").eq(index).find(".icon-bofang1").addClass("el-icon-video-pause");} else {//播放则切换为暂停audio.pause();$(".music_content ul li").eq(index).find(".icon-bofang1").removeClass("el-icon-video-pause");$(".music_content ul li").eq(index).find(".icon-bofang1").addClass("el-icon-video-play");}}},

4-切换audio播放状态时，需要伴随着相应歌曲播放按钮的改变，增加代码

play(){//音乐播放//搜索当前音乐播放位置并切换为播放按钮为播放状态let index=-1;for (let i=0;i<this.musicList.length;i++){if((this.musicList)[i].id===this.musicid){index=i;}}$(".music_content ul li").eq(index).find(".icon-bofang1").removeClass("el-icon-video-play");$(".music_content ul li").eq(index).find(".icon-bofang1").addClass("el-icon-video-pause");},

5-打开或关闭mv,需要伴随着歌曲的暂停或继续，增加代码

let audio = document.getElementById("audio")//打开mv需要暂停当前音乐audio.pause();//关闭mv并继续播放当前音乐audio.play();