HTML5实现歌词同步

最新推荐文章于 2024-08-20 10:31:33 发布
最新推荐文章于 2024-08-20 10:31:33 发布
阅读量2w 收藏 22
点赞数 8
分类专栏： Web 文章标签： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kkkkkxiaofei/article/details/46471289
版权
这篇博客介绍了HTML5的audio标签如何实现音频播放，并探讨了如何通过处理lyric文件实现歌词同步，包括标准歌词格式解析和UI制作，提供了一个前端歌词同步的简单实现方法。
摘要由CSDN通过智能技术生成

开篇

HTML5的最强大之处莫过于对媒体文件的处理，如利用一个简单的vedio标签就可以实现视频播放。类似地,在HTML5中也有对应的处理音频文件的标签，那就是audio标签

在线Demo

audio标签

实现一个audio标签非常简单，对应的html代码如下：

<audio id="player" 
    src="music/我在人民广场吃炸鸡.mp3" 
    autoplay controls>
</audio>

上述代码不需要一行js脚本就能实现音乐播放。其中有三个常用的属性，分别为：音频源文件，是否自动播放以及是否显示播放器控件。由于没有任何ui的展现，audio标签在chrome的默认风格如下图:

最低0.47元/天 解锁文章
『HTML5梦幻之旅』 - 跟随歌曲显示当前歌词
Yorhom's Game Box
01-03 1万+
好像哪位老师曾说过，音乐是世界通用语言。是的，听不懂英文，但总能欣赏英文歌吧。 很早以前就想做个音乐播放器，但是由于跟随歌曲显示当前歌词的效果一直实现不了，所以我的想法一直无法实现。不过，最近创意不佳，没心情开发游戏了，于是闲下来搞点小发明。这次就先模仿一下手机QQ音乐中歌词显示效果。 恰巧，年末新歌蛮多的，于是我就选了一首比较好听的歌曲——手写的从前。 不难发现，在这里，除了前三行，方括号代表的不是区间而是时间。在前三行中，方括号里的内容分别代表：歌曲名，演唱者，音乐长度。但是这些算不上歌词吧，所以真正要
html5 歌词自动滚动效果,简单的HTML5音乐播放器(带歌词滚动)
weixin_42117032的博客
05-31 1312
1 var musicPlayer = function() {2 return this.init.apply(this, arguments);3 };45 musicPlayer.prototype ={6 constructor: musicPlayer,7 init: function(options) {8 if (isEmptyObj(options)...
HTML实现歌词歌曲同步
05-02
用JavaScript + HTML + CSS样式 实现歌词歌曲同步,注释已经写的很清楚了,包括本实例的一些小问题,大家可以借鉴一下,不知道怎么设置成免费下载= =!
HTML5音频播放器显示歌词功能思路及实现
zhanghao86_的博客
08-01 4717
HTML5中做音频的标签audio，这篇文章讲解了其中一个较为重要的功能----显示歌词，就是歌曲唱的过程中，歌词随之显示。主要实现思路是利用对象属性和属性值的关系，再利用正则表达式匹配指定歌词的格式，以时间：歌词的形式返回一个对象，再利用audio中currentTime的属性传递给返回的对象，并匹配当前时间，达到显示歌词的目的。
HTML基础知识入门大全
最新发布
HTDiiii的博客
08-20 870
HTML 什么是 HTML HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。两端的标签可以使内容变成超链接，以连接到另一个页面；使字体表现为斜体等。 HTML 标签/元素 HTML 属性 第一个 HTML <!-- 文档的类型 ，根据类型可以知道当前文档的版本-->
html代码怎么出歌词,html中的歌词翻译
weixin_29643235的博客
06-09 261
嗯。从语义上讲，我可以看到这些是列表或段落的论据。我想我会用这样的东西(为代码膨胀道歉)：.song{background: #444;overflow: auto;zoom: 1.0;padding-bottom: 1em;border: 1px solid #000;}.song .lyrics{float: left;color: #ddd;margin: 1em;width: 20em;}...
HTML随音乐播放时间自动歌词,python 根据歌词的时间（LRC文件），生成H5 audio按句播放器...
weixin_36091268的博客
06-05 377
1、效果图 2、Python代码：# coding=UTF-8import codecsimport osimport re# 正则校验是否为浮点数字def is_number(num):pattern = re.compile(r'^[-+]?[-0-9]\d*\.\d*|[-+]?\.?[0-9]\d*$')result = pattern.match(num)if result:return...
HTML5音频播放，歌词同步，及视频播放功能（JPlayer、JWPlayer、VideoJS）
英雄主义
06-12 1万+
HTML5音频播放，歌词同步，及视频播放功能（JPlayer、JWPlayer、VideoJS）
利用原生HTML + CSS + JS实现歌词滚动
stu_kk的博客
06-17 941
利用原生HTML + CSS + JS实现歌词滚动
HTML5使用Audio标签实现歌词同步的效果
09-28
HTML5的最强大之处莫过于对媒体文件的处理，如利用一个简单的vedio标签就可以实现视频播放。类似地,在HTML5中也有对应的处理音频...通过本文给大家介绍HTML5使用Audio标签实现歌词同步的效果，感兴趣的朋友一起学习吧
html5带滚动歌词音乐播放器
09-13
html5+js带滚动歌词音乐播放器，同时还支持列表(用json) by:小灰灰 有需要的朋友可以下载使用哦 谢谢大家支持
java实现歌词同步显示
11-23
.java实现歌词同步显示,读取歌词文件,读取lrc特定的文本文件
原生JS实现网页手机音乐播放器 歌词同步播放的示例
10-18
除了音乐播放和歌词同步滚动，页面上还需要提供用户与播放器交互的界面，例如播放、暂停按钮，以及显示当前播放时间和歌词的组件。这些组件需要使用HTML和CSS来设计和布局，而JavaScript则用于处理用户的交互行为，...
HTML5多种音频视频播放插件，歌词同步
06-19
本主题将深入探讨HTML5中的音频和视频播放插件，特别是JPlayer、JWPlayer以及VideoJS，它们都是为了提升用户体验，尤其是实现歌词同步功能。 **1. HTML5 Audio和Video元素** HTML5的`<audio>`和`<video>`元素是基础...
php中文歌词,html如何制作滚动歌词
weixin_33765959的博客
03-10 412
html制作滚动歌词的方法：首先在标签里面写好编码格式，引入css样式和jQuery；然后放置播放器，代码为【】。本教程操作环境：windows7系统、html5版，DELL G3电脑。html制作滚动歌词的方法：首先我们创建一个html文件，名字随便取，比如：index.html,这个简单，不用多说。不着急开始写代码，我们在创建一个css文件，不妨就命名为musicplay.css，js的话我们...
html页面制作滚动歌词
记录我的学习路线
02-18 9097
在我们制作页面音乐的时候，我们一般利用audio标签，看起来效果挺不错的，可是这样的界面不够美观不是吗？那么我想，如果添加歌词滚动效果，那么界面是不是很棒？当然，我们制作的页面不涉及服务器，不然就不够纯粹了，利用简单的JS和jquery就可以完成了！！分享一下。首先我们创建一个html文件，名字随便取，比如：index.html,这个简单，不用多说。不着急开始写代码，我们在创建一个css文件，不妨...
JS实现歌词同步滚动效果
热门推荐
maid_04的博客
06-28 2万+
实现歌词同步滚动效果，首先要用audio标签引入音频 &lt;div id="h_center1"&gt; &lt;span&gt;当前播放：&lt;/span&gt; &lt;span&gt;大鱼海棠&lt;/span&gt; &lt;audio id="now_music" src="双笙 - 大鱼.mp3
js解析lrc 实现lrc歌词同步滚动效果
Zy的博客
11-26 1万+
这两天想着做一个h5的网页播放器，实现歌词同步滚动 但是上网找了很多资料，竟发现没有比较完善的代码供参考，但是无意间看到了百度的千千音乐有这样的效果，就想着一定能通过js实现 经过两三天的努力，终于做出了这样的效果 实现功能 歌词同步滚动 同步歌词高亮效果 代码实现 首先，在body中加audio 和 放歌词的ul标签 <div> <ul id="lrclist...
HTML编写的网页音乐歌词同步代码示例
这个代码的核心在于结合HTML、CSS和JavaScript来实现音频播放与歌词同步。以下是对关键知识点的详细解释： 1. **HTML基础结构**： 首先，代码以HTML5的DOCTYPE声明开始，确保遵循标准的HTML4.0过渡性规范。`xmlns:...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值