QQ音乐播放器简易开发
时间：2017-09-15 16:10:57 来源: 互联网 复制分享
由于本人喜欢听音乐,然后突然某次抽筋,想用H5的audio来写一个模拟qq播放器功能的页面.说干就干.花了整整4天时间,其中搞歌词的lrc文件花了不少时间T.T啊.亮点：1.歌词同步：支持主界面以及副界面的歌词同步功能,并且当前行高亮展示。
2.多类目切换：实现4大类目的不同歌单,当前歌曲黑底显示的功能.
3.进度条以及主屏幕拖拽功能：实现了进度条同步歌曲进度以及拖拽功能,3大界面(光盘界面,歌词界面,歌单界面)拖拽进行移动的功能.4.歌曲顺序随机播放：实现了一键随机播放顺序。5.动态歌词信息添加：以封装为插件,所有歌曲信息动态添加,改歌曲只需要改date内的json文件就可以,data文件格式如下：经验：1.css样式部分：filter:blur(10px);filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');可用来做模糊属性,其实第一次是在做bilibili时发现的.user-select:none;可以禁止用户选中字.2.svg部分绘制：手机部分为svg图像,由于当时还不会自己手写svg,所以只能用AI先画,画完导出svg格式,也是心疼自己.3.H5的audio标签应用：您的浏览器不支持html5的audio标签" target="_blank" rel="nofollow">网页链接您的浏览器不支持html5的audio标签4.H5的audio的API文档运用：audio.play;播放 audio.pause;暂停 audio.reday加载完audio.duration播放时间audio.currentTime当前播放时间audio.ended当前歌曲播放结束5.面向对象式封装 [ 已写为插件 ] ：再次用面向对象方式来书写整个脚本,最近经常用面向对象方式写js,偶尔用面向过程的方式书写的时候,感到额外的轻松,几乎不会报错.老牛已经将整个脚本封装为了插件,接口在下载源码后可查阅.有兴趣的朋友可以用用看.6.动态歌单信息与歌单与对应类目表跳转：由于处理过几次data的json格式文件,本次运用起来可以说相当的得心应手,类目表与对应的表之间的index值处理,由于4大类目很多小歌单,小歌单在切换大类目表后取消黑色背景这部分倒是让我头疼了好久.7.运算符前置的运用：在盒子拖拽部分,老牛第一次用--与++前置,用于先运算再执行.减少了先This._boxIndex++,再代入的坑余代码.值得注意的是mouseup中有不少执行动作,所以在最后解绑mouseup是必要的。8.点击判断与拖拽判断：由于在song list模块中支持点击播放,而拖拽为移动,此处我用了鼠标按下抬起的时间差判断用户意向.9.歌词分割：对歌词lrc文件的处理是本章的难点之一,我将lrc格式以如下方式进行分割,将每句歌词存入一个lyric数组内,在每次歌曲播放时动态添加入lyricWrapper内,将时间格式存入cal数组内并将分:秒格式转换为秒的格式,用于给播放时间做计算。
10.歌曲长度,进度条长度以及歌词同步运算：首先将当前歌曲长度除60向下取整,歌曲长度的分,在将总长度-分钟数*60取小数点0位获取到歌曲长度的秒数,作为歌曲总长度,然后让显示器显示,设一个计时器.每200毫秒进行一次运算,先求当前播放的时间,求法与求总时间类似,进度条长度用当前歌曲时间/歌曲总时间作为百分比值进行显示,这边的歌词同步,我用了grep函数去循环当前秒数在之前处理好的歌词时间节点数组中去返回出比当前秒数小的时间个数减去1,再用dis存在并且dis不等于-1以及dis不等于上一个dis后再执行歌词的移动,移动的距离为每条高度,这样一是避免bug,二则增加运行性能,并不会每200毫秒就做一次无谓的歌词运动,值得注意的是原先我是用的$.inArray去计算当前时间戳在处理数组中的位子,但是发现用inArray在拖拽进度条之后由于,时间节点的计算需要正好踩到相等点才能有反应,所以会有延迟反应,这里有意思的是我最先使用addEventListener来监听audio的ended,然后出现了很多bug,之后我改用if判断,就解决了,具体原因我也不清楚.11.冒泡事件在进度条拖拽计算时,取消背景层的拖拽冒泡事件是必要的！！
转发分享是一种美德
以下为网友评论： 网友“福州用户66xxxx658”：还我天天动听...【详细】
近日阿里和腾讯旗下的音乐集团再次发布重磅消息，这两家互联网巨头公司正式达成版权转授权合作，腾讯音乐把自家代理的球、华纳、索尼全球三大唱片公司与YG娱乐、杰威尔音乐...【详细】
腾讯音乐推出音乐人入驻功能, 可入库播放器, QQ音乐新布局重视内容
腾讯音乐近期推出了原创音乐人入驻的功能，可谓是一些小音乐人的福音，歌曲可以上传到QQ音乐、酷狗、酷我音乐等播放器多端同步，借助这么多平台为各位原创音乐人提供机遇与收...【详细】
好的音乐，听了之后让人如痴如醉。HiFi音乐播放器，算是一个元老级的现代音乐播放工具了。在手机都不曾拥有强大的音频播放能力之前，MP3和MP4就已经横行于世了。当然，那些只能...【详细】
中国首档Hip－hop文化推广节目《中国有嘻哈》在上周六迎来了史上最长的第九集节目。作为官方独家音频战略合作伙伴，酷我音乐第一时间送出节目中的11首歌曲，《三年二班》、《...【详细】
上周五在浙江卫视第二季《中国新歌声》播出第二期导师魔鬼六次方循环大淘杀中，作为官方独家音频战略合作伙伴，酷我音乐第一时间送出节目中的高清音频，一场“嘻哈之战”也引...【详细】
本周五晚21:10,浙江卫视第二季《中国新歌声》将上演第二场“导师魔鬼六次方循环大淘杀”。在本周陈奕迅与刘欢战队的对决中,双方各自派出了两位帅气男学员闫峻和张一腾...【详细】
由李劲作词，亢竹青作曲，韩磊的最新力作《我站立的地方是中国》日前独家登陆酷我音乐。 歌曲《我站立的地方是中国》讲诉了边防战士为了捍卫祖国山河的每一寸土地，孤独却...【详细】
江苏卫视第二季《OPPO蒙面唱将猜猜猜》即将于9月3日在江苏卫视盛大首播。节目首期便迎来了一位东北的天后“闲不住的铁娘子”，个性张扬大大咧咧，现场竟“怒怼”猜评团。作...【详细】
随着移动互联网大规模地进一步普及，新的音乐模式不断被催生出来；而随着技术的发展与移动网络速度的提升，各大音乐平台也在不断自我进化，用一个APP去集成多元化的产品与服务，...【详细】
近日，我院受理了原告杭州网易云音乐科技有限公司、杭州乐读科技有限公司与被告北京酷我科技有限公司侵害作品信息网络传播权纠纷一案。 两原告称，其拥有热播综艺节目《...【详细】
上周日晚(9月10日)，《蒙面唱将猜猜猜》迎来了张韶涵、范玮琪和素人蔡宗强相继揭面，给了观众不少惊喜。而一举拨开几重迷雾，这也是猜评团在经历首集大溃败后的成功反击。网...【详细】
艾瑞7月APP指数: 酷我音乐月活1.29亿稳居在线音乐榜首
近日,国内权威市场研究机构艾瑞发布2017年7月APP指数TOP1000排行榜，数据显示：酷我音乐月独立设备数128540000台（约1.29亿）位列排行榜总榜第30名，在在线音乐类APP中排名第三，相...【详细】
近日来，网易云音乐因为版权问题，大量歌曲连续数次遭到下架，据虎嗅网记者粗略统计——下架歌曲数量在10万首以上，波及大量当红日韩、华语歌星与组合。大量歌迷在微博上表示：“...【详细】
在小编的“刻板印象”中，各个音乐APP的形象是这样的：酷狗人最多但是有点low，QQ音乐背后有个好爸爸，网易云音乐继承了网易新闻基因的评论最精彩，虾米最受追求高逼格的小资们的...【详细】
8月30日有最新消息称，仅仅间隔一周时间，网易云音乐第二次起诉腾讯音乐企业旗下的酷我音乐进行音乐版权的侵权，现在，杭州的互联网法院已经正式受理了该案件。这是相继一周前，8...【详细】
近日第三方市场研究机构艾瑞更新了其APP指数，在最新Top 1000榜中，酷我音乐以超过1.28亿的绝对优势在在线音乐排行榜中超过网易云音乐，位列同属于腾讯音乐集团的酷狗音乐和Q...【详细】
号外，号外，自今天起，五月天不再是虾米音乐的专属，超清无损品质的五月天全线登陆酷我音乐，熟悉的阿信，曾经给予你我无数青春与力量的五月天回归了！ 终于不用再2个APP之间来回...【详细】
9月12日，网络音乐市场再次投下一颗重磅炸弹。各大网站发布消息，爆出腾讯音乐与阿里音乐完成互转授权。 此次版权共享之后，腾讯音乐娱乐集团旗下的QQ音乐、酷狗音乐、酷...【详细】
QuestMobile 2017 在线音乐报告: 酷我音乐稳居月活过亿第一梯队
专注于移动端大数据商业服务的第三方数据研究机构QuestMobile日前发布了2017年在线音乐应用行业洞察报告，报告显示，在排行榜TOP10榜单中，酷我音乐月活跃用户规模1074.9万，排...【详细】
- [LOL盒子]鼠标滚轮损坏，导致无法正常使用无限视距功能该如何处理(2014-09-25)
- [LOL盒子]盒子首页一加载就出现调试界面该如何去解决(2014-09-25)
- [LOL盒子]为什么会出现游戏角色绑定YY的时候提示绑定失败稍后再试，但过了一会还是绑定不了(2014-09-25)
- [LOL盒子]盒子上很多地方不显示字体的原因(2014-09-25)
- [LOL盒子]打开盒子上的链接为何物不是默认浏览器？(2014-09-25)
- 迅雷7.9.13最新版正式发布(2014-07-03)
- 12306手机客户端来也匆匆 去也匆匆(2014-07-03)
- 谷歌修复了FFmpeg中上千个bug(2014-07-03)