vue实现的网易云音乐在线播放和下载功能案例
本文实例讲述了vue实现的网易云音乐在线播放和下载功能。分享给大家供大家参考，具体如下：
效果如图:
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style lang="">
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;
}
</style>
</head>
<body>
<div id="app">
<!-- 左边 -->
<div id="left">
<input type="text" value="请输入你要搜索的歌名" v-model="inputValue" @keyup.enter="search">
<!-- 给li添加过渡 ;v-on:after-enter="afterEnter":钩子函数-->
<transition-group name="list" tag="ul" v-on:after-enter="afterEnter">
<!-- play(item.id):把id传过去 -->
<li v-for="(item, index) in musicList" :key="item.id" @dblclick="playMusic(item.id,item.album.id)" :style="{'transition-delay':index*100+'ms'}" >
{{item.name}}-----演唱者:{{item.artists[0].name}}
</li>
</transition-group>
</div>
<!-- 右边,播放 -->
<div id="right">
<!-- 专辑页面 -->
<img :src="picUrl" alt="" class="cover autoRotate" :class="{pause:isPause}">
<!-- autoplay:自动播放,controls显示控件 ;@play="play"是自定义方法-->
<audio :src="songUrl" autoplay controls @play="play" @pause="pause" ></audio>
<h3>精彩评论</h3>
<div class="comment">
<ul>
<!-- 遍历数组时,需要动画时才用到key -->
<li v-for="(item, index) in comments" >
<div class="left">
<img :src="item.user.avatarUrl" alt="">
</div>
<div class="right">
<a href="#" rel="external nofollow" >{{item.user.nickname}}</a>
<p>{{item.content}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
rightv>
</body>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 导入vue插件 -->
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script>
//代码
/*
音乐播放器
需求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;
}
},
})
</script>
</html>
如果接口不能使用:请登录https://github.com/huanggengzhong/NeteaseCloudMusicApi,重新下载开启服务器即可
希望本文所述对大家vue.js程序设计有所帮助。
相关推荐
-
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
项目简介 主要是通过做一个多人在线多房间群聊的小项目.来练手全栈技术的结合运用. 项目源码:chat-vue-node 主要技术: vue2全家桶 + socket.io + node(express) + mongodb(mongoose) 环境配置: 需安装配置好 node,mongodb环境(参考:http://www.jb51.net/article/109449.htm); 建议安装 Robomogo 客户端来管理mongodb数据. 编译运行: 1.开启MongoDB服务,新建命令行
-
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受推荐的pdf.js插件来实现. pdf.js可以从github上clone下来,然后本地gulp生成可用的pdf.js和pdf.worker.js(参考readme即可). 不过更简单的方法是使用cnpm来安装: cnpm isntall --save pdfjs-dist,然后可以在项目中使用了,
-
vue项目实现github在线预览功能
最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目,有点小激动,想把它上传到 github 并展示一下预览效果,结果踩了好多坑,折腾了大半天才弄好. 这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目,并且项目也已经上传到了 github 问题1 当我们在命令行执行 npm run build 后,项目的目录下会生成一个 dist 文件夹,它里面又包含一个 static 文件夹和一个 index.html 文件,这是 webpack 最终打包好的文件 我们先尝试在浏
-
实现Vue的markdown文档可以在线运行的方法示例
markdown 文档中Vue代码 可执行啦,而且可以边看边执行.这样就可以用markdown文档的形式,写自己的Vue博客了, 可以方便介绍自己的原创组件,很酷的执行. Github https://github.com/zhangKunUserGit/vue-markdown-run DEMO https://zhangkunusergit.github.io/vue-markdown-run/dist/ 安装 npm install vue-markdown-run --save 用法 (
-
Vuejs仿网易云音乐实现听歌及搜索功能
前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用,但是后来发现数据流传输有点麻烦,后续会使用vuex. 技术栈 vue+vue-router(核心框架) better-scroll(使移动端滑动体验更加流畅) vue-lazyload(用户图片懒加载) nprogress(用于加载过渡) axios(请求) 功能分析与设计 首先我先参考了现有的一
-
利用Vue.js实现求职在线之职位查询功能
前言 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 本文主要介绍的是关于利用Vue.js实现职位查询功能的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 知识点: v-on, v-for, v-if, props, $emit,动态Prop, Class 与 Style 绑定 P1 分页查询 查询参数 查询参数:
-
基于vue开发的在线付费课程应用过程
使用 vux UI组件库 使用 vue-navigation 缓存页面,此库实现了前进刷新后退读缓存的功能,像原生APP导航一样.用子路由的方式实现tabbar有bug,用vuex解决了. 使用 lib-flexible 解决移动页面适配 来一个清单 "dependencies": { "fastclick": "^1.0.6", "lib-flexible": "^0.3.2", "lodash
-
vue translate peoject实现在线翻译功能【新手必看】
开始 这是一适合新手练习的小项目,一个在线翻译的demo. 在正式开始前,先啰嗦一下,是一位网友给我的建议,就是不要强行组件化的问题 开始做Vue时我们可能会喜欢拆很多组件出来 但记住组件是为了复用(常见如公共菜单按钮栏等) 如非能够复用的情况其实并不用真的拆出组件来 . 当然,这个项目里因为是练手,所以强行组件化来涉及更多的vue用法. 目录结构 src下新建了两个文件:TranslateForm.vue表单组件和TranslateText.vue翻译结果组件 涉及的语法 指令:v-mode
-
vue实现的网易云音乐在线播放和下载功能案例
本文实例讲述了vue实现的网易云音乐在线播放和下载功能.分享给大家供大家参考,具体如下: 效果如图: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
-
vue仿网易云音乐播放器界面的简单实现过程
由于工作项目的需要,需要使用到歌曲播放,参考多方资料,写了一个仿网易云音乐播放界面,能完整的实现音乐播放功能. 前端简单的使用vue组件和audio标签实现了播放器界面,后端则是调用网易云的API获取对应的歌曲信息. 废话不多说上代码 歌曲播放界面(musicPlay.vue) <template> <div class="main-page"> <audio :src="songInfo.url" id="music&qu
-
vue模仿网易云音乐的单页面应用
说明 一直想做一个基于VUE的项目,但是因为项目往往要涉及到后端的知识(不会后端真的苦),所以就没有一直真正的动手去做一个项目. 直到发现GitHub上有网易云音乐的api NeteaseCloudMusicApi,才开始动手去做. 仅仅完成了首页,登入,歌单,歌曲列表页. 项目地址 https://github.com/qp97vi/music 项目成功运行还要把后端api在本地运行 前端技术栈 vue2+vuex+vue-router+axios+mint-ui+webpack 遇到的问题
-
漂亮的Android音乐歌词控件 仿网易云音乐滑动效果
前言: 项目有个音乐播发器功能,实现音乐在线播放,同时需要带有歌词显示功能.网上也找过,在github找到勉强能用的控件,只是效果还是差强人意,不是特别好.于是趁有空的时间,参考了网上的部分demo,自己也写了个歌词控件. 只要demo可以拉到最底部. 一.歌词控件效果. 目前的歌词控件效果如下: 主要效果有以下: 1.实现自动滑动切换到下一句. 2.实现滑动歌词切换播放时间. 3.实现拖动歌词时仿网易云音乐显示时间线,将要选择的歌词颜色变化. 4.音乐进度跳转时,歌词跳转可以滑动切换. 二.歌
-
Python爬取网易云音乐上评论火爆的歌曲
前言 网易云音乐这款音乐APP本人比较喜欢,用户量也比较大,而网易云音乐之所以用户众多和它的歌曲评论功能密不可分,很多歌曲的评论非常有意思,其中也不乏很多感人的评论.但是,网易云音乐并没有提供热评排行榜和按评论排序的功能,没关系,本文就使用爬虫给大家爬一爬网易云音乐上那些热评的歌曲. 结果 对过程没有兴趣的童鞋直接看这里啦. 评论数大于五万的歌曲排行榜 首先恭喜一下我最喜欢的歌手(之一)周杰伦的<晴天>成为网易云音乐第一首评论数过百万的歌曲! 通过结果发现目前评论数过十万的歌曲正好十首,通过这
-
java+selenium 网易云音乐刷累计听歌数的方法
背景 应该是在去年的时候,刷知乎看到一个问题,大概是说怎么刷网易云音乐个人累计听歌数,然后有一个高赞回答,贴了一段js代码,直接在浏览器console执行就可以了.当时试了下,直接一下子刷了有好几万.悲剧的是,第二天又回到原来的样子了,很明显这种方式被网易云音乐发现封掉了.而且后续网易云还针对累计听歌数加了一些限制,每天最多增加300首.今天带来一种通过java+selenium的方式,自动播放歌曲,来达到刷累计听歌数的效果.另外借助这个demo,对selenium的使用更加熟悉,也算是爬虫应用
-
Android实现网易云音乐的旋转专辑View
本文实例为大家分享了Android实现网易云音乐的旋转专辑View,供大家参考,具体内容如下 一.前言 最近做过 类似网易云音乐专辑唱片的效果,这里记录下开发思路,仅供参考.但需求不完全与网易云音乐一样,这个只有图片会旋转(网易云是整个磁盘都会旋转),没有唱片机械臂. 二.思路 如下图,我这里是分为 圆形背景+旋转的方形图片+渐变圆环 三.关键代码 1. 圆形背景 <?xml version="1.0" encoding="utf-8"?> <sh
-
Python爬虫实战之网易云音乐加密解析附源码
目录 环境 知识点 第一步 第二步 开始代码 先导入所需模块 请求数据 提取我们真正想要的 音乐的名称 id 导入js文件 保存文件 完整代码 环境 python3.8 pycharm2021.2 知识点 requests >>> pip install requests execjs >>> pip install PyExecJS 第一步 打开这个网站 在里面去分析我们需要的数据 每个音乐的名称 id 去网页源代码查找数据,发现并没有,这个网页 并不是一个静态页面
-
Android实现网易云音乐高仿版流程
目录 效果图 整体分析 轮播图 布局 显示数据 按钮 布局 显示数据 推荐歌单 布局 显示数据 底部 布局 显示数据 迷你控制条 播放列表弹窗 效果图 效果图依次为发现界面顶部,包含首页轮播图,水平滚动的按钮,推荐歌单:然后是发现界面推荐单曲,点击单曲就是直接进入播放界面:最后是全局播放控制条上点击播放列表按钮显示的播放列表弹窗. 整体分析 整体使用RecycerView实现,每个不同的块是一个Item,例如:轮播图是一个Item,按钮也是,推荐歌单和下面的歌单是,推荐单曲,还有最后的自定义首页