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 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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下使用无限生命期Session的方法
2007/03/16 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
php的ajax简单实例
2014/02/27 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
vant实现购物车功能
2020/06/29 Javascript
详解React 条件渲染
2020/07/08 Javascript
Python键盘输入转换为列表的实例
2018/06/23 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
python和JavaScript哪个容易上手
2020/06/23 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
英文求职信结束语大全
2013/10/26 职场文书
小学信息技术教学反思
2014/02/10 职场文书
七一活动主持词
2015/06/29 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
Python 数据可视化之Bokeh详解
2021/11/02 Python