本文实例讲述了vue实现的网易云音乐在线播放和下载功能。分享给大家供大家参考，具体如下：

效果如图:

完整代码:

Document

html,

body {

height: 100%;

padding: 0;

margin: 0;

}

#app {

height: 100%;

display: flex;

}

#app>#left {

flex: 1;

background-color: skyblue;

text-align: center;

/* 超出滚动 */

overflow: scroll;

}

#app>#right {

flex: 1;

background-color: orange;

}

ul {

list-style: none;

padding: 0;

}

input {

width: 469px;

height: 56px;

margin: 10px auto;

border-radius: 10px;

outline: none;

font-size: 24px;

border: 0;

padding-left: 15px;

}

#left li {

width: 451px;

/* height: 35px; */

margin: 0 auto;

font-weight: 700;

border: 2px solid black;

line-height: 35px;

color: white;

background-color: cadetblue;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

max-height: 35px;

-webkit-line-clamp: 1;

-webkit-box-orient: vertical;

}

#left li:hover {

cursor: pointer;

background-color: greenyellow;

color: red;

}

#right {

position: relative;

overflow: scroll;

}

audio {

/* position: absolute;

left: 50%;

transform: translateX(-50%) translateY(46px); */

display: block;

margin: 0 auto;

}

/* li标签过渡的样式 */

.list-item {

display: inline-block;

margin-right: 10px;

}

.list-enter-active,

.list-leave-active {

transition: all 1s;

}

.list-enter,

.list-leave-to{

opacity: 0;

transform: translateX(100px);

}

/* 设置专辑图片样式 */

.cover{

width: 260px;

height: 260px;

border-radius: 50%;

display: block;

margin: 10px auto;

/* transform: translateX(-50%) translateY(10px); */

}

/* 动画 */

@keyframes autoRotate{

to{

transform: rotateZ(360deg);

}

}

/* 动画播放样式 */

.autoRotate{

/* 动画名,一直播放iteration(一直重复),匀速(timing)，时间2s(duration),状态(running) */

animation-name:autoRotate;

animation-iteration-count:infinite;

animation-timing-function: linear;

animation-duration:2s;

animation-play-state:running;

}

/* 动画状态 */

.pause{

animation-play-state:paused;

}

/* 评论 */

.comment{

height: 150px;

/* background-color: skyblue; */

}

.comment li{

display: flex;

padding: 5px;

}

.comment li .left{

width: 120px;

height: 120px;

}

.comment li .left img{

width: 100px;

}

.comment li a{

text-decoration: none;

font-weight: bold;

color: crimson;

}

rightv>

//代码

/*

音乐播放器

需求1:

搜索歌曲

发送网络请求

回调函数函数中渲染数据

有动画

需求2:

双击播放歌曲

根据id调用接口

查询数据

通过audio播放歌曲

获取专辑的信息 进而获取封面 展示给用户

需求3

播放歌曲时

封面转动

暂停播放时

封面停止转动

步骤:

1.先写动画样式,动画命名为autoRotate,因为是一直运动,所以使用animation;

2.同时写一个暂停的样式,命名为pause,给data添加一个isPause来存值,默认给一个false

3.添加运动和暂停的步骤是添加上面的两个类,但是pause要使用v-bind指令来设置属性;

4.在audio音频里添加播放和暂停的点击方法,在对应的方法里设置对应的布尔值;

需求4

点击播放歌曲

同时获取这首歌的评论

步骤:1.在数据中声明一个comments的空数组,用来存评论内容

2.在播放方法中写获取评论的接口

3.在响应体里将内容赋值给声明的数组

*/

let app = new Vue({

el: "#app",

data: {

inputValue: '',//输入的值

musicList: [], //存储歌列表

songUrl: '',//播放歌曲的url

picUrl:'',//获取专辑信息

isPause:false,//专辑是否暂停

comments:[]//评论内容

},

methods: {

// li标签过渡的事件

randomIndex: function () {

return Math.floor(Math.random() * this.items.length)

},

add: function () {

this.items.splice(this.randomIndex(), 0, this.nextNum++)

},

remove: function () {

this.items.splice(this.randomIndex(), 1)

},

//搜索歌曲事件

search() {

//调用接口

this.$http.get(`https://autumnfish.cn/search?keywords=${this.inputValue}`).then(response => {

// console.log(response);

//将结果添加到musicList中

this.musicList = response.body.result.songs;

}, response => {

// error callback

alert("出错了")

});

},

// 双击播放歌曲事件,接收传过来的id

playMusic(id,albumId) {

//获取歌曲的url

this.$http.get(`https://autumnfish.cn/song/url?id=${id}`).then(response => {

// console.log(response);

//将结果添加到musicList中

this.songUrl = response.body.data[0].url;

}, response => {

// error callback

alert("出错了")

});

// 获取专辑信息

this.$http.get(`https://autumnfish.cn/album?id=${albumId}`).then(res=>{

this.picUrl=res.body.album.blurPicUrl;

}),err=>{}

//获取评论内容接口

this.$http.get(`https://autumnfish.cn/comment/music?id=${id}&limit=1`).then(res=>{

console.log(res);

this.comments=res.body.hotComments;

}),err=>{

alert('信息错误')

}

},

//钩子函数:动画执行完后去除了style属性,不去掉会卡顿

afterEnter(el){

el.style='';

},

// 专辑图片旋转事件

play(){

console.log('播放');

this.isPause=false;

},

pause(){

console.log('暂停');

this.isPause=true;

}

},

})

希望本文所述对大家vue.js程序设计有所帮助。