本帖最后由 wordge 于 2017-11-15 15:26 编辑
继上次 在线音乐web小应用（一） ,这次主要是更新了1 个bug 和美化了下页面，同时增加了歌曲查询分页展示、音乐播放器功能（点歌、歌词）。 下面我们就开始这次更新的内容分解： 分页 首先在首页歌曲进行搜索后点击“猿一下”然后请求发向后台servlet进行处理。
页面效果： 首页html代码： 首页js代码： Servlet代码： 前台jsp页面根据返回的结果进行jsp页面重通过taglib来分页计算（偷懒了…） 注：上一页、下一页需要带上查询时候的歌曲名称如果是tomcat7需要在上面的servlet重特殊转下编码，我环境算用的tomcat8，tomcat8已经处理url中包含中文，导致乱码的问题啦！！ 点击歌曲连接跳转到播放器播放 页面效果： 上面在分页页面循环遍历歌曲的时候，歌曲连接中用到了一个js函数。 openurl函数代码(代码有些冗余，先实现功能，后续有空再重构下，哈哈)： 注：这里大概的思路是；点击歌曲带上这首歌曲的songmid(歌曲的id)、pictureid(歌曲图片id)、tiitle(歌曲名称)。然后去判断浏览器localStorage中是否存在叫clickedSongs的存储项， 如果有那么就去循环遍历这个存储项重的内容(歌曲对象的集合)，判断遍历重的歌曲对象的songmid是否和当前点击这首歌曲的songmid一样，如果一样就标记为在clickedSongs存储项中已经存在该歌曲了。接着有去判断了localStorage中是否存在isopenedplayerpage，如果存在说明已经打开播放器了，否则需要打开播放器。如果没有打开播放器，就去先设置下isopenedplayerpage的值为1，标记为打开，因为马上就要打开了。哈哈。然后通过jsonp技术songmid去获取歌曲key，这里之前写在后台servlet中的，但是qq音乐做了鉴权，没法在servlet中获取，这就是我之前所说的修复的bug，把获取的动作放在了js中就可以啦。获取到了key后，封装歌曲对象，并保存到clickedSongs存储项中。最后把播放地址请求发向后台处理，同时新打开一个播放器页面。 如果已经打开过播放器，那么同样的要通过songmid去获取key，然后封装歌曲对象保存到clickedSongs存储项中。然后显示了一个提示效果。这里用到了localStorage的一个存储事件，新存入的歌曲对象，能在它的事件中获取，待会我们会利用这个事件去播放。
关于localStorage存储对象集合需要先把对象集合转换成字符串(JSON. Stringify(objarr))，然后在用的时候在取出来然后解析成集合对象(JSON.parse(objarrStr))。
音乐播放器（难点） 这里播放器用到了html5的audio、还去分析了qq音乐播放音乐时候获取歌词的连接。
页面效果： 在上面点击某首歌曲后，跳转到后台Servlet并打开播放器页面 Servlet代码： 跳转到player.jsp页面
Html代码： 可以通过songUrl和picture播放音乐并显示这首歌曲的图片
下面就是处理歌词的步骤了。
下面我们去QQ音乐播放一首歌曲，打开F12看看歌词获取的url请求 这是一个jsonp的ajax请求，然后回调方法是MusicJsonCallback，但是回调接收的歌词进行加密了，那我们到回调里面去看看，肯定它是对歌词进行解密了。 这是调用堆栈信息，我们把焦点放顶上最后执行的4个方法上面，我们先去看a.loadLyricBySongId方法看看： 压缩了，点击｛｝格式化下。 回调的t对象和我们url请求回调的属性一直 Ok，那我们看到里面有一个r.Base64.decode(c);这句话相信大家都瞬间明白了，这不就是对编码后的歌词进行解码吗。好我们去这个js文件中看看这个decode方法。 最后我们大概知道它的步骤了，下面我们就进行在我们的代码里面照葫芦画瓢，按照请求地址做模拟请求，然后把歌词拿到，然后解码。
在我们的player.jsp页面加载完成后执行js代码： 获取歌词是通过后台Servlet做的模拟请求，然后拿到结果，返回给页面ajax的歌词。注意在模拟请求的时候加一个referer请求头，不然qq认为你把是从他页面发起的请求。
Servlet代码： 关于歌词处理下面的思路： 把歌词中的时间和字符分离成两个数组 没有字符的不要 把时间换算成毫秒 01:40.52 1*60*100+40.52*100=64052 每个2秒去获取当前播放器的播放时间并换算成毫秒 然后再去遍历时间数组 如果遍历到大于当前播放时间毫秒值
就返回当前的前一个下标所对应的字符
歌曲播放列表 关于歌曲列表，分为两个阶段进行显示更新：1.新打开player.jsp页面的时候。2.已打开player.jsp页面，点击新歌曲的时候。 主要是通过localStorage中获取歌曲对象集合，然后进行遍历显示在页面上，同时设置了点击事件和删除按钮。
页面效果： 加载时机1.在第一次打开时候：
js代码： 加载时机2.在歌曲查询列表中点击歌曲的时候：
Js代码： 以上就是对在线音乐的全部更新，当然我还做的不是很ok，后续还可以通过audio的相关事件去完善歌曲播放列表的随机播放、单曲播放、表单列表循环播放等等…
下面我提供一个发布在公网上的demo
| 
收藏
淘帖
踩
