HTML网页歌曲播放器歌词同步_查看完整歌词javascript:;资源-CSDN文库

3星 · 超过75%的资源需积分: 50 162 浏览量 2012-04-01 21:18:02 上传评论 2 收藏 48KB DOC 举报

### HTML网页歌曲播放器与歌词同步技术解析 #### 一、引言随着互联网技术的发展，用户对于在线音乐播放的需求日益增长。一个优秀的在线音乐播放器不仅需要具备良好的音质和流畅的播放体验，还需要具备丰富的功能，如歌词同步显示等。本文将基于一个具体的示例——“HTML网页歌曲播放器歌词同步”，详细分析其技术实现原理及关键代码段落。 #### 二、HTML结构解析该示例中的HTML代码主要由以下几部分组成： 1. **文档声明与元数据**： ```html <html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>歌曲试听</title> ``` 这里定义了文档的基本信息，包括字符集为GB2312，页面标题为“歌曲试听”。 2. **样式设置**： ```html <STYLE type="text/css"> TD{FONT-SIZE:9pt; LINE-HEIGHT:17px;} BODY{FONT-SIZE:9pt; LINE-HEIGHT:17px; margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px;} #lrcollboxtd, #lrcollboxfont{font-family:黑体; font-size:16px;} #lrcolltd{color:#0080C0; cursor:default;} #lrcbox{color:#00FF00} #lrcfilter{filter:alpha(opacity=0)} #lrcbc{color:#FFFF33} </STYLE> ``` 这部分CSS样式用于设置页面元素的外观，比如字体大小、颜色等。值得注意的是，这里使用了`#lrcollboxtd`等特定ID选择器来设置歌词显示区域的样式。 3. **JavaScript代码**： ```html <script language="JavaScript"> self.moveTo(0,0); self.resizeTo(screen.availWidth, screen.availHeight); </script> ``` 通过JavaScript脚本控制浏览器窗口的位置和大小，使其全屏显示。 4. **歌词数据存储**： ```html <span id="lrcdata">  </span> ``` 通过`<span>`标签存储歌词数据，并使用特定格式进行时间标记，以便后续JavaScript处理时能够准确地根据音频播放进度同步显示歌词。 5. **播放器组件**： ```html <object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" id="aboutplayer" width="480" height="240"> <param name="url" value="http://tzh.ices.cn/中文歌曲/童安格-明天你是否依然爱我/明天你是否依然爱我.mp3"> <param name="volume" value="100"> <param name="enablecontextmenu" value="0"> <param name="enableerrordialogs" value="0"> </object> ``` 使用`<object>`标签嵌入了一个ActiveX控件，该控件用于播放音频。通过`<param>`标签传递播放器所需的配置参数，如音频文件路径、音量大小等。 6. **歌词显示容器**： ```html <div id="lrcollbox" style="overflow:hidden; height:260; width:480; background-color:#000000;"> <table border="0" cel ``` 此处定义了一个用于显示歌词的`<div>`容器，并设置了容器的宽度、高度和背景色。 #### 三、关键技术点详解 1. **歌词数据格式**： - 歌词数据采用特殊格式存储，如`[00:00.00]明天你是否依然爱我`表示在音频播放到00分00秒时显示“明天你是否依然爱我”。 - 歌词数据还包括歌手信息（`[ar:童安格]`）、专辑名称（`[al:其实你不懂我的心]`）等元数据，这些信息可以用于进一步美化或完善歌词显示。 2. **歌词同步显示**： - 实现歌词同步显示的核心在于根据音频播放进度动态更新歌词显示内容。 - 通常会利用JavaScript监听音频播放事件（如`timeupdate`），并根据当前播放时间与歌词数据中的时间戳匹配来实现歌词的自动滚动。 3. **跨平台兼容性**： - 由于使用了ActiveX控件，该播放器可能只在Internet Explorer浏览器中正常工作。 - 对于其他现代浏览器，建议使用HTML5 `<audio>`标签或第三方JavaScript库（如Howler.js）来构建更兼容的播放器。 4. **用户体验优化**： - 除了基本的播放功能外，还可以增加音量调节、播放进度条等功能，提升用户体验。 - 考虑到不同的网络环境，还可以加入缓冲机制，确保播放流畅。 #### 四、总结通过上述分析，我们可以看出“HTML网页歌曲播放器歌词同步”是一个典型的在线音乐播放器示例，它不仅实现了基本的音频播放功能，还具备了歌词同步显示的高级特性。开发者可以根据实际需求调整和优化该示例代码，以满足不同的应用场景。未来，随着Web技术的不断进步，类似的在线音乐播放器将会更加丰富多样，提供更加出色的用户体验。

资源推荐

资源详情

资源评论





 !" 

#

歌曲试听

#

$%&'

()*+,$-.'/0&-,'1'-21/"345+(%)*+,$-.'/0&-,'1'-21/

"36/7/7/7/

74898:)::/黑体:;/"<4

8)/877=77/:48)/877**77

48>)>/?7@48)/8****!!4

$%&'



AB$A

:C?797@

:C;?CD9C1@



AEECFC 别忘了把地址告诉你 GG 上的朋友

哦！FA

6A7AA7AEA7AA7A

AA

HI#/明天你是否依然爱我J

I/童安格J

I/其实你不懂我的心J

I/星际战舰J

I77/77C77J明天你是否依然爱我

I77/70C77J

I77/"7C77J曲：童安格词：杨立德

I77/J

I77/ =C77J午夜的收音机

I77/!"C77J轻轻传来一首歌

I77/!KC77J那是你我

I77/!=C77J都已熟悉的旋律

I77/L C77J在你遗忘的时候

I77/LKC77J我依然还记得

I77/L=C77J明天你是否依然爱我

I77/K<C77J我早已经了解

I77/K0C77J追逐爱情的规则

I7"/7 C77J虽然不能爱你

I7"/7<C77J却又不知该如何

I7"/"7C77J相信总会有一天

I7"/"!C77J你一定会离去

I7"/"<C77J但明天你是否依然爱我

I7 /K7C77JI7"/ LC77J所有的故事

I7 /K C77JI7"/ 3C77J只能有一首主题歌

I7 /K3C77JI7"/!"C77J我知道你最后的选择

I7!/7LC77JI7"/!=C77J所有的爱情

I7!/7<C77JI7"/L"C77J只能有一个结果

I7!/""C77JI7"/LKC77J我深深知道

I7!/"!C77JI7"/L=C77J那绝对不是我

I7!/"0C77JI7"/KLC77J既然曾经爱过

I7!/ C77JI7"/K<C77J又何必真正拥有你

I7!/ <C77JI7 /77C77J即使离别

I7!/ 0C77JI7 /7!C77J也不会有太多难过

I7!/!!C77JI7 /73C77J午夜里的旋律

I7!/!<C77JI7 /"7C77J一直重复着那首歌

I7!/L=C77JI7!/L7C77JI7 /"KC77JD#E

I//EEECK"CCM 77"7! 3N<OJ







PA/<:K K !0L""!"K!777L:30:<AAA

EAL=7AA L7A

AAA/;CC中文歌曲童安格明天你是否依然爱我明天你

是否依然爱我C!A

AAA"77A

AAA7A

AAA7A

P

AAAQE// <7E/L=7R/8777777A

A7AA7AA7AEA"77SAAA

A#/#/ 7AA:A



EA 7AAAAE"A







EA 7AAAAE A







EA 7AAAAE!A







剩余7页未读，继续阅读

评论收藏

内容反馈

雨小睡

2019-03-24

骗人的，不能用，不能播放，也不显示歌词

gengjiajie
上传者
2021-02-24

这个是一个播放器，需要你自己搭建网页运行环境的，不是你简单的直接打开就行，请熟知
xibbb

2012-12-24

出不来。音乐地址换了有效的地址也没有用。求解释。
liushasun

2012-08-16

这个好像在网页中显示不出字幕和音频同步...