CN102436838A - 计算机实施的歌词显示方法及装置 - Google Patents

Abstract

本发明提供一种计算机实施的歌词显示方法及装置，其中方法包括：获取歌词中每行歌词的起始时间，并且获取每个字符单元的时间值、实际显示大小以及位置；对于每行歌词，根据每行歌词的起始时间和每个字符单元的时间值、实际显示大小以及位置，在歌词显示区域中显示背景歌词，同时分别创建与当前播放行歌词的每个字符单元的字符形状、实际显示大小、位置和时间值相匹配的进度条，并且依次在歌词显示区域显示与各个字符单元相匹配的进度条。本发明提供的方法和装置，能够实现准确的歌词逐字显示。

Description

计算机实施的歌词显示方法及装置

技术领域

本发明涉及显示技术，尤其涉及一种计算机实施的歌词显示方法及装置。

背景技术

目前，很多音乐播放器播放歌曲时，采用逐行显示歌词的方式，例如，当歌曲播放到某一行歌词时，将该行歌词整体高亮显示，这样用户就可以跟唱当前行的歌词。

对于这种歌词显示方式，由于是整行歌词高亮显示，用户需要在熟悉整行歌词的节奏的情况下才能很好地跟唱完一行歌词。如果用户对于一行歌词中的某一些字或单词的节奏不熟悉，则无法很好地跟唱。

可见，提供一种能够逐字显示歌词的歌词显示方法是现有技术中亟待解决的问题。

发明内容

本发明针对现有技术存在的问题，提供一种计算机实施的歌词显示方法及装置，能够实现歌词的逐字显示。

本发明提供了一种计算机实施的歌词显示方法，包括：

获取歌词中每行歌词的起始时间，并且获取每个字符单元的时间值、实际显示大小以及位置；

对于每行歌词，根据每行歌词的起始时间和每个字符单元的时间值、实际显示大小以及位置，在歌词显示区域中显示背景歌词，同时分别创建与当前播放行歌词的每个字符单元的字符形状、实际显示大小、位置和时间值相匹配的进度条，并且依次在歌词显示区域显示与各个字符单元相匹配的进度条。

本发明还提供了一种歌词显示装置，包括：

获取模块，用于获取歌词中每行歌词的起始时间，并且获取每个字符单元的时间值、实际显示大小以及位置；

处理模块，用于对于每行歌词，根据每行歌词的起始时间和每个字符单元的时间值、实际显示大小以及位置，在歌词显示区域中显示背景歌词，同时分别创建与当前播放行歌词的每个字符单元的字符形状、实际显示大小、位置和时间值相匹配的进度条，并且依次在歌词显示区域显示与各个字符单元相匹配的进度条。

本发明提供的歌词显示方法及装置，分别设置了用于静态显示歌词的歌词显示区域和动态显示的进度条，在歌词显示区域显示一行或多行歌词的同时，依次在歌词显示区域显示与当前播放行的每个字符单元的字符形状、大小和位置相匹配的进度条。歌词显示区域的歌词的时间值、实际显示大小以及位置分别与进度条的显示时间、实际显示大小以及位置对应，这样，对于当前播放行歌词，进度条的填充动作体现了歌词中各个字符单元的动态播放效果，从而实现了准确的歌词逐字显示。

通过以下参照附图对优选实施例的说明，本发明的上述以及其它目的、特征和优点将更加明显。

附图说明

图1示意性示出本发明计算机实施的歌词显示方法实施例一的流程图；

图2示意性示出图1中步骤101中获取每个字符单元的位置的方法；

图3示意性示出本发明的一种显示效果；

图4示意性示出本发明的另一种显示效果；

图5示意性示出图1中步骤101的一种流程；

图6示意性示出了本发明实施例中确定每个字符单元位置的示意图；

图7-图9示意性示出本发明实施例中对各字符单元的横坐标和纵坐标进行调整之后各字符单元的位置示意图；

图10示意性示出本发明实施例中虚拟区域和歌词显示区域的位置示意图；

图11示意性示出本发明计算机实施的歌词显示方法实施例二的流程图；

图12和图13示出了本发明实施例中歌词逐字显示的效果示意图；

图14示意性示出本发明实施例中进度条自动消失的实现流程图；

图15示意性示出本发明歌词显示装置实施例的结构示意图。

具体实施方式

图1示意性示出本发明计算机实施的歌词显示方法实施例一的流程图，包括：

步骤101、获取歌词中每行歌词的起始时间，并且获取每个字符单元的时间值、实际显示大小以及位置。在步骤101中也可以获取歌词的结束时间。

本发明实施例中，字符单元可以是一个中文字、一个英文单词或者一个标点符号。

歌词显示区域是指用于显示歌词的一个背景区域。可以在步骤101中首先获取每个字符单元的位置，可以包括横坐标和纵坐标，然后在步骤102中就可以根据这些位置来显示各字符单元。

步骤102、对于每行歌词，根据每行歌词的起始时间和每个字符单元的时间值、实际显示大小以及位置，在歌词显示区域中显示背景歌词，同时分别创建与当前播放行的每个字符单元的字符形状、大小、位置和时间值相匹配的进度条，依次在歌词显示区域显示与各个字符单元相匹配的进度条。

在步骤102中，在歌词显示区域中显示一行或多行歌词(这些歌词可以称作是背景歌词)，同时创建进度条，该进度条是具有字符形状的进度条，每个进度条的字符形状、大小、显示时间和位置分别与每个字符单元的字符形状、实际显示大小、时间值和位置对应，从而，当依次显示进度条时，就形成了歌词逐字显示的效果。对于多行歌词的情况，在歌词显示区域中的背景歌词可以滚动显示。

由于进度条本身就是能够执行从左到右动态填充动作的控件，因而，具有字符形状的进度条执行填充动作时，就可以形成逐字显示的效果，并且进度条的填充速度与字符单元的播放速度相同，歌词显示的效果更加形象生动。

为了明显地体现当前正在播放的字符单元，优选地，歌词显示区域的背景歌词的字体颜色可以与进度条的字体颜色不同，更准确地讲，背景歌词的字体颜色可以与进度条的填充颜色不同。

在步骤102中，每个进度条可以设置等待时间和显示时间。第i行歌词的第j个字符单元对应的进度条的等待时间可以是第i行歌词的起始时间与第i行歌词中之前的j-1个字符单元的时间值之和的和，第i行歌词中每个字符单元对应的进度条的显示时间可以是对应的字符单元的时间值。

其中，第j个字符单元对应的进度条的等待时间可以用如下公式(1)来表示：

$\mathrm{Lasttime}=\mathrm{starttime}+\underset{i=1}{\overset{j-1}{\mathrm{\Σ}}}\mathrm{time}\left[i\right]---\left(1\right)$

其中，Lasttime是第i行歌词第j个字符单元对应的进度条的等待时间，starttime是第i行歌词的起始时间，

表示之前的j-1个字符单元的时间值之和。

在步骤102中，依次在歌词显示区域显示与各个字符单元相匹配的进度条可以包括：在歌词显示区域依次显示等待时间届满的与各个字符单元相匹配的进度条。

在本发明的实施例中，分别设置了用于静态显示歌词的歌词显示区域和动态显示的进度条，在歌词显示区域显示一行或多行歌词的同时，依次在歌词显示区域显示与当前播放行的每个字符单元的字符形状、大小和位置相匹配的进度条。歌词显示区域的歌词的时间值、实际显示大小以及位置分别与进度条的显示时间、实际显示大小以及位置对应，这样，对于当前播放行歌词，进度条的填充动作体现了歌词中各个字符单元的动态播放效果，从而实现了准确的歌词逐字显示效果。

歌词显示区域显示歌词(相当于静态显示)时用到的歌词的各字符单元的时间值、实际显示大小以及在歌词显示区域中的位置和进度条显示时(相当于动态显示)的显示时间、大小以及位置均是基于步骤101从同一数据源获取的，因而能够保证静态显示和动态显示时的字符单元的大小、形状、位置和时间是完全一致的。

下面结合具体的例子详细介绍本发明的实现过程。

在很多显示技术中需要用到歌词逐字显示。例如，在一个微动画场景中，当一个精灵唱歌时，可以逐字显示精灵所唱的歌词。在本发明的实施例中，主要以微动画中的歌词显示为例来介绍。动画是经由创作者的安排，使原本不具生命的东西像获得生命一般的活动。所以动画是让整幅图片都活动起来。而所谓微动画，区别于动画产品，是在动画中的某个局部位置进行动作的动画产品。

可以通过XML配置文件来获取歌词显示的一些预设信息。如下为XML配置文件的例子：

<labels>

    <label  type＝″LRC″  name＝″xiaosongshu″  position＝″{516，40}″color＝″{255，0，0，255}″  fontSize＝″30″  font＝″JQZhongYuanJT″alignment＝″center″  demension＝″{690，100}″  opacity＝″255″  tag＝″1000″zIndex＝″0″  content＝″karaoke     :＝CreateKaraokeObject；&#xD；&#xA；karaoke.rows    :＝2；&#xD；&#xA；karaoke.clear；&#xD；&#xA；&#xD；&#xA；karaoke.add(′00:00.390′，′00:06.078′，′小松鼠，尾巴大，轻轻跳上又跳下，′，′199，287，354，768，272，224，248，824，215，328，272，672，256，272，255，242′)；&#xD；&#xA；karaoke.add(′00:06.685′，′00:12.454′，′我帮你，你帮我，采到松果送回家。′，′216，240，239，649，303，232，257，895，361，288，297，799，288，264，225，216′)；&#xD；&#xA；&#xD；&#xA；″/>

</labels>

在上述的这段XML配置文件中，<label>标签的属性包括：type、position、color、fontSize、font、alignment、demension、opacity、tag、zIndex和content。这些属性分别定义了歌词显示区域的类型、位置、颜色、字体大小、字体、对齐方式、大小、透明度、标签、显示层次和歌词内容等。例如，歌词显示区域的宽度为690，高度为100。歌词的字体大小为30号字。在本发明的实施例中，以宽度和高度的单位是像素为例来介绍。

其中content的取值表示歌词的内容，歌词的内容采用卡拉OK歌词脚本的描述格式。

卡拉OK歌词脚本描述格式为：karaoke.add(′99:99.999′，′88:88.888′，′歌词′，′时值′，[′提示字′])。

其中，karaoke.add是卡拉OK歌词制作工具定义一行歌词开头标识。′99:99.999′是本行歌词起始时间。′88:88.888′是本行歌词结束时间。′歌词′是本行歌词的所有字符单元，英文如′[Its][my][life]′用方括号来定义一个单词整体占一个时间值，一个单词为一个字符单元。′时间值′是以毫秒为单位的显示一个字从左到右的时长。′提示字′是可选的。

例如，对于上述XML配置文件中的歌词来说，“小松鼠，尾巴大，轻轻跳上又跳下，”这句歌词的起始时间为00:00.390，结束时间为00:06.078，包括16个字符单元，每个字符单元的时间值分别为：199ms，287ms，354ms，768ms，272ms，224ms，248ms，824ms，215ms，328ms，272ms，672ms，256ms，272ms，255ms，242ms。

通过解析XML配置文件即可以获得与歌词显示相关的一些预设信息。可以采用现有技术中的各种解析方法来解析XML配置文件，本文不再赘述。

从XML配置文件中获取歌词显示的预设信息后，将每句歌词拆分为起始时间、结束时间、歌词内容和歌词中每个字符单元的时间值四部分，将拆分后的这四部分分别存储到数组中。例如，可以在找到karaoke.add的位置后，按照“′，”将歌词分为起始时间、结束时间、歌词内容和每个字符单元的时间值这四个部分。对于英文歌词，去掉其中的“[”和“]”，将“[”和“]”之间的字符串作为一个字符单元存储。对于中英文混排的歌词，可以将一个中文文字存储为一个字符单元，一个英文单词存储为一个字符单元。

在本发明的实施例中，还需要获取每个字符单元的实际显示大小，即每个字符单元在歌词显示区域中实际显示时的宽度和高度。因为，尽管在XML配置文件中定义了字体大小为30号字，但是，在实际显示时，并不能保证每个字符单元的宽度和高度一定是30号字的宽度和高度。例如，对于两个字符单元“I”和“T”来说，尽管都是30号字，但是实际显示时“I”的宽度要小于“T”的宽度。例如，可以采用cocos2d-x中的关于进度条的实现方式CCProgressTimer中的getContentSize方法来获取每个字符单元实际显示时的大小。

在步骤101中，获取歌词中的每个字符单元在歌词显示区域中的位置的方法如图2所示，可以包括：

步骤201、判断第i行歌词的各字符单元的宽度之和是否小于或等于歌词显示区域的宽度。如果是，执行步骤202；如果不是，执行步骤203。

步骤202、确定第i行歌词的每个字符单元的位置。步骤202后执行步骤204。

步骤203、将第i行歌词拆分成多个片段，拆分成的每个片段中各字符单元宽度之和均小于或等于歌词显示区域的宽度，并确定拆分成的各片段中每个字符单元的位置。步骤203后执行步骤204。

步骤204、根据预设对齐方式调整所确定的每行歌词的每个字符单元的位置，并将调整后的每个字符单元的位置保存到与位置相关的数组中。

通过上述步骤201-204即可以获取第i行歌词的每个字符单元的位置，对于其他行歌词也可以采用这样的方法来获取。

当第i行歌词中各字符单元的宽度之和小于或等于歌词显示区域的宽度时，说明歌词显示区域的宽度不足以容纳第i行歌词，在步骤203中，通过将第i行歌词拆分成多个片段，使得拆分成的每个片段中各字符单元宽度之和均小于或等于歌词显示区域的宽度，这样就可以实现歌词的分行显示。

例如，对于“小松鼠，尾巴大，轻轻跳上又跳下，”这行歌词来说，如果XML配置文件中配置的字体大小为30号字，并且每个字符单元的实际显示宽度均为30(单位是像素)，则该行歌词的歌词内容的总宽度为30*16＝480，而歌词显示区域11的宽度W为400(高度H为100)，歌词内容的总宽度大于歌词显示区域11的宽度400。这种情况下，需要将“小松鼠，尾巴大，轻轻跳上又跳下，”这行歌词拆分成至少两个片段，例如拆分成的第一片段可以包括13个字符单元，拆分成的第二片段包括3个字符单元，显示效果可以如图3所示。如果歌词显示区域11的宽度W为690，高度H为100，则无需进行拆分，歌词显示区域11的宽度足以容纳一行歌词，显示效果如图4所示。

图5示意性示出图1中步骤101的一种实现流程，包括：

步骤301、为歌词创建labelExt对象，读取数组中存储的歌词的行数，并初始化临时变量m，m＝0，m是歌词的行索引。具体地，歌词的行数就是karaoke.add的个数。以前述从XML配置文件中获取的歌词为例，歌词行数为2。

步骤302、判断m是否小于歌词的行数，如果是，执行步骤303；如果不是，执行步骤315。

步骤303、将当前行歌词的起始时间和结束时间存储到与起始时间和结束时间相关的数组中。

步骤304、遍历当前行歌词中所有时间值，以“，”分隔，将每个字符单元的时间值存储到与时间值相关的数组中。

步骤305、读取当前行歌词的时间值的个数，并初始化临时变量j＝0，j为字符单元索引。

步骤306、判断j是否小于当前行歌词的时间值的个数，如果是，执行步骤307；如果不是，执行步骤309。

步骤307、设置当前字符单元的显示字，并获取该字符单元的实际显示尺寸，可以包括该字符单元的实际宽度和实际高度。

例如，可以通过如下的一段代码来实现步骤307：

上述这段代码中，通过CCSize s2＝left->getContentSize()即可以获取歌词的实际显示大小。

步骤308、将j加1，即j++，然后执行步骤306。

步骤309、读取当前行歌词的时间值的个数，并初始化临时变量a＝0，a也是字符单元的索引。

步骤310、判断a是否小于歌词的时间值的个数。如果是，执行步骤311，如果不是，执行步骤302。

步骤311、判断当前字符单元的宽度与该行歌词中当前字符单元之前的字符单元的宽度之和的和是否小于歌词显示区域的宽度。如果是，确定不需要拆分当前行歌词，执行步骤312；如果不是，确定需要拆分当前行歌词，执行步骤313。

步骤312、依照如下公式(2)和(3)获取当前字符单元的横坐标：

$x_k=\underset{i=1}{\overset{k-1}{\mathrm{\&Sigma;}}}{w}_i+\frac{w_k}{2}---\left(2\right)$

公式(2)中，x_k为第k个字符单元的横坐标，

为第k个字符单元所在片段中第k个字符单元之前的k-1个字符单元的宽度之和，w_k表示第k个字符单元的宽度。

$y_k=-\frac{h_k}{2}-\underset{i=1}{\overset{n-1}{\mathrm{\&Sigma;}}}{h}_i---\left(3\right)$

公式(3)中，y_k为第k个字符单元的纵坐标，

为第k个字符单元所在的片段之前的各片段的高度之和，h_k表示第k个字符单元的高度，n为第k个字符单元所在的片段。

在步骤312中，由于不需要将当前行歌词进行拆分，因而在应用公式(2)和(3)确定字符单元的横坐标和纵坐标时，可以将当前行歌词认为只有一个片段。

步骤313、将当前字符单元之前的各字符单元确定为一个片段，将当前字符单元确定为另一片段中的首个字符单元，根据公式(2)确定当前字符单元的横坐标，根据公式(3)确定当前字符单元的纵坐标。步骤313之后执行步骤314。

步骤314、将a加1，即a++。步骤314之后执行步骤310。

图6示意性示出了本发明实施例中确定每个字符单元位置的示意图，本发明的实施例中以微动画场景中的歌词显示为例来介绍，区域10为微动画场景区域，虚拟区域14是宽度(W)和高度(H)与歌词显示区域完全相同的一个区域，虚拟区域14是用于虚拟歌词显示区域的一个区域，临时设置在区域10下方。图6中，以区域10的左下角为坐标原点(0，0)，例如对于某一行歌词，总共包括12个字符单元(字符单元用圆形示意)，每个字符单元的宽度均为w，高度均为h。

图6中示出的是当前行歌词的字符单元宽度大于歌词显示区域的宽度(即虚拟区域14的宽度)的情况。当前行歌词被分成两个片段，第一个片段包括8个字符单元，第二个片段包括4个字符单元。

对于第一个片段，各个字符单元的纵坐标相同，每一个字符单元的横坐标相对于前一个字符单元的横坐标右移了w。

对于第二个片段，各个字符单元的纵坐标相对于第一个片段中的各个字符单元均下移了h。

从图6中可以看出，经过上述步骤之后，确定出了各个字符单元相对于区域10左下角的横坐标和纵坐标，通过这种方式确定的各个字符单元在水平方向上是左对齐的，在垂直方向上是顶部对齐的。接下来还需要根据歌词显示区域的预设对齐方式对各个字符单元的横坐标和纵坐标进行调整。

步骤315、根据歌词显示区域的预设对齐方式调整各个字符单元的横坐标。

例如，如果歌词显示区域水平方向上的预设对齐方式是左对齐，则各个字符单元的横坐标保持不变。

如果歌词显示区域水平方向上的预设对齐方式是居中，则将第n个片段中字符单元的横坐标右移Δx_n/2，Δx_n为图6中第n个片段的最后一个字符单元与虚拟区域14的右边界之间的距离，如图7所示。

如果歌词显示区域水平方向上的预设对齐方式是右对齐，则将第n个片段中字符单元的横坐标右移Δx_n，如图8所示。

步骤316、根据歌词显示区域的预设对齐方式调整各个字符单元的纵坐标。

例如，如果歌词显示区域垂直方向上的预设对齐方式是顶部对齐，则各个字符单元的纵坐标保持不变。

如果歌词显示区域垂直方向上的预设对齐方式是居中对齐，则各个字符单元的纵坐标下移(H-h_t)/2，其中h_t为各片段的高度之和，如图9所示。

步骤317、根据歌词显示区域在微动画场景中的位置调整各字符单元的横坐标和纵坐标，经过调整的各字符单元的横坐标和纵坐标存储在与坐标相关的数组中。

经过了上述的步骤316之后，根据获取的各个横坐标和纵坐标，各字符单元可以依照预设方式在虚拟区域14中显示。但是，由于歌词显示区域在区域10中的位置与虚拟区域14的位置不同，因而还需要通过步骤317来调整各字符单元的坐标。

如图10所示，假设歌词显示区域11的中心点在区域10中的坐标是(X，Y)，则可以将经过步骤316之后的各个字符单元的横坐标右移(X-W/2)，将各个字符单元的纵坐标上移(Y-H/2)，W为歌词显示区域的宽度，H为歌词显示区域的高度。采用调整之后的横坐标和纵坐标就可以使得各字符单元准确地显示在歌词显示区域11中。

需要说明的是，在本发明的实施例中，以微动画场景中的歌词显示为例来介绍，为了使得整个微动画场景中各个坐标的原点统一，故而所有坐标均是以区域10的左下角为原点得来的，另外，为了使得字符单元能够依照预设显示方式在歌词显示区域11中显示，进行了多次的坐标调整。当然，本发明提供的歌词显示方式不限于微动画场景中，也可以以歌词显示区域11的左下角或中心点为坐标原点来计算各个字符单元的位置。根据实际显示的需要，可以对字符单元进行各种调整。总而言之，无论是以哪个点作为原点，无论采用哪种方式调整，均要求各个字符单元的位置能够使得各字符单元依照预设的显示方式在歌词显示区域11中显示。

图11示意性示出本发明歌词显示方法实施例二的流程图，包括：

步骤401、与本发明实施例一的步骤101相同，获取每行歌词的起始时间，并且获取歌词中每个字符单元的时间值、实际显示大小以及位置。具体流程可以参照图5所示的步骤301-317。

步骤402、读取数组中存储的歌词行数。将临时变量k初始化为0。

步骤403、判断k是否小于歌词行数。如果是，执行步骤404；如果不是，执行步骤406。

步骤404、在歌词显示区域中显示当前行歌词，同时分别创建与当前行歌词的每个字符单元的字符形状、大小、位置和时间值相匹配的进度条，依次在歌词显示区域显示与各个字符单元相匹配的进度条。各个进度条的等待时间如公式(1)所示，各个进度条的持续时间为对应的字符单元的时间值。

步骤405、k++，即，将k加1，步骤405后执行步骤403。

步骤406、结束。

图12和图13示出了本发明实施例中歌词逐字显示的效果示意图，当第一个字符单元“小”对应的进度条12的等待时间届满时，进度条12开始进行从左到右的填充动作，进度条中的填充颜色不同于歌词显示区域11中的字体颜色(图12所示)。同样地，当字符单元“松”对应的进度条13等待的时间届满时，进度条13开始进行从左到右的填充动作(图13所示)。

在图12和图13中，为了更清楚地示意歌词显示区域11和进度条的显示效果，将进度条从歌词显示区域11中分离出来。实际上，进度条应当位于歌词显示区域11中。

具有字符形状的进度条可以采用cocos2d-x中的CCProgressTimer来实现，歌词显示区域可以用cocos2d-x中的一个label来实现。具体的实现代码可以如下：

在上述代码中创建的进度条，具有text.c_str()，fontName.c_str()，fontSize这三个参数，分别表示进度条的字符形状、字体种类和字体大小，这三个变量可以赋值为相应的字符单元的字符形状、字体种类和字体大小。

进度条有两个动作to0和to1，to0表示等待动作，等待时间lastTime为之前的字符单元的总时间值与第i行歌词的起始时间之和，显示时间(即进度条从0％填充到100％所需的填充时间)currTime为该进度条对应的字符单元的时间值。在上述的代码中定义了进度条先执行等待动作，后执行显示动作。对于每个进度条而言，当其等待时间届满之后，即可以显示，显示完毕之后，进度条填充为100％。通过准确设置各个进度条的等待时间，使得各个进度条依序进行显示动作，就可以准确地实现逐字显示。

根据本发明的一个实施例，还可以包括：获取从歌词显示开始已经过的时间；当已经过的时间等于预设播放时间时，移除歌词显示区域以及各进度条。

通过上述步骤，可以在预设播放时间届满时自动撤销歌词显示，实现歌词配合音效的动态消失效果。

图14示意性示出本发明实施例中进度条自动消失的实现流程图，可以包括：

步骤501、判断是否存在需要播放的音效，即与歌词对应的音乐或声音效果等。如果存在，执行步骤502；如果不存在，执行步骤504。

步骤502、判断XML配置文件中是否存在需要显示的歌词，可以判断XML配置文件中是否存在类型为LRC的<label>标签。如果存在需要显示的歌词，则执行步骤503。如果不存在需要显示的歌词，则执行步骤504。

步骤503、进行歌词显示区域的歌词显示和与各个字符单元对应的进度条的显示，具体步骤可以如前述各个实施例所述。显示完毕后自动移除歌词显示区域和各进度条。

步骤504、结束。

在步骤503中，具体可以获取当前时间与歌词显示起始时间之间的差作为经过时间，当经过时间大于或等于预设的播放时间时，自动移除歌词显示区域和各进度条。

可以通过如下的代码实现：

上述代码中，m_startTime为歌词显示的起始时间，m_now为当前时间，timeInterval为预设播放时间。

本发明的各实施例中，介绍了采用cocos2d-x提供的方法构建歌词显示区域和进度条来实现歌词显示效果的一种实现方法。采用cocos2d-x提供的歌词显示方法可以在windows***中实现歌词显示效果，速度快，性能好。

图15示意性示出本发明歌词显示装置实施例的结构示意图，包括：获取模块21和处理模块22。其中，获取模块21用于获取歌词中每行歌词的起始时间，并且获取每个字符单元的时间值、实际显示大小以及位置。处理模块22用于对于每行歌词，根据获取模块21获取的每行歌词的起始时间和每个字符单元的时间值、实际显示大小以及位置，在歌词显示区域中显示背景歌词，同时分别创建与当前播放行歌词的每个字符单元的字符形状、实际显示大小、位置和时间值相匹配的进度条，并且依次在歌词显示区域显示与各个字符单元相匹配的进度条。

处理模块22具体用于在歌词显示区域依次显示等待时间届满的与各个字符单元相匹配的进度条；第i行歌词的第j个字符单元对应的进度条的等待时间为第i行歌词的起始时间与第i行歌词中之前j-1个字符单元的时间值之和的和，第i行歌词中每个字符单元对应的进度条的显示时间为对应的字符单元的时间值；其中，i和j均为大于或等于1的自然数。

其中，所述背景歌词的字体颜色与所述进度条的填充颜色不同。所述进度条的显示包括从左到右填充进度条。

本发明提供的歌词显示方法及其步骤可以由具有数据处理能力的一个或多个处理设备例如一个或多个计算机运行计算机可执行指令(该计算机可执行指令反映了本发明提出的歌词显示方法的思想)来实现。该处理设备可以包括存储前述计算机可执行指令的存储介质。

本发明的歌词显示装置可以是运行前述计算机可执行指令从而具有歌词显示功能的一个或多个处理设备。

虽然已参照典型实施例描述了本发明，但应当理解，所用的术语是说明和示例性、而非限制性的术语。由于本发明能够以多种形式具体实施而不脱离发明的精神或实质，所以应当理解，上述实施例不限于任何前述的细节，而应在随附权利要求所限定的精神和范围内广泛地解释，因此落入权利要求或其等效范围内的全部变化和改型都应为随附权利要求所涵盖。

Claims (10)

1.一种计算机实施的歌词显示方法，包括：

获取歌词中每行歌词的起始时间，并且获取每个字符单元的时间值、实际显示大小以及位置；

对于每行歌词，根据每行歌词的起始时间和每个字符单元的时间值、实际显示大小以及位置，在歌词显示区域中显示背景歌词，同时分别创建与当前播放行歌词的每个字符单元的字符形状、实际显示大小、位置和时间值相匹配的进度条，并且依次在歌词显示区域显示与各个字符单元相匹配的进度条。

2.根据权利要求1所述的方法，其中，依次在歌词显示区域显示与各个字符单元相匹配的进度条包括：在歌词显示区域依次显示等待时间届满的与各个字符单元相匹配的进度条；第i行歌词的第j个字符单元对应的进度条的等待时间为第i行歌词的起始时间与第i行歌词中之前j-1个字符单元的时间值之和的和，第i行歌词中每个字符单元对应的进度条的显示时间为对应的字符单元的时间值；

其中，i和j均为大于或等于1的自然数。

3.根据权利要求1或2所述的方法，其中，所述背景歌词的字体颜色与所述进度条的填充颜色不同。

4.根据权利要求1或2所述的方法，其中，所述进度条的显示包括从左到右填充进度条。

5.根据权利要求1或2所述的方法，其中，获取每个字符单元的位置的方法，包括：

判断第i行歌词各字符单元的宽度之和是否小于或等于歌词显示区域的宽度；

如果第i行歌词的各字符单元的宽度之和小于或等于歌词显示区域的宽度，则确定第i行歌词的每个字符单元的位置；如果第i行歌词各字符单元的宽度之和大于歌词显示区域的宽度，则将第i行歌词拆分成多个片段，拆分成的每个片段中各字符单元的宽度之和均小于或等于歌词显示区域的宽度，并确定拆分成的各片段中每个字符单元的位置；

根据预设对齐方式调整所确定的每行歌词的每个字符单元的位置，并将调整后的每个字符单元的位置保存到与位置相关的数组中。

6.根据权利要求1所述的方法，还包括：

获取从歌词显示开始已经过的时间；

当已经过的时间等于预设播放时间时，移除歌词显示区域以及各进度条。

7.一种歌词显示装置，包括：

获取模块，用于获取歌词中每行歌词的起始时间，并且获取每个字符单元的时间值、实际显示大小以及位置；

处理模块，用于对于每行歌词，根据每行歌词的起始时间和每个字符单元的时间值、实际显示大小以及位置，在歌词显示区域中显示背景歌词，同时分别创建与当前播放行歌词的每个字符单元的字符形状、实际显示大小、位置和时间值相匹配的进度条，并且依次在歌词显示区域显示与各个字符单元相匹配的进度条。

8.根据权利要求7所述的装置，其中，所述处理模块用于在歌词显示区域依次显示等待时间届满的与各个字符单元相匹配的进度条；第i行歌词的第j个字符单元对应的进度条的等待时间为第i行歌词的起始时间与第i行歌词中之前j-1个字符单元的时间值之和的和，第i行歌词中每个字符单元对应的进度条的显示时间为对应的字符单元的时间值；

其中，i和j均为大于或等于1的自然数。

9.根据权利要求7所述的装置，其中，所述背景歌词的字体颜色与所述进度条的填充颜色不同。

10.根据权利要求7所述的装置，其中，所述进度条的显示包括从左到右填充进度条。

Images