vue||简易版音乐播放器

本是古典何须时尚 2023-03-14 13:15 16阅读 0赞

## 前言 ##

本次项目是对前面的vue知识的综合应用：基于vue实现一个网页版播放器。  
需要向网易云接口发送请求，这是相关接口使用文档：  
https://api.imjad.cn/cloudmusic.md

## 页面布局 ##

**1，HTML页面布局**  
本次页面布局相对复杂，我将整个播放器页面用“div”分成上、中下三块。其中：  
上方放搜索框和播放器名字；  
中间是主要内容块，又分为左右两块，左边用来显示当前播放音乐对应的图片和名字，右边显示搜索结果（20条）；  
底部显示音乐播放进度条。  
下面的具体代码：

**2，CSS层叠样式表**  
在实际处理时，测试发现，页面是自动换行的，但是为了效果美观，我想让搜索结果显示处的每一个LI的内容都不换行。所以我用了“white-space:nowrap;”来强制不换行。  
其他的都是一些常见的属性，在此不再赘述，老规矩，直接放代码：

*{ 
        padding:0;
        margin:0;
    }
    
    #musicplay{ 
        position: absolute;
        background-color: #fff;
        left: 20%;
        top: 64px;
        width: 60%;
        height: 500px;
        box-shadow: 2px 2px 4px #5e72e4;
    }
    #top{ 
        width: 100%;
        height: 50px;
        background-color:#5e72e4;
    }
    #top span{ 
        padding-left: 8px;
        color: #fff;
        line-height: 50px;
    
    }
    #search{ 
        position: absolute;
        right: 8px;
        top: 10px;
    }
    #search input{ 
        width: 180px;
        height: 24px;
        padding-left: 8px;
        border-radius: 12px;
        border: 1px solid #5e72e4;
        box-shadow: 1px 1px 2px #5c5c5f;
    }
    
    #cont{ 
        position: absolute;
        margin: 8px 0;
        width: 100%;
        height: 400px;
    }
    #left{ 
        position: absolute;
        left: 1%;
        width: 60%;
        height: 100%;
    }
    #left img{ 
        position: absolute;
        left: 20%;
        top: 20%;
        height: 60%;
        width: auto;
    }
    #left p{ 
        font-size: 24px;
        font-weight: 500;
        color: #5e72e4;
    }
    #line{ 
        position: absolute;
        top: 10%;
        left: 62%;
        width: 0;
        height: 80%;
        border-left:1px solid #59666d;
        opacity: 0.4;
    }
    #right{ 
        position: absolute;
        padding-top: 6%;
        right: 1%;
        width: 36%;
        height: 90%;
    }
    ul{ 
        width: 100%;
        height: 90%;
        overflow: auto;
    }
    li{ 
        width: 100%;
        height: 30px;
        list-style: none;
        padding-left: 2%;
    }
    li img{ 
        /* position: absolute; */
        float: left;
        width: 24px;
        height: auto;
        cursor: pointer;
    }
    li p{ 
        font-size: medium;
        float: left;
        width: 85%;
        /* 强制不换行 */
        white-space:nowrap;
    }
    
    #bottom{ 
        position: absolute;
        bottom: 4px;
        width: 100%;
        height: 50px;
        background-color: #f4f5f7;
    }
    #bottom img{ 
        position: absolute;
        left: 4%;
        top: 16px;
        width: 20px;
        height: auto;
    }
    #bottom p{ 
        position: absolute;
        left: 10%;
        top: 6px;
        font-size: 10px;
    
    }

至此，页面初步效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]

## 逻辑实现 ##

**梳理：**  
1）分析发现，一共有两处地方需要发送申请，一次是搜索内容输入完毕按回车键时；一次是点击具体音乐前面的紫色图标时。  
2）两次均采用get方式发送异步请求。  
3）搜索框处对应的请求发送时，服务器会返回20个相关数据，里面有歌曲名字、封面图片、id等信息。需要用一个循环将所需信息保存起来备用。  
4）点击相应的紫色图标时，将其对应的id作为参数一起发送给服务器，服务器会返回一些与该id相关数据，其中就有我们所需的播放该音乐的地址。至此一切就明了了。  
**提示：**

1.  在使用vue来实现该音乐播放器时，要注意用变量将"this"保存下来，不然随着循环的进行，此“this”就非彼“this”了，故就报错了。  
    2）注意修改标签的属性值要使用”v-bind“（具有使用见代码）  
    下面是代码：

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 3]

基于vue的音乐播放器

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]: /images/20230312/e52f26b407d14f8b949c64d8d76ce473.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]: /images/20230312/37f7d21e9dcb4ae38257680b603541c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 2]: /images/20230312/5d365a6585b94b49be3ac09ff3bdd300.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 3]: /images/20230312/43fd11b815c34a798d7831afd4bf9324.png