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

最新推荐文章于 2024-04-24 12:46:56 发布
最新推荐文章于 2024-04-24 12:46:56 发布
阅读量452 收藏 2
点赞数
文章标签： java html5 css vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/malloc_yhs/article/details/134622979
版权

效果图

工程环境

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;
        },
        // 播放mv
        playMV: 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

羊羊不懒
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网易云音乐可用的api
09-06
网易云音乐的api，可以直接使用，需要的可以自行下载，谢谢支持
网易云音乐API接口
AXQ_1314的博客
04-11 9422
csrf_token=hlpretag=&hlposttag=&s=（输入音乐名称）&type=1&offset=0&total=true&limit=2。csrf_token=hlpretag=&hlposttag=&s=孤勇者&type=1&offset=0&total=true&limit=2。请求参数：id(查询关键字)
获取网易云音乐开放接口api的推荐歌单
fantasyfzg的博客
12-09 6923
获取歌单
开源的网易云音乐API项目都是怎么实现的？
sinat_33488770的博客
07-05 3110
上一篇文章这个高颜值的开源第三方网易云音乐播放器你值得拥有介绍了一个开源的第三方网易云音乐播放器，这篇文章我们来详细了解一下其中使用到的网易云音乐项目NeteaseCloudMusicApi的实现原理。NeteaseCloudMusicApi使用开发，主要用到的框架和库有两个，一个Web应用开发框架Express，一个请求库Axios，这两个大家应该都很熟了就不过多介绍了。项目的入口文件为： 调用了文件的方法，让我们转到这个文件，方法简化后如下： 主要是启动监听指定端口，所以创建应用的主要逻辑在方法： 首先
网易云音乐API,的调用方法 ，vue项目中（在本地使用）
热门推荐
ddx2019的博客
03-22 1万+
1. 在cmd 命令行下：安装并启动： git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git /* 下载 */ cd NeteaseCloudMusicApi /* 进入项目的根目录*/ yarn 或者 npm install /*安装依赖*/ node app.js /* 运行项目，启动该 */ ...
获取网易云音乐接口以及使用
小冯的博客
01-16 1万+
不多说，直接上 1.网易云音乐接口文档 https://api.imjad.cn/cloudmusic.md 专辑图片可以直接网易页面获取 2.不过网易很贴心，有给你直接用的 链接：https://music.163.com/#/song?id=423228325 https://music.163.com/#/outchain/2/27571483/ 直接复制就能用了 3.播放器可修...
【API源码】各大音乐平台歌曲mp3地址解析接口
Hmily的博客
07-28 9740
一个聚合音乐平台歌曲解析API接口，可根据歌曲名称和歌曲ID获取mp3歌曲链接。源码地址：https://github.com/ihmily/music-api。具体详情自行看源码，可以自己部署到服务器，上传即可用。1、根据歌曲id解析歌曲。2、根据歌曲名称获取歌曲mp3播放地址
QT音乐播放器（接入网易云API）
m0_56921470的博客
10-08 4177
QT在线音乐播放器（接入网易云API）
会python的不容错过：网易云音乐Python版API
盧瞳的代码博客
12-31 673
惯用Python喜欢听歌的人不要错过这个Python项目，支持包括登录接口在内原项目的200多个接口。已打包发布PyPi
网易云音乐/QQ音乐API更新,支持多音质切换/MV获取
Mrdong916
10-25 6539
自从上一版开源过后到现在音乐接口的调用量已经达到了快100W,但是最近由于网易云的更新,导致部分接口不能使用,最近在工作之余抽出时间把API重写。 本次API版本不再使用PHP,使用Java,相比以前速度更快（毕竟我是撸Java的,不会PHP）,前期不考虑开源,当API完善差不多的时候再考虑开源,如有需要请加群联系我。 废话不多说，直接上说明文档 当前支持平台 网易云音乐 QQ音乐 1. ...
网易云音乐在线解析API接口
Microa-securit Network Co Ltd.
03-26 6272
通过网易云音乐ID解析出音乐直链等信息
VUE 唯美网易云音乐播放器
08-12
用途： 帮助前端开发人员创建一个美观的音乐播放器应用，能够访问网易云音乐API来搜索并播放歌曲。 资源描述： 这个资源是一个基于Vue.js构建的网易云音乐播放器，旨在提供用户一个美观、流畅的音乐播放体验。 内容...
网易云音乐外链播放器代码的一个bug
01-07
最近想给网站里插入一个音乐，虽然网易云音乐支持外链播放器，但是实在是太不容易了。这里建议大家用本地音乐。 首先网易云音乐大部分歌曲是不支持外链播放器的，像是这样； csdn里也有很多博客写到可以找到这些歌曲...
仿网易云本地音乐播放器
07-27
仿网易云界面本地音乐播放器，实现的主要功能有：本地音乐的扫描显示、音乐的播放、音乐播放顺序的设置（随机、顺序，单曲循环等）、通知栏显示歌曲播放信息、通过通知栏控制音乐的播放、仿网易云音乐中间胶片旋转和...
安卓remusic仿网易音乐播放器源代码
11-09
安卓remusic仿网易音乐播放器源代码 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]
300行代码写一个音乐播放器小程序及网易云音乐API介绍
03-29
刚进公司不久，因为公司部门年后业务拓展的关系，可能在年后会被分配到公司的微信公众号组做小程序相关的开发工作，因此写了个微信小程序 wx-audio 踩坑。目前还有一些功能没有写完：如返回多首歌曲、控制播放时间...
mybatisPlus使用MetaObjectHandler对字段进行更新
m0_56356631的博客
04-23 766
都是符合我们的预期的。
实现自定义注解、实现自定义幂等性注解
qq_44721738的博客
04-23 1035
添加 Spring AOP 依赖。创建自定义注解。创建一个新的 Java 注解类，通过@interface关键字来定义，并可以添加元注解以及属性。@Target(ElementType.METHOD) //表示作用于方法上@Retention(RetentionPolicy.RUNTIME) // 表示这个注解在运行时是可见的，这样 AOP 代理才能在运行时读取到这个注解编写 AOP 拦截（自定义注解）的逻辑代码。@Aspect@Component// 方法执行前的处理。
PageHelper实现分页查询
最新发布
m0_63849044的博客
04-24 1083
这行代码是在使用 MyBatis Generator (MBG) 或类似的 MyBatis 工具生成的代码来构建查询条件。（可能是MyBatis的Mapper接口）来执行基于前面定义的查询条件的查询，并获取结果列表。实例之后会被用来设置各种查询条件，如字段的等于、不等于、大于、小于、模糊查询等。实体类生成的辅助类，它通常包含了一些静态内部类和方法，用于构建查询条件。在MyBatis中，这样的对象通常用于构建查询条件。对象，可能用于作为查询条件）。的一个内部类，用于定义查询的具体条件。
写一个仿网易云音乐播放器的代码
05-30
本人无法在此回答您的问题，因为这是一个比较复杂的问题，需要大量的代码编写和图形界面设计。如果您需要一个仿网易云音乐播放器的代码，建议您自行学习编程和图形设计相关知识，并参考一些相关的教程和开源项目。如果您已经具备了相关技能，可以考虑使用一些开源的框架和库，如 Qt、wxWidgets、Electron 等，来实现您的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值