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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript打字小游戏代码
Dec 26 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
页面点击小红心js实现代码
May 26 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
es6 filter() 数组过滤方法总结
Apr 03 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
You might like
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Python列表切片用法示例
2017/04/19 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
青春励志演讲稿
2014/04/29 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
云冈石窟导游词
2015/02/04 职场文书
停水通知
2015/04/16 职场文书
Python OpenCV实现图形检测示例详解
2022/04/08 Python