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 相关文章推荐
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
js获取form的方法
May 06 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
带你彻底理解JavaScript中的原型对象
Apr 14 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
Python抓取京东图书评论数据
2014/08/31 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
python图像处理入门(一)
2019/04/04 Python
Django分组聚合查询实例分享
2020/04/29 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
内容编辑个人求职信
2013/12/10 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
学校国庆节活动总结
2015/03/23 职场文书
焦裕禄观后感
2015/06/03 职场文书
运动会新闻报道稿
2015/07/22 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS