菜单 搜索
首页 前端知识 Vue2仿网易云风格音乐播放器（附源码）

Vue2仿网易云风格音乐播放器（附源码）

2024-09-30 23:09:17 前端知识 前端哥 859 916 我要收藏

Vue2仿网易云风格音乐播放器

  • 1、整体效果
  • 2、使用技术
  • 3、实现内容
  • 4、源码
  • 5、使用图片

1、整体效果

在这里插入图片描述
在这里插入图片描述

2、使用技术

  • 使用了HTML5 + CSS3进行页面布局及美化
  • 使用Vue2进行数据渲染与页面交互
  • 使用Axios发送http请求获取数据

3、实现内容

  • 实现了搜索歌曲功能，输入歌手或歌曲关键字可获取对应的内容
  • 实现了歌曲播放功能，点击歌名或左侧超链接可播放对应的歌曲
  • 实现了封面黑胶旋转效果，歌曲播放时旋转，歌曲未播放时停止旋转
  • 实现了展示歌曲热门评论的功能，会显示当前歌曲排名前20的热门评论
  • 实现了播放MV的功能，点击右侧超链接弹出播放MV

4、源码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue仿网易云音乐</title>
    <link rel="icon" href="http://s1.music.126.net/style/favicon.ico?v20180823">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        body {
            background-image: linear-gradient(to left, rgba(248, 121, 248, 0.623), rgba(216, 160, 6, 0.795));
        }
 
        #app {
            position: relative;
            width: 1300px;
            height: 800px;
            background-color: aliceblue;
            margin: 50px auto;
        }
 
        header {
            width: 100%;
            height: 60px;
            background-color: #ec4141;
        }
 
        .app-title {
            float: left;
        }
 
        .app-title img {
            height: 60px;
        }
 
        .app-search {
            display: block;
            float: right;
            width: 600px;
            height: 60px;
        }
 
        .app-search input {
            outline: none;
            background-color: #ec4141a6;
            border: 1px solid #cebdbd7a;
            width: 380px;
            line-height: 30px;
            margin: 15px 140px;
            font-size: 13px;
            border-radius: 5px;
            text-indent: 10px;
            color: #cebdbdfd;
        }
 
        .app-search input:focus {
            border: 1px solid #cebdbdfd;
        }
 
        .app-search img {
            width: 28px;
            position: relative;
            top: -46px;
            left: 490px;
        }
 
        footer {
            float: left;
            width: 100%;
            height: 60px;
            background-color: #f1f3f4;
        }
 
        .music-list {
            float: left;
            height: 680px;
            width: 280px;
            position: relative;
            left: -191px;
            border-right: 1px solid #e0e0e0;
            overflow-x: hidden;
            overflow-y: auto;
        }
 
        .music-list ul {
            list-style: none;
            margin-top: 0px;
        }
 
        .music-list ul li a {
            text-decoration: none;
            color: black;
            display: block;
            line-height: 46px;
            width: 278px;
            margin-left: -40px;
            text-indent: 20px;
            font-size: 12px;
        }
 
        .music-list ul li a:hover {
            background-color: #a8a4a433;
        }
 
        .music-run-image {
            width: 20px;
            position: relative;
            left: -10px;
            top: -1px;
        }
 
        .music-name {
            display: inline-block;
            width: 120px;
            height: 35px;
            overflow: hidden;
            margin-left: -20px;
        }
 
        .music-mv-image {
            width: 20px;
            position: relative;
            left: 100px;
            top: 0px;
        }
 
        .comment-list {
            float: right;
            height: 680px;
            width: 300px;
            border-left: 1px solid #e0e0e0;
            overflow: hidden;
            overflow-y: auto;
        }
        .comment-list ul li{
            width: 280px;
            padding-left: 10px;
            list-style: none;
            font-size: 13px;
            position: relative;
            left: -40px;
        }
        .comment-title{
            display: block;
            line-height: 40px;
            text-indent: 10px;
            margin-top: 5px;
            font-weight: 800;
        }
        .user-header{
            width: 35px;
            height: 35px;
            border-radius: 50%;
        }
        .username{
            position: relative;
            top: -15px;
            left: 10px;
            font-size: 12px;
        }
        .music-main {
            height: 680px;
            width: 700px;
            position: absolute;
            left: 300px;
        }
 
        .music-cover{
            width: 250px;
            position: relative;
            left: 180px;
            top: 80px;
            border-radius: 50%;
            border: 50px solid #2a2b2dd2;
        }
        .music-detail{
            display: block;
            color: #2a2b2dab;
            position: relative;
            text-align: center;
            top: 120px;
        }
 
        .fadenum{
            animation:fadenum 60s infinite linear;
        }
 
        @keyframes fadenum {
            100%{
                transform:rotate(360deg);
            }
        }
 
        ::-webkit-scrollbar {
            width: 1px;
            height: 16px;
            background-color: #F5F5F5;
        }
 
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(126, 123, 123, 0.103);
            border-radius: 10px;
            background-color: #F5F5F5;
        }
 
        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(139, 136, 136, 0.3);
            background-color: rgba(199, 196, 196, 0.507);
        }
        .music-player{
            width: 1300px;
        }
        .music-mv{
            position:absolute;
            z-index: 9999;
            width: 1920px;
            height: 937px;
            background-color: #2a2b2da6;
            top: -50px;
            left: -310px;
        }
        .music-mv video{
            position:relative;
            width: 900px;
            height: 500px;
            left: 500px;
            top: 150px;
        }
        
    </style>
</head>
 
<body>
    <div id="app">
        <header>
            <span class="app-title">
                <img src="images/1675859603672.png">
            </span>
            <span class="app-search">
                <input type="text" placeholder="搜索歌曲..." v-model="keywords" @keyup.enter="getMusicMesage" />
                <a href="javascript:void(0);" @click="getMusicMesage">
                    <img src="/images/search-icon.png">
                </a>
            </span>
        </header>
 
        <main>
            <div class="music-list">
                <ul>
                    <li v-for="(item,index) in musicList">
                        <a href="#">
                            <img src="images/run.png" class="music-run-image" @click="runMusic(item.id)">
                            <span class="music-name" @click="runMusic(item.id)">
                                {{ item.name }}
                            </span>
                            <img v-if="item.mvid!=0" @click="playMv(item.mvid)" src="images/24gf-playSquare.png" class="music-mv-image">
                        </a>
                    </li>
                </ul>
            </div>
            <div class="music-main">
                <img :src="picUrl" v-show="picUrl!=''" class="music-cover" :class="{fadenum:isPlay}">
                <sapn v-text="musicDetail" class="music-detail"></sapn>
            </div>
            <div class="comment-list">
                <span class="comment-title">热门评论</span>
                <ul>
                    <li v-for="item in hotCommentList">
                        <img class="user-header" :src="item.user.avatarUrl">
                        <span class="username">{{ item.user.nickname }}</span>
                        <p>{{ item.content }}</p>
                    </li>
                </ul>
            </div>
        </main>
 
        <footer>
            <audio :src="musicUrl"  class="music-player" @play="play" @pause="pause" controls autoplay loop></audio>
        </footer>
        <div class="music-mv" v-show="isShow"  @click="closeMusicMv">
            <video :src="mvUrl" controls autoplay loop></video>
        </div>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                keywords: "五月天",
                musicList: [],
                musicUrl:"",
                picUrl:"",
                musicDetail:"",
                hotCommentList:[],
                isPlay:false,
                isShow:false,
                mvUrl:""
            },
            methods: {
                getMusicMesage() {
                    let that = this;
                    axios.get("https://autumnfish.cn/search?keywords=" + this.keywords).then(
                        function (response) {
                            that.musicList = response.data.result.songs;
                            let firstId = response.data.result.songs[0].id;
                        },
                        function (error) {
                            console.log(error);
                            alert("服务器错误!");
                        }
                    )
                },
                runMusic(id){
                    let that = this;
                    axios.get("https://autumnfish.cn/song/url?id="+id).then(
                        function(response){
                            that.musicUrl = response.data.data[0].url;
                            that.getCover(id);
                            that.getComment(id);
                        },
                        function(err){
                            alert("服务器错误！");
                        }
                    )
                },
                getCover(id){
                    let that = this;
                    axios.get("https://autumnfish.cn/song/detail?ids="+id).then(
                        function(response){
                            that.picUrl = response.data.songs[0].al.picUrl;
                            that.musicDetail = response.data.songs[0].name + "   ——   " +
                            response.data.songs[0].ar[0].name;
                        },
                        function(err){
                            alert("服务器错误！");
                        }
                    )
                },
                getComment(id){
                    let that = this;
                    axios.get("https://autumnfish.cn/comment/hot?type=0&id="+id).then(
                        function(response){
                            that.hotCommentList = response.data.hotComments;
                        },
                        function(error){
                            alert("服务器错误");
                        }
                    )
                },
                play(){
                    this.isPlay = true;
                },
                pause(){
                    this.isPlay  = false;
                },
                playMv(id){
                    this.musicUrl = "";
                    this.pause();
                    let that = this;
                    axios.get("https://autumnfish.cn/mv/url?id="+id).then(
                        function(response){
                            that.mvUrl = response.data.data.url;
                            that.isShow = true;
                        },
                        function(error){
                            alert("服务器错误");
                        }
                    )
                },
                closeMusicMv(){
                    this.isShow = false;
                    this.mvUrl = "";
                }
            }
        })
            app.getMusicMesage();
            
    </script>
</body>
 
</html>
复制

5、使用图片

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/18825.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！