首页 > 其他分享 >vue基础入门综合项目练习-悦听播放器

vue基础入门综合项目练习-悦听播放器

时间:2023-05-14 17:35:49浏览次数:53  
标签:播放器 function vue 入门 color height width music left

<iframe border="0" frameborder="no" height="86" marginheight="0" marginwidth="0" src="//music.163.com/outchain/player?type=2&id=29436904&auto=1&height=66" width="100%"></iframe>

1、简介

根据B站视频 黑马程序员vue前端基础教程-4个小时带你快速入门vue 学习制作。
再次感谢 免费无私的教学视频。
感谢 @李予安丶 提供的精美的css。

2、展示

image

image

3、技术点

  1. vue2
  2. axios

4、功能说明

4.1、基本功能

  1. 搜索歌曲
  2. 播放歌曲
  3. 显示歌曲热评
  4. 播放MV

4.2、修复问题

  1. 点击MV后音乐无法暂停
  2. 关闭MV后mv仍在后台播放

5、源代码

作为入门vue的代码,采用的是单文件的形式去编写。
因为html,css,js各自代码有一点多,因此为了提升逻辑性,分开为三个文件。
注意引用css和js的引用路径

5.1 html代码

Show Code



<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>悦听~</title>
    <link rel="icon" href="http://s1.music.126.net/style/favicon.ico?v20180823">
    <!-- 引入自定义css -->
    <link rel="stylesheet" href="./19.css">
</head>
<body>
    <div id="app">
        <header>
            <span class="app-title">
                <img src="./19.title.png">
            </span>
            <!-- 搜索歌曲 -->
            <span class="app-search">
                <input type="text" placeholder="搜索歌曲..." v-model="keywords" @keyup.enter="getMusicInfo" />
                <a href="javascript:void(0);" @click="getMusicInfo">
                    <img src="./19.search.png">
                </a>
            </span>
        </header>
    <main>
        <!-- 歌曲列表 -->
        <div class="music-list">
            <ul>
                <li v-for="(item,index) in musicList">
                    <a href="#">
                        <img src="./19.run.png" class="music-run-image" @click="playMusic(item.id)">
                        <span class="music-name" @click="playMusic(item.id)">
                            {{ item.name }} - {{item.artists[0].name}}
                        </span>
                        <img v-if="item.mvid!=0" @click="playMv(item.mvid)" src="./19.mv.png"
                            class="music-mv-image">
                    </a>
                </li>
            </ul>
        </div>
        <!-- 歌曲专辑封面 -->
        <div class="music-main">
            <img :src="picUrl" v-show="picUrl!=''" class="music-cover" :class="isPlay?'running':'paused'">
        </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>
    <!-- mv视频 -->
    <div class="music-mv" v-show="isMvShow" @click="closeMusicMv">
        <video :src="mvUrl" controls autoplay loop></video>
    </div>
</div>

<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 导入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入自己编写的js -->
<script src="./19.js"></script>
</body>

5.2 css代码 (htmk中为19.css)

Show Code
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;
animation: fadenum 30s infinite linear;
}

.music-detail {
display: block;
color: #2a2b2dab;
position: relative;
text-align: center;
top: 120px;
}

.paused {
animation-play-state:paused;
}

.running {
animation-play-state:running;
}

@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;
}

5.3 js代码(html中为19.js)

Show Code
var vue = new Vue({
    el:"#app",
    data: {
        // 查询关键词
        keywords: "",
        // 歌曲列表
        musicList: [],
        // 热评列表
        hotCommentList: [],
        // 封面地址
        picUrl: "",
        // 歌曲地址
        musicUrl: "",
        // 动画播放状态
        isPlay: false,
        // mv地址
        mvUrl: "",
        // mv显示隐藏
        isMvShow: ""
    },
    methods: {
        getMusicInfo: function() {
            var that = this;
            axios.get("https://autumnfish.cn/search?keywords=" + that.keywords)
            .then(function(response) {
                console.log(response.data.result.songs)
                that.musicList = response.data.result.songs;
            }, function(err) {})
        },
        playMusic: function(id) {
            var that = this;
            // 拼接歌曲地址
            this.musicUrl = "https://music.163.com/song/media/outer/url?id="+id+".mp3"
            console.log(this.musicUrl);
        //获取歌曲详情
        axios.get("https://autumnfish.cn/song/detail?ids=" + id)
        .then(function(response) {
            console.log(response)
            that.picUrl = response.data.songs[0].al.picUrl;
        }, function(err) {})

        //获取热评
        axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + id)
        .then(function(response) {
            console.log(response)
            that.hotCommentList = response.data.hotComments;
        }, function(err) {})

        that.isPlay = true;
    },
    play: function() {
        console.log("play");
        this.isPlay = true;
    },
    pause: function() {
        console.log("pause");
        this.isPlay = false;
    },
    playMv: function(mvid) {
        var that = this;
        // 暂停播放音乐
        document.querySelector("audio").pause();
        // 暂停封面动画
        that.isPlay = false;
        //获取mv地址
        axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
        .then(function(response) {
            console.log(response)
            // 播放mv
            that.isMvShow = true;
            that.mvUrl = response.data.data.url;
        }, function(err) {})
    },
    closeMusicMv: function() {
        // 隐藏mv
        this.isMvShow = false;
        // 暂停播放mv
        document.querySelector("video").pause();
    }
}

})

PS:

网易云开始全面扩张VIP歌曲范围了,其中包括了我最爱的薛之谦

标签:播放器,function,vue,入门,color,height,width,music,left
From: https://www.cnblogs.com/AllenMi/p/vue-get-in-door.html

相关文章