就下载 —— 安全下载、无毒手机软件、绿色软件官方下载网站最近更新|下载排行|热门标签|收藏本站

您现在的位置是:就下载 > IT资讯 > 软件资讯 > QQ音乐播放器简易开发

QQ音乐播放器简易开发

时间:2017-09-15 16:10:57 来源: 互联网 复制分享

《QQ音乐播放器简易开发》根据互联网资讯由就下载(www.9xz.net)为您收集整理。

  由于本人喜欢听音乐,然后突然某次抽筋,想用H5的audio来写一个模拟qq播放器功能的页面.说干就干.花了整整4天时间,其中搞歌词的lrc文件花了不少时间T.T啊.亮点:1.歌词同步:支持主界面以及副界面的歌词同步功能,并且当前行高亮展示。

QQ音乐播放器简易开发

  2.多类目切换:实现4大类目的不同歌单,当前歌曲黑底显示的功能.

QQ音乐播放器简易开发

  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数组内并将分:秒格式转换为秒的格式,用于给播放时间做计算。

QQ音乐播放器简易开发

  10.歌曲长度,进度条长度以及歌词同步运算:首先将当前歌曲长度除60向下取整,歌曲长度的分,在将总长度-分钟数*60取小数点0位获取到歌曲长度的秒数,作为歌曲总长度,然后让显示器显示,设一个计时器.每200毫秒进行一次运算,先求当前播放的时间,求法与求总时间类似,进度条长度用当前歌曲时间/歌曲总时间作为百分比值进行显示,这边的歌词同步,我用了grep函数去循环当前秒数在之前处理好的歌词时间节点数组中去返回出比当前秒数小的时间个数减去1,再用dis存在并且dis不等于-1以及dis不等于上一个dis后再执行歌词的移动,移动的距离为每条高度,这样一是避免bug,二则增加运行性能,并不会每200毫秒就做一次无谓的歌词运动,值得注意的是原先我是用的$.inArray去计算当前时间戳在处理数组中的位子,但是发现用inArray在拖拽进度条之后由于,时间节点的计算需要正好踩到相等点才能有反应,所以会有延迟反应,这里有意思的是我最先使用addEventListener来监听audio的ended,然后出现了很多bug,之后我改用if判断,就解决了,具体原因我也不清楚.11.冒泡事件在进度条拖拽计算时,取消背景层的拖拽冒泡事件是必要的!!

  转发分享是一种美德

音乐播放器UI界面设计欣赏! 不一样的风格

腾讯音乐和阿里音乐达成共识 未来或许一个音乐播放器就够了

腾讯音乐推出音乐人入驻功能, 可入库播放器, QQ音乐新布局重视内容

发烧友应该这样选择HiFi播放器! 太实用!

《中国有嘻哈》六强诞生 酷我音乐带你探秘最强Rapper

周杰伦为何输给陈奕迅? 酷我音乐揭晓“新歌声”战报

《中国新歌声》那英被刘欢杰伦围攻, 酷我音乐带你一探究竟

《我站立的地方是中国》酷我音乐独家首发

猜评团遭蒙面天后怒怼 酷我音乐现场音频揭晓本期赢家

酷我音乐软硬件齐发力 打造一站式音乐体验

酷我音乐又双叒叕侵权了, 网易云腾讯互诉争端升级

酷我音乐带你揭秘范玮琪蒸桑拿蹲马步的奇妙经历

艾瑞7月APP指数: 酷我音乐月活1.29亿稳居在线音乐榜首

酷我音乐歌单导入, 一分钟复活网易云音乐下架歌曲

一夜之间, 身边的发烧友都在用酷我音乐, 发生了什么?

奔走相告, 时隔一周, 网易云音乐再次起诉腾讯酷我音乐侵权

艾瑞: 酷我音乐逆势上扬 扩大优势锁定位置

有一种青春叫五月天! 今天的酷我音乐有点燃!

跟酷我一起听五月天! 版权互转能否打破音乐App选择焦虑?

QuestMobile 2017 在线音乐报告: 酷我音乐稳居月活过亿第一梯队

音乐播放器UI界面设计欣赏! 不一样的风格

音乐播放器UI界面设计欣赏! 不一样的风格  以下为网友评论:  网友“福州用户66xxxx658”:还我天天动听...【详细】

http://www.9xz.net/it/ruanjianzixun/92179.html

腾讯音乐和阿里音乐达成共识 未来或许一个音乐播放器就够了

腾讯音乐和阿里音乐达成共识 未来或许一个音乐播放器就够了  近日阿里和腾讯旗下的音乐集团再次发布重磅消息,这两家互联网巨头公司正式达成版权转授权合作,腾讯音乐把自家代理的球、华纳、索尼全球三大唱片公司与YG娱乐、杰威尔音乐...【详细】

http://www.9xz.net/it/ruanjianzixun/92178.html

腾讯音乐推出音乐人入驻功能, 可入库播放器, QQ音乐新布局重视内容

腾讯音乐推出音乐人入驻功能, 可入库播放器, QQ音乐新布局重视内容  腾讯音乐近期推出了原创音乐人入驻的功能,可谓是一些小音乐人的福音,歌曲可以上传到QQ音乐、酷狗、酷我音乐等播放器多端同步,借助这么多平台为各位原创音乐人提供机遇与收...【详细】

http://www.9xz.net/it/ruanjianzixun/92177.html

发烧友应该这样选择HiFi播放器! 太实用!

发烧友应该这样选择HiFi播放器! 太实用!  好的音乐,听了之后让人如痴如醉。HiFi音乐播放器,算是一个元老级的现代音乐播放工具了。在手机都不曾拥有强大的音频播放能力之前,MP3和MP4就已经横行于世了。当然,那些只能...【详细】

http://www.9xz.net/it/ruanjianzixun/92176.html

《中国有嘻哈》六强诞生 酷我音乐带你探秘最强Rapper

《中国有嘻哈》六强诞生 酷我音乐带你探秘最强Rapper  中国首档Hip-hop文化推广节目《中国有嘻哈》在上周六迎来了史上最长的第九集节目。作为官方独家音频战略合作伙伴,酷我音乐第一时间送出节目中的11首歌曲,《三年二班》、《...【详细】

http://www.9xz.net/it/ruanjianzixun/92175.html

周杰伦为何输给陈奕迅? 酷我音乐揭晓“新歌声”战报

周杰伦为何输给陈奕迅? 酷我音乐揭晓“新歌声”战报  上周五在浙江卫视第二季《中国新歌声》播出第二期导师魔鬼六次方循环大淘杀中,作为官方独家音频战略合作伙伴,酷我音乐第一时间送出节目中的高清音频,一场“嘻哈之战”也引...【详细】

http://www.9xz.net/it/ruanjianzixun/92174.html

《中国新歌声》那英被刘欢杰伦围攻, 酷我音乐带你一探究竟

《中国新歌声》那英被刘欢杰伦围攻, 酷我音乐带你一探究竟  本周五晚21:10,浙江卫视第二季《中国新歌声》将上演第二场“导师魔鬼六次方循环大淘杀”。在本周陈奕迅与刘欢战队的对决中,双方各自派出了两位帅气男学员闫峻和张一腾...【详细】

http://www.9xz.net/it/ruanjianzixun/92173.html

《我站立的地方是中国》酷我音乐独家首发

《我站立的地方是中国》酷我音乐独家首发  由李劲作词,亢竹青作曲,韩磊的最新力作《我站立的地方是中国》日前独家登陆酷我音乐。  歌曲《我站立的地方是中国》讲诉了边防战士为了捍卫祖国山河的每一寸土地,孤独却...【详细】

http://www.9xz.net/it/ruanjianzixun/92172.html

猜评团遭蒙面天后怒怼 酷我音乐现场音频揭晓本期赢家

猜评团遭蒙面天后怒怼 酷我音乐现场音频揭晓本期赢家  江苏卫视第二季《OPPO蒙面唱将猜猜猜》即将于9月3日在江苏卫视盛大首播。节目首期便迎来了一位东北的天后“闲不住的铁娘子”,个性张扬大大咧咧,现场竟“怒怼”猜评团。作...【详细】

http://www.9xz.net/it/ruanjianzixun/92171.html

酷我音乐软硬件齐发力 打造一站式音乐体验

酷我音乐软硬件齐发力 打造一站式音乐体验  随着移动互联网大规模地进一步普及,新的音乐模式不断被催生出来;而随着技术的发展与移动网络速度的提升,各大音乐平台也在不断自我进化,用一个APP去集成多元化的产品与服务,...【详细】

http://www.9xz.net/it/ruanjianzixun/92170.html

酷我音乐又双叒叕侵权了, 网易云腾讯互诉争端升级

酷我音乐又双叒叕侵权了, 网易云腾讯互诉争端升级  近日,我院受理了原告杭州网易云音乐科技有限公司、杭州乐读科技有限公司与被告北京酷我科技有限公司侵害作品信息网络传播权纠纷一案。  两原告称,其拥有热播综艺节目《...【详细】

http://www.9xz.net/it/ruanjianzixun/92169.html

酷我音乐带你揭秘范玮琪蒸桑拿蹲马步的奇妙经历

酷我音乐带你揭秘范玮琪蒸桑拿蹲马步的奇妙经历  上周日晚(9月10日),《蒙面唱将猜猜猜》迎来了张韶涵、范玮琪和素人蔡宗强相继揭面,给了观众不少惊喜。而一举拨开几重迷雾,这也是猜评团在经历首集大溃败后的成功反击。网...【详细】

http://www.9xz.net/it/ruanjianzixun/92168.html

艾瑞7月APP指数: 酷我音乐月活1.29亿稳居在线音乐榜首

艾瑞7月APP指数: 酷我音乐月活1.29亿稳居在线音乐榜首  近日,国内权威市场研究机构艾瑞发布2017年7月APP指数TOP1000排行榜,数据显示:酷我音乐月独立设备数128540000台(约1.29亿)位列排行榜总榜第30名,在在线音乐类APP中排名第三,相...【详细】

http://www.9xz.net/it/ruanjianzixun/92167.html

酷我音乐歌单导入, 一分钟复活网易云音乐下架歌曲

酷我音乐歌单导入, 一分钟复活网易云音乐下架歌曲  近日来,网易云音乐因为版权问题,大量歌曲连续数次遭到下架,据虎嗅网记者粗略统计——下架歌曲数量在10万首以上,波及大量当红日韩、华语歌星与组合。大量歌迷在微博上表示:“...【详细】

http://www.9xz.net/it/ruanjianzixun/92166.html

一夜之间, 身边的发烧友都在用酷我音乐, 发生了什么?

一夜之间, 身边的发烧友都在用酷我音乐, 发生了什么?  在小编的“刻板印象”中,各个音乐APP的形象是这样的:酷狗人最多但是有点low,QQ音乐背后有个好爸爸,网易云音乐继承了网易新闻基因的评论最精彩,虾米最受追求高逼格的小资们的...【详细】

http://www.9xz.net/it/ruanjianzixun/92165.html

奔走相告, 时隔一周, 网易云音乐再次起诉腾讯酷我音乐侵权

奔走相告, 时隔一周, 网易云音乐再次起诉腾讯酷我音乐侵权  8月30日有最新消息称,仅仅间隔一周时间,网易云音乐第二次起诉腾讯音乐企业旗下的酷我音乐进行音乐版权的侵权,现在,杭州的互联网法院已经正式受理了该案件。这是相继一周前,8...【详细】

http://www.9xz.net/it/ruanjianzixun/92164.html

艾瑞: 酷我音乐逆势上扬 扩大优势锁定位置

艾瑞: 酷我音乐逆势上扬 扩大优势锁定位置  近日第三方市场研究机构艾瑞更新了其APP指数,在最新Top 1000榜中,酷我音乐以超过1.28亿的绝对优势在在线音乐排行榜中超过网易云音乐,位列同属于腾讯音乐集团的酷狗音乐和Q...【详细】

http://www.9xz.net/it/ruanjianzixun/92163.html

有一种青春叫五月天! 今天的酷我音乐有点燃!

有一种青春叫五月天! 今天的酷我音乐有点燃!  号外,号外,自今天起,五月天不再是虾米音乐的专属,超清无损品质的五月天全线登陆酷我音乐,熟悉的阿信,曾经给予你我无数青春与力量的五月天回归了!  终于不用再2个APP之间来回...【详细】

http://www.9xz.net/it/ruanjianzixun/92162.html

跟酷我一起听五月天! 版权互转能否打破音乐App选择焦虑?

跟酷我一起听五月天! 版权互转能否打破音乐App选择焦虑?  9月12日,网络音乐市场再次投下一颗重磅炸弹。各大网站发布消息,爆出腾讯音乐与阿里音乐完成互转授权。  此次版权共享之后,腾讯音乐娱乐集团旗下的QQ音乐、酷狗音乐、酷...【详细】

http://www.9xz.net/it/ruanjianzixun/92161.html

QuestMobile 2017 在线音乐报告: 酷我音乐稳居月活过亿第一梯队

QuestMobile 2017 在线音乐报告: 酷我音乐稳居月活过亿第一梯队  专注于移动端大数据商业服务的第三方数据研究机构QuestMobile日前发布了2017年在线音乐应用行业洞察报告,报告显示,在排行榜TOP10榜单中,酷我音乐月活跃用户规模1074.9万,排...【详细】

http://www.9xz.net/it/ruanjianzixun/92160.html

上一篇:音乐播放器UI界面设计欣赏! 不一样的风格

本文地址:软件资讯 >> http://www.9xz.net/it/ruanjianzixun/92180.html

下一篇:返回列表

  • 打印
推荐阅读
推荐内容
热点内容
推荐安卓应用