网页播放技术的歌词同步

 更新时间:2016年9月20日 19:03  点击:1831
   WMP 与 Real 既有各自专用的歌词表现形式,又有两者都通用的歌词表现形式。WMP 专用的歌词表现形式是通过 *.SMI 文件实现的,Real 专用的歌词表现形式是通过 *.RT 文件实现的,两者通用的歌词表现形式为 *.LRC 文件。

    SMI 歌词文件

    请点播放键观看效果(有个缓冲过程,大家要等待片刻)。SMI 文件有专门的制作软件,非常方便,方法后面详谈。可实现歌词的单行、多行及卡拉OK等特殊效果。SMI 歌词实际是利用 WMP 的 Closed Caption 属性实现的。

    代码如下:

    <OBJECT ID="aboutplayer" CLASSID="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" height=150 width=200><param name="UIMode" value="none"></OBJECT>
    <table height=100 width=200 border=3 bordercolor=blue>
        <tr align=center>
            <td bgcolor=white><font color=olive size=2>SMI 演示</font></td>
        </tr>
        <tr height=75>
            <td bgcolor="green"><div id=CapText></div></td>
        </tr>
    </table>
    <table width=200>
        <tr>
            <td align=center><INPUT TYPE="BUTTON" VALUE="Play" OnClick="Play()"></td>
            <td align=center><INPUT TYPE="BUTTON" VALUE="Stop" OnClick="Stop()"></td>
        </tr>
    </table>
<SCRIPT>
function Play()
{
aboutplayer.closedCaption.CaptioningID = "CapText";
aboutplayer.closedCaption.SAMIFileName = "http://lrc.aboutplayer.com/goodbye.smi";
aboutplayer.URL = "http://www.shijiren.net/wma/g00146001/g0014600101.wma";
aboutplayer.controls.play();
}
function Stop()
{
aboutplayer.controls.stop();
}
</SCRIPT>

    问题的关键就是下面三句:

<

这是一篇程序员写给程序员的趣味读物。所谓趣味是指可以比较轻松地了解一些原来不清楚的概念,增进知识,类似于打RPG游戏的升级。整理这篇文章的动机是两个问题:

问题一:

使用Windows记事本的“另存为”,可以在GBK、Unicode、Unicode big endian和UTF-8这几种编码方式间相互转换。同样是txt文件,Windows是怎样识别编码方式的呢?

我很早前就发现Unicode、Unicode big endian和UTF-8编码的txt文件的开头会多出几个字节,分别是FF、FE(Unicode),FE、FF(Unicode big endian),EF、BB、BF(UTF-8)。但这些标记是基于什么标准呢?

问题二:
最近在网上看到一个ConvertUTF.c,实现了UTF-32、UTF-16和UTF-8这三种编码方式的相互转换。对于Unicode(UCS2)、GBK、UTF-8这些编码方式,我原来就了解。但这个程序让我有些糊涂,想不起来UTF-16和UCS2有什么关系。

查了查相关资料,总算将这些问题弄清楚了,顺带也了解了一些Unicode的细节。写成一篇文章,送给有过类似疑问的朋友。本文在写作时尽量做到通俗易懂,但要求读者知道什么是字节,什么是十六进制。

0、big endian和little endian

big endian和little endian是CPU处理多字节数的不同方式。例如“汉”字的Unicode编码是6C49。那么写到文件里时,究竟是将6C写在前面,还是将49写在前面?如果将6C写在前面,就是big endian。如果将49写在前面,就是little endian。

“endian”这个词出自《格列佛游记》。小人国的内战就源于吃鸡蛋时是究竟从大头(Big-Endian)敲开还是从小头(Little-Endian)敲开,由此曾发生过六次叛乱,一个皇帝送了命,另一个丢了王位。

我们一般将endian翻译成“字节序”,将big endian和little endian称作“大尾”和“小尾”。

1、字符编码、内码,顺带介绍汉字编码

字符必须编码后才能被计算机处理。计算机使用的缺省编码方式就是计算机的内码。早期的计算机使用7位的ASCII编码,为了处理汉字,程序员设计了用于简体中文的GB2312和用于繁体中文的big5。

GB2312(1980年)一共收录了7445个字符,包括6763个汉字和682个其它符号。汉字区的内码范围高字节从B0-F7,低字节从A1-FE,占用的码位是72*94=6768。其中有5个空位是D7FA-D7FE。

GB2312支持的汉字太少。1995年的汉字扩展规范GBK1.0收录了21886个符号,它分为汉字区和图形符号区。汉字区包括21003个字符。

从ASCII、GB2312到GBK,这些编码方法是向下兼容的,即同一个字符在这些方案中总是有相同的编码,后面的标准支持更多的字符。在这些编码中,英文和中文可以统一地处理。区分中文编码的方法是高字节的最高位不为0。按照程序员的称呼,GB2312、GBK都属于双字节字符集 (DBCS)。

2000年的GB18030是取代GBK1.0的正式国家标准。该标准收录了27484个汉字,同时还收录了藏文、蒙文、维吾尔文等主要的少数民族文字。从汉字字汇上说,GB18030在GB13000.1的20902个汉字的基础上增加了CJK扩展A的6582个汉字(Unicode码0x3400-0x4db5),一共收录了27484个汉字。

CJK就是中日韩的意思。Unicode为了节省码位,将中日韩三国语言中的文字统一编码。GB13000.1就是ISO/IEC 10646-1的中文版,相当于Unicode 1.1。

GB18030的编码采用单字节、双字节和4字节方案。其中单字节、双字节和GBK是完全兼容的。4字节编码的码位就是收录了CJK扩展A的6582个汉字。 例如:UCS的0x3400在GB18030中的编码应该是8139EF30,UCS的0x3401在GB18030中的编码应该是8139EF31。

微软提供了GB18030的升级包,但这个升级包只是提供了一套支持CJK扩展A的6582个汉字的新字体:新宋体-18030,并不改变内码。Windows 的内码仍然是GBK。

这里还有一些细节:

  • GB2312的原文还是区位码,从区位码到内码,需要在高字节和低字节上分别加上A0。

  • 对于任何字符编码,编码单元的顺序是由编码方案指定的,与endian无关。例如GBK的编码单元是字节,用两个字节表示一个汉字。 这两个字节的顺序是固定的,不受CPU字节序的影响。UTF-16的编码单元是word(双字节),word之间的顺序是编码方案指定的,word内部的字节排列才会受到endian的影响。后面还会介绍UTF-16。

  • GB2312的两个字节的最高位都是1。但符合这个条件的码位只有128*128=16384个。所以GBK和GB18030的低字节最高位都可能不是1。

 

    许多朋友将音乐文件改编成 Flash 动画,满足了自己自由发挥和想象创造的成就感。但是 Flash 文件需要 Flash 专用播放器来播放,那么在网页上如何实现 Flash 媒体文件的播放呢?当然可以象 WMP 及 Real 一样引用 Flash 播放器控件代码来加以实现,但是一个网页在引用了 WMP 和Real 播放器控件的情况下,又再引用 Flash 播放器控件,那将是非常的占用系统资源和影响电脑运行速度的,甚至造成死机。为此,谱乐探索出了一种 WMP 在网页上实现播放 Flash 媒体文件的重要方法。请点播放键观看效果。

    在视频区域单击鼠标右键,你就会发现媒体文件为 Flash 格式(下同)。

    实现方法谱乐将在谱乐专栏以后的专题中具体讲解,请大家密切关注,多多支持。

    大家知道,Flash 也是网页的一种表现形式,许多 Flash 高手甚至干脆就用 Flash 来表现整个网站。谱乐这里想说的是,Flash 也可表现为播放器形式,用来播放 MP3 音频文件和 Flv、Swf 视频文件。这类播放器也是网页播放器的一种。

    Flv 视频播放器

    媒体文件格式为 Flv 格式。

    MP3 音频播放器

我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+ CSS的方法需要一个过程,使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进,分阶段来逐步达到完全符合网站标准的目标。如果你是新手,或者对代码不是很熟悉,也可以采用遵循标准的编辑工具,例如Dreamweaver MX 2004,它是目前支持CSS标准最完善的工具。
1.初级改善
为页面添加正确的DOCTYPE
很多设计师和开发者都不知道什么是DOCTYPE,DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以,如果你不注意设置了错误的DOCTYPE,结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择:

(1)过渡型(Transitional )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2)严格型(Strict )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)框架型(Frameset )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
对于我们初级改善来说,只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等,不至于让你觉得变化太大,难以掌握。

Tip:你懒得输入上面过渡型代码的话,可以访问http://www.macromedia.com/网站的首页,然后查看源代码,把head区同样的代码拷贝粘贴就可以了。

设定一个名字空间(Namespace)
直接在DOCTYPE声明后面添加如下代码:

<html XMLns="http://www.w3.org/1999/xhtml" >
一个namespace是收集元素类型和属性名字的一个详细的DTD,namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

声明你的编码语言
为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言。代码如下:

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
这里声明的编码语言是简体中文GB2312,你如果需要制作繁体内容,可以定义为BIG5。

用小写字母书写所有的标签
XML对大小写是敏感的,所以,XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的:

<TITLE>公司简介</TITLE>
正确的写法是:

<title>公司简介</title> 同样的,<P>改成<p>,<B>改成<b>等等。这步转换很简单。
为图片添加 alt 属性
为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性,代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性,象下面这样的写法毫无意义:

<img src="http:///htmldata/2005-05-25/logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
正确的写法:

<img src="http:///htmldata/2005-05-25/logo_unc_120x30.gif" alt="UNC公司标志,点击返回首页">
给所有属性值加引号
在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。

例:height="100",而不能是height=100。

关闭所有的标签
在XHTML中,每一个打开的标签都必须关闭。就象这样:

<p>每一个打开的标签都必须关闭。</p> <b>HTML可以接受不关闭的标,XHTML就不可以。

  已有的网站是GB2312编码?看到UTF-8编码的优点有点心动?本文就是教你如何把网站从GB2312转为UTF-8。

  GB2312是简体中文的编码,所以当文章/网页中包含繁体中文、日文、韩文时,这些内容可能无法被正确编码。

  有一种比GB2312编码略广的编码,就是GBK,它包含了对繁体中文的编码,但对他国非拉丁字母语言还是有问题。

  UTF-8编码是一种目前广泛应用于网页的编码,它其实是一种Unicode编码,即致力于把全球所有语言纳入一个统一的编码。目前UTF-8已经把几种重要的亚洲语言纳入,包括简繁中文和日韩文字。采用UTF-8编码的网页某种意义上说就是“与国际接轨”了。此外,很多手机终端都使用UTF-8编码,如果网站考虑开发WAP界面而网站数据本身又是UTF-8编码,就省却了开发WAP界面时的转码问题。

  已有的网站是GB2312编码?看到UTF-8编码有点心动?本文就是教你如何把网站从GB2312转为UTF-8。

  在转换前,必须考虑网站是否有必要转码。我提供几点供参考:
  1、网站面向的对象,是局限一小圈子的人,还是中国大陆,还是包括港澳台在内的整个中国甚至全世界。

  2、在GB2312编码中一个汉字占2个字节,而在UTF-8中,一个汉字要占3个字节,这种空间增加的代价是否值得。

  3、在旧有的数据库系统上(例如MySQL 4.0及以前的版本)可能没有内置对UTF-8的支持,虽然本文有办法解决,但不排除还潜在一些小问题。

  4、网页文件转为UTF-8编码后是否方便编辑。我目前用ZDE4,设置好后对UTF-8编码支持非常好。设置方法是在菜单Tools->Preferences中,点Editing标签,把Encoding改为UTF-8即可。

考虑好决定转码以后,就可以开始了。本文仅以php 4.0~5.0 + MySQL 3.23~4.0为例。

  首先对准备转码的数据库,为其建立一个新的数据库及相应表结构用于存储转码结果。如果在没有内置支持UTF-8的数据库系统操作,则建议把用于存储中文的CHAR、VARCHAR、TEXT字段分别改为BINARY、VARBINARY、BLOB,虽然我试验过不改也没有问题。

  接着在操作系统命令行下执行如下命令导出原有的数据库(其中{dbname}用数据库名替换,{path1}用一个已存在的临时路径替换,导出的数据将会存放于此):
mysqldump --opt --comments=0 -n -t --fields-terminated-by=, --fields-escaped-by= {dbname} -uroot -p --tab={path1}

  上述命令中的用户root也可换为其它用户,但须保证有dump的权限。用转码工具,例如ConvertZ,把上面{path1}中的全部文件转为UTF-8编码。注意要关闭BOM选项。假设转码后的文件保存在路径{path2}。

  用有LOAD DATA权限的用户连接MySQL服务器,用use命令选择刚才新建的数据库,然后对每个表{table_name}执行如下命令:
LOAD DATA INFILE '{path2}{table_name}.txt' INTO TABLE {table_name} FIELDS TERMINATED BY ',' ESCAPED BY '';

  提示:表比较多的时候可以写个小程序生成一个SQL脚本。

  执行上述命令时可能会出现警告(Warnings),请留意Warning的这些行(Row),可能有些数据并没有转换成功,例如字段错位。

  根据经验,此种情况多数是由数据结尾的字节的16进制码大于7F所致。通常这些行数量是比较少的,可以手工修正这些行。

  至此数据库的转码就完成了。清理原数据库和转码过程的临时文件这里就不详述了。

  对网页转码:同样用转码工具把网站所有网页转为UTF-8编码。

  然后打开包含头部的网页文件/网页模版文件,把这样的行:

  替换为这样:

  据我的经验,如果网页采用css样式表控制网页样式,如果在css的body标签中设置了字体,那么在原来的gb2312编码下,该字体设置可以继承到intput和textarea中,但转为utf-8后,需要在input和textarea标签中重新设置字体。



SyntaxHighlighter.highlight();
[!--infotagslink--]

相关文章

  • 如何使用JavaScript实现无缝滚动自动播放轮播图效果

    这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • 浅析c# 线程同步

    这篇文章主要介绍了c# 线程同步的相关资料,帮助大家更好的理解和学习c#,感兴趣的朋友可以了解下...2020-08-29
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • MYSQL主从不同步延迟原理分析及解决方案

    1. MySQL数据库主从同步延迟原理。要说延时原理,得从mysql的数据库主从复制原理说起,mysql的主从复制都是单线程的操作,主库对所有DDL和DML产生binlog,binlog是顺序写,所以效率很高,slave的Slave_IO_Running线程到主库取日...2013-10-04
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • vue+video.js实现视频播放列表

    这篇文章主要为大家详细介绍了vue+video.js实现视频播放列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-29
  • 详解Howler.js Web音频播放终极解决方案

    这篇文章主要介绍了详解Howler.js Web音频播放终极解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-24
  • vue项目中播放rtmp视频文件流的方法

    这篇文章主要介绍了vue项目中播放rtmp视频文件流 ,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-17
  • C#同步网络时间的方法实例详解

    这篇文章主要介绍了C#同步网络时间的方法,以实例形式较为详细的分析了C#获取网络时间与同步本机系统时间的相关技巧,非常具有实用价值,需要的朋友可以参考下...2020-06-25
  • 检测mysql同步状态实现代码(php/linux)

    本文章介绍两个实例来介绍mysql同步状态检测实现程序有需要的朋友可参考一下。 代码如下 复制代码 #!/bin/sh #check MySQL_Slave St...2016-11-25
  • VSCode 云同步扩展设置Settings Sync插件

    这篇文章主要介绍了VSCode 云同步扩展设置Settings Sync插件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-29
  • Vue+node实现音频录制播放功能

    这篇文章主要介绍了Vue+node实现音频录制播放,功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-25
  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • MySQL 5.5主从同步设置笔记分享

    先修改Master(10.1.123.197)的 my.cnf 配置在 [mysqld] 中新增以下内容:复制代码 代码如下:log-bin=mysql-binlog-bin-index=mysql-bin.indexserver-id = 1sync_binlog=1binlog_format=mixed然后指定要做同步的数据库,并...2014-05-31
  • C#多线程及同步示例简析

    这篇文章主要为大家详细介绍了C#多线程及同步示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • Go语言通过http抓取网页的方法

    这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05
  • vue如何在用户要关闭当前网页时弹出提示的实现

    这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
  • C#实现多线程的同步方法实例分析

    这篇文章主要介绍了C#实现多线程的同步方法,实例分析了C#线程同步的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25