首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用js,html,css实现歌词滚动的效果

先看下效果吧 由于实现这个效果的重心是在于js,html 和 css 大家看代码就明白了 html <!.../assets/data.js";  console.log(lrc) 3....歌词字符串转换为 数组对象的形式 解析歌词 转换为歌词数组对象的形式 因为目前歌词lrc 只是一个字符串对象,里面包含了歌曲时间和对应的歌词,但是在字符串里面,不好操作,我们需要将每一句歌词以及开始的时间放入一个歌词对象里面...完整js代码 data.js var lrc = `[00:01.06]难念的经 [00:03.95]演唱:周华健 [00:06.78] [00:30.96]笑你我枉花光心计 [00:34.15].../assets/data.js"; /** * 将歌词字符 转换为对象的形式 * obj = {time:开始时间, words: 歌词内容} */ const parseLrc = ()

16610

民谣歌词基本格式_歌词创作

JS解析LRC格式的歌词 1、把歌词载入。 方法一:直接把歌词粘贴到一个textarea文本域中,然后把它设置为隐藏。 <!...05:09.79]摇曳着苍穹又描摹着黄土 [05:14.26]东方鱼肚白出 [05:16.53]烈日绽放吐露 [05:18.47]放下尘浮我已踏上归途 [05:25.04] 再用JS...JS对象 代码如下: var oLRC = { ti: "", //歌曲名 ar: "", //演唱者 al: "", //专辑名 by: "", //歌词制作人 offset: 0, //时间补偿值...,单位毫秒,用于调整歌词整体位置 ms: [] //歌词数组{t:时间,c:歌词} }; function createLrcObj(lrc) { if(lrc.length==0) return;...3、把解析后的歌词呈现在页面上 定义一个列表标签: 用JS歌词写到标签里面: function showLRC() { var s=""; for(var

68930
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    歌词显示控件的实现(上)——歌词解析

    考虑到歌词显示控件涉及到歌词解析,自定义控件的实现等等诸多方面,可能文章的篇幅上会比较冗长,同时也为了方便自己和码友们能够根据自己的需求和爱好各取所需,将《歌词显示控件的实现上》这篇文章分成上、下两篇,...分别是《歌词显示控件的实现上——歌词解析》和《歌词显示控件的实现下——歌词展示自定义View》。...ok,开始切入正题 01 — 了解歌词文件结构 写过音乐播放器的朋友可能都了解过歌词文件的规范格式,既然是歌词显示的控件,就必然需要清楚地了解歌词文件的组成规范,才能准确无误的解析歌词文件,得到我们想要的信息...了解清楚歌词文件结构,我们就能对症下药: 02 — 开始解析 既然了解了歌词文件的组成部分,那么解析歌词文件也就不难,就是简单的文件内容读取: 1、首先获取*.lrc歌词文件的二进制流InputStream...下面就是实现歌词文件的解析工作: 1、实体类 首先,需要准备两个类主要用于歌词解析结果的缓存: LineInfo:歌词行信息:包含行开始时间和歌词行内容 LyricInfo:歌词信息:包含标题、歌手、专辑等等

    2.1K20

    JavaScript 解析 lrc 歌词

    最近打算做播放器,研究了下解析lrc歌词的算法,百度基本没有现成的,所以自己各种搜索各种折腾然后写了个~~~特分享给大家 我们看到的lrc歌词一般都是这样的: [ti:听妈妈的话] [ar:周杰伦] [...02:06.91]因为过两天你会在操场上捡到 [02:09.18]你会开始喜欢上流行歌 [02:11.35]因为张学友开始准备唱吻别 [03:58.07]美丽的白发 幸福总发芽 可以看到,歌词是由时间标签和歌词本身构成的...,至于那些歌曲信息这些我就忽略了 大概思路是: 按行把歌词拆成数组 遍历这个数组,将每一行的歌词和时间标签一道转换为数组 遍历数组的每一次循环要干的事情: 用正则匹配出这行的时间标签和对应的歌词 以时间标签为单位...,将标签转换为以秒为单位的时间再与该行对应的歌词一同push入数组 由于多时间标签的存在顺序会打乱,所以我们最后还要将保存歌词和时间的数组按时间从小到大排序 js代码如下: function parseLyric...var _lrc = lyric[i].replace(/[d{2}:d{2}((.|:)d{2})]/g,""); //过滤掉空行等非歌词正文部分

    2K21

    每次记歌词——使用Python自动发邮件提醒你记歌词

    前言 前几天在Python交流群里边,【冫马讠成】大佬分享了一个有趣的代码,用于定时发送歌词到邮箱,觉得挺有意思,这里拿出来给大家分享。...实现思路 实现思路倒是不难,其一是Python网络爬虫,将网页上的歌词信息抓取到,然后存起来到一个变量中,其二是编写发送邮件的逻辑,编辑好邮寄模板,然后将抓到的内容发送出去即可,定时任务可以使用Windows...content = '亲爱的,今天歌名是:'+lyric1 message = MIMEText(content, 'plain', 'utf-8') subject = '今天听什么(附歌词...你也可以定时给自己发,使用定时任务工具,做个定时任务,每天提醒自己,看看歌词啥的,看的歌词多了,这样在歌词大赛中也许能拿个好名次呢!...这篇文章主要基于Python网络爬虫和Python自动化办公中的邮件发送知识,实现歌词自动发送邮件的小项目。 最后感谢【冫马讠成】大佬的代码分享,也欢迎大家积极尝试,有好的内容也可以分享给我噢!

    41530

    有可以自己写歌词的软件,专门写歌词的软件,创作歌词的软件,帮忙写歌词的软件

    它是AI人工智能写歌词软件,你来输入关键词句子作为引导语,它就能自动快速创作原创歌词给你作为参考借鉴,作为你创作的灵感的启发和开拓思路提示,帮助你把歌词继续创作下去。...图片到目前为止,AI机器人小芝的人工智能写歌词已经发布更新很多次版本app,它具有电脑版也有手机版的写歌词软件,在此基础上,人工智能写歌词于2022更新了不少的功能。...音乐内容的歌词创作是关键,AI机器人小芝的智能写歌词创作布局已于2019年开始,人工智能写歌词助推音乐歌词创作应用的技术已经成熟。...AI人工智能写歌词是一种新的发展趋势,音乐创作应用方面好的辅助工具。由于人工智能写歌词可以让音乐创作人更轻松,因此为了更好AI歌词创作,AI机器人小芝24小时在不断地自动学习更新迭代。...图片音乐创作方面歌词的创作方式不断在改变,AI机器人小芝(aixiegeci)的应用,降低歌词创作难度,提高了歌词的写作质量和创作速度,引入大量AI人工智能算法辅助创作,时代在进步歌词创作领域的一个趋势

    1.1K50

    iOS 音乐播放器之锁屏歌词+歌词解析+锁屏效果

    iOS11以下锁屏信息预览 //展示锁屏歌曲信息:图片、歌词、进度、歌曲名、演唱者、专辑、(歌词是绘制在图片上的) - (void)showLockScreenTotaltime:(float)totalTime...歌词样式.png 根据上图的歌词样式,思路就是:先根据换行符“\n“分割字符串,获得包含每一行歌词字符串的数组,然后解析每一行歌词字符,获得时间点和对应的歌词,再用创建的歌词对象wslLrcEach来存储时间点和歌词..., copy) NSString * lrc ; @end 接下来就是要让歌词随歌曲的进度来滚动显示,主要代码如下: self.tableView 显示歌词的 currentTime...iOS11网易云音乐锁屏界面.PNG 更新于2018/3/7 上面提到 iOS11系统上 ,不能像以往那样显示锁屏歌词了,那锁屏歌词该怎么显示呢,网易云音乐给出了如下图的设计:她是把当前唱到的歌词放到了锁屏的副标题处...[songDict setObject:@"当前歌词" forKey:MPMediaItemPropertyAlbumTitle]; ? 网易云音乐锁屏歌词.PNG

    2.8K70

    作词软件app,写词神器app,作词神器,歌词创作app,写歌词押韵app,写原创歌词的软件

    随着AI机器人小芝(aixiegeci)人工智能写歌词技术的进步,它们是否会取代音乐人的作词也导致很多音乐人的疑惑。答案是:不会,相反,它是来帮助音乐人更好地写好歌词作品。...其自研的AI音乐引擎可自创的歌词风格有:综合、流行、独立、古风、国风、民族、说唱等风格,被广泛用于辅助音乐人进行歌词创作,使用它写出一些原创歌词句子和押韵的韵脚给作词人词穷的时候作为参考和思路提示。...音乐人可对它写出来歌词进行修改、增删、润色,成为自己满意的歌词作品。不少音乐创作人看好AI辅助音乐歌词创作app领域,它能为音乐人提供歌词创作灵感、降低歌词创作成本、提供创作歌词的效率。...对于整个行业来说,AI人工智能写歌词app对音乐人只是一个小的方面而已。作为创作者,我们难免遇到没有灵感的时候,写不出来歌词,咬烂了笔头,敲烂了键盘,半天写不出来几句歌词的窘境。...对于作词人来说,AI机器人小芝被应用于辅助歌词创作领域,那么你在歌词创作上花的时间和成本也相对较低,音乐行业的自动化未来会让音乐人更加轻松。

    1.9K20

    新潮科技:人工智能歌词创作软件app,在线ai作词押韵写歌词,可以自己写歌词的软件

    它不仅实现了传统常有的写歌词押韵功能,还引入了大量AI人工智能算法来辅助创作,根据你自己输入的关键词句子作为引导语作为创作的指引方向,不断写出原创歌词句子给你做参考,降低了创作歌词的难度,提高了创作歌词的乐趣和效率...该软件有两个创新功能模块:AI智能写歌词和AI智能填词。这个歌词创作工具对于想要进一步改善歌词写作效果和写歌词没有灵感思路的音乐人来说是及时的帮助。...图片歌词的创作质量和速度一直是AI人工智能写歌词的研究重点。在原创歌词创作未来发展的道路上,AI机器人小芝,不断地自我学习,不断自我创作。...数据库24小时在更新加大,训练出更多的创作风格和庞大的大数据,实现千人千面的创作效果,每个人每次得到的歌词不一样,每个人得到的歌词也不一样,千变万化,各不相同。...图片据了解,AI机器人小芝,歌词创作通过人工智能技术,支持用户来输入关键词句子作为引导语,根据用户自由选择歌词风格类型、选择韵脚和押韵字数,在30秒钟内在线生成独特的原创歌词,生成的原创歌词可用于音乐人词穷找不到灵感的时候的思路提示和参考借鉴用途

    1.8K00

    iOS 音乐播放器之锁屏歌词+歌词解析+锁屏效果

    [歌词样式.png] 根据上图的歌词样式,思路就是:先根据换行符“\n“分割字符串,获得包含每一行歌词字符串的数组,然后解析每一行歌词字符,获得时间点和对应的歌词,再用创建的歌词对象wslLrcEach...来存储时间点和歌词,最后得到一个存储wslLrcEach对象的数组。..., copy) NSString * lrc ; @end 接下来就是要让歌词随歌曲的进度来滚动显示,主要代码如下: self.tableView 显示歌词的 currentTime...[iOS11网易云音乐锁屏界面.PNG] 更新于2018/3/7 上面提到 iOS11系统上 ,不能像以往那样显示锁屏歌词了,那锁屏歌词该怎么显示呢,网易云音乐给出了如下图的设计:她是把当前唱到的歌词放到了锁屏的副标题处...[songDict setObject:@"当前歌词" forKey:MPMediaItemPropertyAlbumTitle]; [网易云音乐锁屏歌词.PNG] [亲,赞一下,给个star.gif]

    2.7K150

    android实现歌词自动滚动效果

    最近在做Android 的MP3播放的项目,要实现歌词的自动滚动,以及同步显示。 lyric的歌词解析主要用yoyoplayer里面的,显示部分参考了这里 ,这里只是模拟MP3歌词的滚动。...显示画出当前时间点的歌词,然后再分别画出改歌词后面和前面的歌词,前面的部分往上推移,后面的部分往下推移,这样就保持了当前时间歌词在中间。 代码如下 LyricView,相关信息在注释了标明了。...mPaint.setTextSize(22); mPaint.setColor(Color.WHITE); mPaint.setTypeface(Typeface.SERIF); // 高亮部分 当前歌词...* * @return currentDunringTime 歌词只需的时间 */ public long updateIndex(long time) { // 歌词序号 index =...就是取出歌词的index,和该行歌词持续的时间进行sleep。

    2.7K10

    动效歌词之全新实践

    目标 我们的目标十分明确,一是提升歌词的基础体验,二是在此基础上,能提供差异化的VIP特效,来吸引用户开通VIP。...技术方案选型 这里最初的思路有两个方向,升级现有歌词组件和开发全新歌词组件。所谓知已知彼,百战不殆, 通过对移动端面主流竞品的技术方案和PC端类似方案的技术调研与分析。...那除了动效歌词之外,我们还可以做些什么呢? 首先,我们脱离业务对架构进行更高一层的抽象,梳理出了更通用的架构方。...以上主要是介绍动效歌词技术方案的实现原理与架构介绍。...小结 动效歌词的技术方案经历了无数次讨论和技术预研,采用了并行计算大幅减少运算时间,优化了编译策略解决了跨平台问题。

    2.4K10

    动效歌词之全新实践

    现状 歌词浏览已经成为音乐app的标配,展示和动画效果也基本上大同小异,主要是单行的逐字染色的卡拉OK效果和多行的滚动效果。当然,我们也不例外。 2....目标 我们的目标十分明确,一是提升歌词的基础体验,二是在此基础上,能提供差异化的VIP特效,来吸引用户开通VIP。...技术方案选型 这里最初的思路有两个方向,升级现有歌词组件和开发全新歌词组件。所谓知已知彼,百战不殆, 通过对移动端面主流竞品的技术方案和PC端类似方案的技术调研与分析。...那除了动效歌词之外,我们还可以做些什么呢? 首先,我们脱离业务对架构进行更高一层的抽象,梳理出了更通用的架构方。...以上主要是介绍动效歌词技术方案的实现原理与架构介绍。

    2.6K60
    领券