首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue实现的网易云音乐在线播放和下载功能案例

Posted in Javascript onFebruary 18, 2019

本文实例讲述了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实现的网易云音乐在线播放和下载功能案例

- Author -

庚中

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 #Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 #Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 #Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 #Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 #Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 #Javascript
深入理解vue-class-component源码阅读
Feb 18 #Javascript
el-table(1) 脚手架(2) Next.js(1) set(1) TableField(1) Mybatis-Plus(3) SingleFlight(2) frozenset(1) mounted(1) create(1)
You might like
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python3 入门教程 简单但比较不错
2009/11/29 Python
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
解决python3输入的坑——input()
2020/12/05 Python
LINUX下线程，GDI类的解释
2016/12/14 面试题
个人简历自我评价八例
2013/10/31 职场文书
优秀学生获奖感言
2014/02/15 职场文书
反邪教警示教育方案
2014/05/13 职场文书
美食节策划方案
2014/05/26 职场文书
海洋科学专业求职信
2014/08/10 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
2015年试用期工作总结
2014/12/12 职场文书
谢师宴答谢词
2015/01/05 职场文书
酒店厨房管理制度
2015/08/06 职场文书
高一军训感想
2015/08/07 职场文书