vue 综合案例 - 音乐播放器

最新推荐文章于 2024-06-07 09:45:28 发布

杨蛋蛋~R

最新推荐文章于 2024-06-07 09:45:28 发布

阅读量778

点赞数 2

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_50119334/article/details/109362172

版权

综合案例-音乐播放器

功能：

歌曲搜索：搜索歌曲，会出现相应歌曲
1.按下回车（v-on.enter)
2.查询数据（axios接口、v-model）
3.渲染数据（v-for 结合数组）
歌曲播放：点击播放按钮，歌曲会开始播放
1.点击播放(v-on 自定义参数)
2.歌曲地址获取(接口歌曲id)
3.歌曲地址设置(v-bind)
歌曲封面:播放歌曲同时，中间的封面会同步改变
1.点击播放(增加逻辑)
2.歌曲封面获取(接口歌曲id)
3.歌曲封面设置(v-bind)
歌曲评论：点击歌曲，在右侧会出现对应歌曲的评论
1.点击播放(增加逻辑)
2.歌曲评论获取(接口歌曲id)
3.歌曲评论渲染(v-for)
播放动画：歌曲播放时，中间的动画会和歌曲的播放同步
1.监听音乐播放(v-on play)
2.监听音乐暂停(v-on pause)
3.操纵类名(v-bind 对象)
(audio标签的play事件会在音频播放的时候触发
audio标签的pause事件会在音频暂停的时候触发
通过对象的方式设置类名，类名生效与否取决于后面值的真假_
mv播放：点击mv按钮，会出现一个遮罩层，中间可以看mv
1.mv图标显示(v-if)
2.mv地址获取(接口 mvid)
3.遮罩层(v-show v-on)
4.mv地址设置(v-bind)
不同的接口需要的数据是不同的，文档的阅读需要仔细
页面结构复杂之后，通过审查元素的方式去快速定位相关元素
响应式的数据都需要定义在data中定义

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
    <link rel="stylesheet" href="css/音乐播放器.css">
</head>

<body>
    <div id="wrap">
        <!-- 播放器主体 -->
        <div class="play_wrap .clearfix" id="player">
            <div class="header">
                <span>listen music</span>
                <input type="text" name="" id="" value="" v-model="query" @keyup.enter="searchMusic">
                <img class="search_icon" src="images/search.png" />
            </div>
            <div class="left">
                <ul class="music_list">
                    <li v-for="item in musicList">
                        <img class="music_icon" @click="playMusic(item.id)" src="images/music_play.png" alt="">
                        <span class="music_name">{
   {
    item.name }}</span>
                        <img class="video_icon" @click="playMV(item.mvid)" v-if="item.mvid!=0" src="images/video_play.png" alt="">
                        <span class="music_mask">{
   {
   item.name}}</span>
                    </li>

                </ul>
            </div>
            <div class="middle">
                <div class="play_con" :class="{playing:isPlaying}">
                    <img src="images/play-bar.png" class="play_bar " />
                    <div class="cover_background autoRotate"></div>
                    <img v-bind:src="musicCover==''?'images/nav.jpg':musicCover" alt="" class="music_cover autoRotate">
                </div>
                <!-- <div class="playing-title ">
                    <h4>正在播放</h4>
                    <h3 v-bind:text="musicList"></h3>
                </div> -->
            </div>
            <div class="right">
                <div class="comments_title">热门留言</div>
                <dl class="comment-list">
                    <dd v-for="item in hotComments">
                        <img class="commenterpic" v-bind:src="item.user.avatarUrl" alt=" ">
                        <div class="username">{
   {
   item.user.nickname}}</div>
                        <div class="commentCon">{

最低0.47元/天解锁文章

杨蛋蛋~R

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue 综合案例 - 音乐播放器

综合案例-音乐播放器功能：歌曲搜索：搜索歌曲，会出现相应歌曲1.按下回车（v-on.enter)2.查询数据（axios接口、v-model）3.渲染数据（v-for 结合数组）歌曲播放：点击播放按钮，歌曲会开始播放歌曲封面:播放歌曲同时，中间的封面会同步改变歌曲评论：点击歌曲，在右侧会出现对应歌曲的评论播放动画：歌曲播放时，中间的动画会和歌曲的播放同步mv播放：点击mv按钮，会出现一个遮罩层，中间可以看mv...
复制链接

扫一扫