通过网易的API完成一个简易的音乐播放器

效果图

工程环境

1、使用node在本地部署网易云音乐API接口

下载解压

链接:https://pan.baidu.com/s/1YQiMJoUMEYlMz14FH5xxRA?pwd=36o5
提取码:36o5
在这里插入图片描述

工程目录概览

(js文件夹里面放了music.html和main.js和vue.js)
在这里插入图片描述

工程目录)(有点重复,懒得删除了)

在这里插入图片描述

main.js

/*1:歌曲搜索接口请求地址:https://autumnfish.cn/search请求方法:get请求参数:keywords(查询关键字)响应内容:歌曲搜索结果2:歌曲url获取接口请求地址:https://autumnfish.cn/song/url请求方法:get请求参数:id(歌曲id)响应内容:歌曲url地址3.歌曲详情获取请求地址:https://autumnfish.cn/song/detail请求方法:get请求参数:ids(歌曲id)响应内容:歌曲详情(包括封面信息)4.热门评论获取请求地址:https://autumnfish.cn/comment/hot?type=0请求方法:get请求参数:id(歌曲id,地址中的type固定为0)响应内容:歌曲的热门评论5.mv地址获取请求地址:https://autumnfish.cn/mv/url请求方法:get请求参数:id(mvid,为0表示没有mv)响应内容:mv的地址
*/
var app = new Vue({el: "#player",data: {// 查询关键字query: "",// 歌曲数组musicList: [],// 歌曲地址musicUrl: "",// 歌曲封面musicCover: "",// 歌曲评论hotComments: [],// 动画播放状态isPlaying: false,// 遮罩层的显示状态isShow: false,// mv地址mvUrl: ""},methods: {// 歌曲搜索searchMusic: function() {var that = this;axios.get("http://localhost:3000/search?keywords=" + this.query).then(function(response) {// console.log(response);that.musicList = response.data.result.songs;//console.log(response.data.result.songs);},function(err) {});},// 歌曲播放playMusic: function(musicId) {//   console.log(musicId);var that = this;// 获取歌曲地址axios.get("http://localhost:3000/song/url?id=" + musicId).then(function(response) {// console.log(response);//console.log(response.data.data[0].url);that.musicUrl = response.data.data[0].url;},function(err) {});// 歌曲详情获取axios.get("http://localhost:3000/song/detail?ids=" + musicId).then(function(response) {// console.log(response);// console.log(response.data.songs[0].al.picUrl);that.musicCover = response.data.songs[0].al.picUrl;},function(err) {});// 歌曲评论获取axios.get("http://localhost:3000/comment/music?id=" + musicId).then(function(response) {// console.log(response);// console.log(response.data.hotComments);that.hotComments = response.data.hotComments;},function(err) {});},// 歌曲播放play: function() {// console.log("play");this.isPlaying = true;},// 歌曲暂停pause: function() {// console.log("pause");this.isPlaying = false;},// 播放mvplayMV: function(mvid) {var that = this;axios.get("http://localhost:3000/mv/url?id=" + mvid).then(function(response) {// console.log(response);console.log(response.data.data.url);that.isShow = true;that.mvUrl = response.data.data.url;},function(err) {});},// 隐藏hide: function() {this.isShow = false;}}
});

mymusic.html


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>我的音乐</title><!-- 样式 --><link rel="stylesheet" href="../CSS/index.css">
</head><body>
<div class="wrap"><!-- 播放器主体区域 --><div class="play_wrap" id="player"><div class="search_bar"><img src="../images/player_title.png" alt="" /><!-- 搜索歌曲 --><input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" /></div><div class="center_con"><!-- 搜索歌曲列表 --><div class='song_wrapper'><ul class="song_list"><li v-for="item in musicList"><a href="javascript:;" @click="playMusic(item.id)"></a><b>{{ item.name }}</b><span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span></li></ul><img src="../images/line.png" class="switch_btn" alt=""></div><!-- 歌曲信息容器 --><div class="player_con" :class="{playing:isPlaying}"><img src="../images/player_bar.png" class="play_bar" /><!-- 黑胶碟片 --><img src="../images/disc.png" class="disc autoRotate" /><img :src="musicCover" class="cover autoRotate" /></div><!-- 评论容器 --><div class="comment_wrapper"><h5 class='title'>热门留言</h5><div class='comment_list'><dl v-for="item in hotComments"><dt><img :src="item.user.avatarUrl" alt=""></dt><dd class="name">{{ item.user.nickname}}</dd><dd class="detail">{{ item.content }}</dd></dl></div><img src="../images/line.png" class="right_line"></div></div><div class="audio_con"><audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio></div><div class="video_con" v-show="isShow" style="display: none;"><video :src="mvUrl" controls="controls"></video><div class="mask" @click="hide"></div></div></div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
</body></html>

vue.js

在这里插入图片描述

https://gitee.com/yang-huishan/music.git

index.css

在这里插入图片描述

https://gitee.com/yang-huishan/music.git

运行播放器的图片资源

链接:https://pan.baidu.com/s/1YQiMJoUMEYlMz14FH5xxRA?pwd=36o5
提取码:36o5

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/226395.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Boot工程快速启动【Linux】

Boot工程快速启动【Linux】 在idea中打包cd usr/在local文件夹下mkdir app进入app文件夹把打包好的文件&#xff08;只上传其中的jar&#xff09;上传到app文件下检查linux中的Java版本&#xff0c;保证和项目的Java 版本保持一致运行 java -jar sp补全***.jar想看效果得查询当…

MySQL进阶-InnoDB引擎

✨作者&#xff1a;猫十二懿 ❤️‍&#x1f525;账号&#xff1a;CSDN 、掘金 、语雀 、Github &#x1f389;公众号&#xff1a;猫十二懿 一、InnoDB 逻辑存储引擎 InnoDB的逻辑存储结构如下图所示&#xff1a; 大小关系&#xff1a;表空间&#xff08;Tablespace&#xff0…

【攻防世界-misc】Encode

1.下载解压文件&#xff0c;打开这个内容有些疑似ROT13加密&#xff0c;利用在线工具解密&#xff1a;ROT13解码计算器 - 计算专家 得到了解密后的值 得到解码结果后&#xff0c;看到是由数字和字母组成&#xff0c;再根据题目描述为套娃&#xff0c;猜测为base编码&#xff08…

【小布_ORACLE】Part11-1--RMAN Backups笔记

Oracle的数据备份于恢复RMAN Backups 学习第11章需要掌握&#xff1a; 一.RMAN的备份类型 二.使用backup命令创建备份集 三.创建备份文件 四.备份归档日志文件 五.使用RMAN的copy命令创建镜像拷贝 文章目录 Oracle的数据备份于恢复RMAN Backups1.RMAN Backup Concepts&#x…

TiDB 7.x 源码编译之 TiDB Server 篇,及新特性详解

本文将介绍如何编译 TiDB Server 源码。以及阐释 TiDB Server 7.x 的部分新特性。 TiDB v7.5.0 LTS 计划于 2023 年 11 月正式 Release&#xff0c;目前代码虽未冻结&#xff0c;但已经可以看到 Alpha 版本的 Code 了&#xff0c;本文代码将以 v7.5.0-alpha 为基准。 TiDB Se…

通达信抛物线SAR指标原理详解、参数设置及选股公式

抛物线指标(SAR)是由技术分析大师威尔斯威尔德(Welles Wilder)发明的&#xff0c;在其1978 年出版的《技术交易系统新概念》一书中介绍了该指标。SAR指标通过跟踪股票价格的动态变化&#xff0c;在走势图上以一系列点的形式显示&#xff0c;提供了一种判断趋势反转的方法&#…

主机的具体权限规划:ACL的使用

目的&#xff1a;针对某一用户或某一组来设置特定权限需求&#xff0c;针对上&#xff0c;接着设置 ACL可以针对单一用户&#xff0c;文件&#xff0c;或者目录来进行rwx的权限设置&#xff0c;对于需要特殊权限的设置非常有帮助。 第一&#xff0c;查看文件系统是否支持&…

易点天下携AIGC创新成果KreadoAI亮相数贸会,解锁电商文化出海新可能

11月27日&#xff0c;第二届全球数字贸易博览会&#xff08;以下简称“数贸会”&#xff09;在浙江杭州完美落幕。作为出海营销领域最早一批布局AIGC战略的营销科技公司&#xff0c;易点天下受邀与来自全球800余家境内外数字贸易企业同台参展&#xff0c;并分享了旗下AIGC数字营…

04、基于高斯分布的异常检测算法

04、基于高斯分布的异常检测算法原理与实践 开始学习机器学习啦&#xff0c;已经把吴恩达的课全部刷完了&#xff0c;现在开始熟悉一下复现代码。对这个手写数字实部比较感兴趣&#xff0c;作为入门的素材非常合适。 数据的严重偏斜往往会导致监督学习算法面临巨大的挑战——…

做项目,要从学生思维里跳出来

今天分享下在23期群的聊天记录&#xff0c;关于做项目正确的思维&#xff0c;自己曾经走过一些弯路&#xff0c;希望大家能Get到。 做项目&#xff0c;一定要从学生思维里跳出来。 1.学生思维就是前期就想每个细节都要搞懂&#xff0c;感觉才能往下&#xff0c;其实像lora&…

【数据结构复习之路】树和二叉树(严蔚敏版)万字详解主打基础

专栏&#xff1a;数据结构复习之路 复习完上面四章【线性表】【栈和队列】【串】【数组和广义表】&#xff0c;我们接着复习 树和二叉树&#xff0c;这篇文章我写的非常详细且通俗易懂&#xff0c;看完保证会带给你不一样的收获。如果对你有帮助&#xff0c;看在我这么辛苦整理…

pyecharts绘制自定义点+连线取消箭头+时间帧叠加

pyecharts之Geo地图大法&#xff08;详解&#xff0c;代码带注释效果图&#xff09; 近期项目上有地图自定义绘点连线分严重等级的需求&#xff0c;整了&#xff0c;分开处理啥都好说&#xff0c;多个数据放在同一维度的时候&#xff0c;只恨pyecharts的开发者为什么把功能整得…