vue开发的音乐web-app

已经成功部署线上啦~,音乐web-app
源码在这,小妹在此求个star

项目描述

vue全家桶开发仿网易云音乐的web-ap

show.jpg

项目目的

学习vue的项目实战课程,认识到了很多关于模块化开发思想,复用代码,vue等知识点,继续努力加油!

前台

  • vue 前台用户界面展示
  • vue-router 为单页面提供路由系统,使用路由懒加载实现组件的异步加载
  • vuex Vue组件数据状态共享
  • axios 异步请求api数据
  • es6 箭头函数,解构赋值,class类...
  • localStorage 搜索记录存储
  • Eslint 代码规范

后台

  • NeteaseCloudMusicApi: 网易云音乐NodeJs版Api,为项目提供音乐数据

使用的库:

  • better-scroll: 实现移动端滚动需求
  • fastclick: 消除移动端点击事件的300ms延迟
  • border.css: 消除Retina屏幕 1px border 在不同dpr下的显示
  • pinyin: 取歌手数据首字母
  • vue-lazyload: 实现图片的懒加载

实现的功能

导航分成四个区块:首页 | 独家歌手 | 排行榜 | 搜索
首页
  • 图片轮播
  • 推荐歌单组件
独家歌手
  • 获取热门歌手
  • 头字母索引导航
  • 顶部显示当前字母索引
排行榜
  • 获取热门歌单
  • 上拉更新
搜索
  • 热门搜索关键词
  • localStorage保存搜索历史
  • 输入字符串获取搜索数据(此处用到函数节流)
  • 下拉加载
其他页面
歌手详情页 | 歌单详情页
  • 随机播放歌手全部歌曲
  • 可添加歌手歌曲到播放列表
播放器内核
  • 暂停开始播放
  • 前后切换歌曲
  • 显示播放列表
  • 可切换播放模式( 随机播放, 顺序播放, 循环播放)
  • 拖动或点击播放进度条跳到指定时间
  • 从后台获取歌词进行解析
  • 播放当前歌词居中显示高亮

项目遇到的一些问题

在播放器上遇到的坑最多,最复杂也是这个,所以说说吧~

  • 关于HTML5 的 audio标签
    当不断触发切换歌曲的时候,audio会报错:Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). 或者是
    Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.
    大致的意思是play() 请求被 pause() 或者 新的加载请求中断
    原因:audio的 play() 方法调用会返回Promise,如果成功,Promise就会执行并且audio的playing同时触发事件,如果播放失败,Promise就会拒绝,显示失败原因
    解决:既然返回的是promise对象,那就可以用then方法来选择播放媒体准备之前,播放功能不会执行
    其他方法:
  1. 监听audio的loadedmetadata事件,判断在完全音频的元数据加载完毕之后才触发播放功能
  2. 监听audio的canplay事件,确保在已经有足够的媒体数据才触发播放功能
    参考文章
    https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
    https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events
  • ref是的渲染事件以及不是响应式
    要取得$refs必须在dom渲染完毕的时候才能获取,所以可以在mounted 钩子或者nextTick()的回调函数中获取,但是如果碰到的ref是动态渲染的,也就是数据是由父组件通过异步获取数据(data)传递给子组件的时候才会渲染相关的dom节点,在这种情况下,可以使用watch对象,观察data的变化情况,在这个回调函数中便能获得ref数据;ref不是响应式的,所以如果动态添加相关的ref的节点,添加的节点的索引会出现在尾端,所以只能通过this.$refs去获取这些节点数组的父元素,通过$el.children获取所有子dom节点

  • audio标签在移动端首次点击歌曲不能自动播放的问题
    原因:移动端为了省用户流量,会对自动播放音频,视频做限制,所以当第一次播放audio的时候只能由用户手动触发audio.paly()事件才能播放
    解决:思前想后,第一,在各种生命周期钩子里使用audio.play()是没用的,原因的获取歌曲的相关数据(url 等)这些都是异步行为,第二,使用autoplay="autoplay"也没有效果;
    网上提供的解决方法:(一种hack做法 ,,ԾㅂԾ,,)
    绑定一次touchstart()事件,当用户触摸屏幕时,回调中调用audio.play()方法

项目总结

第一次这么系统的完成一个作品,不过还有很多功能没有完善,后期再继续完善完善,例如用户登陆功能,用户评论。。。立个flag先。。。在整个学习过程中,学到了很多关于移动端开发的东西,包括布局方面(更加加深了弹性布局和定位布局相关知识点),前后端的分离,前端如何获取数据转换成需要的数据等等,再遇到问题的时候,应该先找到问题根源,然后多查查着相关资料,出现问题的原因,想想解决办法,多试试看能不能,再考虑优化解决方法。。。

可以扫码观看啦~

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

推荐阅读更多精彩内容