一种基于HTML5的新型微课制作系统及方法

摘要

本发明公开了一种基于HTML5的新型微课制作系统及方法，所述系统包括：预设动画模块、预设动画入场时间模块、发布模块和播放模块，所述预设动画模块将图文内容转化成具有动画渲染效果的动画组件，所述预设动画入场时间模块将语音转写成文字，并以转写文字中的具体文字为媒介，将具体文字在语音中的时间节点与动画组件进行匹配绑定，所述发布模块将将语音信息以及与语音信息相匹配的动画组件合成为微课文件，所述播放模块对微课文件进行解码，进行语音播放的同时，根据语音播放时间将对应时间节点的文字匹配绑定的动画组件进行同步播放。本发明解决了现有微课制作技术门槛高、操作复杂的问题。

说明书

技术领域

本发明涉及微课制作领域，具体涉及一种基于HTML5的新型微课制作系统及方法。

背景技术

近几年在线教育兴起，诞生了许许多多可以用来录制微课的视频制作工具，虽然使用这些工具已经做到很便捷了，但是没有技术基础的个人还是很难操作，耗时耗力，制作的微课质量参差不齐，导致个人制作微课参与度不高。目前市面上的视频制作工具，对于一般用户并不友好。一是对于计算机性能的要求很高；二是这些工具都是基于时间轴来控制素材的播放，每个素材都要占用一条时间轨道，素材过多就会令人眼花缭乱，同时使用的素材越多，对于计算机性能和内存消耗就越高；三是音频轨道并不直观，用户需要播放音频才能找到目标的时间点位。四、因为对计算机的性能和内存消耗太高，既容易引发计算机崩溃，又无法做到实时存储。以上所述使得视频制作工具虽然是目前微课制作的主流，但是无法向一般用户普及，往往需要专业团队配合专业教师才能制作出质量令人满意的微课。此外，视频格式文件的体积大，在网络传播的时候对于网络带宽的要求更高，相应的流量费用也高。存储、带宽、流量三项费用容易令人忽略，但这确确实实使得很多优秀的微课难以向更偏远的地区普及，限制了国家通过在线教育来加快教育城乡一体化建设。

随着HTML5技术的成熟，市场上也出现了基于HTML5来制作视频微课或HTML5微课的工具。HTML5微课制作工具确实一定程度上解决了“视频制作对于计算机性能的要求很高”、“无法实时存储”“视频格式文件体积大”等问题，但是HTML5微课制作工具也牺牲了许多制作上的自由度。目前的HTML5微课制作工具大都只是从文件格式上解决了部分问题，在具体制作方面依旧继承着视频制作的方法模式，基本没有跳出来自传统视频制作模式的思维局限，因此制作出来的东西要么不如视频制作的效果好，要么就跟PPT没啥两样，完全体现不出HTML5应有的技术优势，同样无法向一般用户普及，也正是因为如此，目前整个在线教育市场依旧是以视频微课作为主流，HTML5微课处在边缘末流。

发明内容

为此，本发明提供一种基于HTML5的新型微课制作系统及方法，以解决现有微课制作技术门槛高、操作复杂的问题。

为了实现上述目的，本发明提供如下技术方案：

本发明第一方面，公开了一种基于HTML5的新型微课制作系统，所述系统包括：预设动画模块、预设动画入场时间模块、发布模块和播放模块，所述预设动画模块将图文内容转化成具有动画渲染效果的动画组件，所述预设动画入场时间模块将语音转写成文字，并以转写文字中的具体文字为媒介，将具体文字在语音中的时间节点与动画组件进行匹配绑定，所述发布模块将将语音信息以及与语音信息相匹配的动画组件合成为微课文件，所述播放模块对微课文件进行解码，进行语音播放的同时，根据语音播放时间将对应时间节点的文字匹配绑定的动画组件进行同步播放。

进一步地，所述动画预设模块包括：预设动画工具和图文编辑器，用户在图文编辑器中输入图文数据，选中将要编辑的图文内容，通过预设动画工具弹出动画效果选择列表，用户选择一种动画效果，系统将选中的动画效果渲染添加至选中的图文内容，生成动画组件，每个动画组件生成一个唯一的ID。

进一步地，所述预设动画入场时间模块获取用户输入的语音，获取语音后通过语音转文字工具将语音转写为文字，为每个字符添加监听器，当具体字符被选中时触发监听器，将对应的字符标记为启动组件，所述启动组件中记录字符在语音中对应的具体时间点，选中某个具体的字符后，弹出预设动画模块产生的所有动画组件，检测到用户选择一个动画组件后，将选定的动画组件的ID与启动组件进行绑定。

进一步地，所述发布模块包括：动画组件导出单元、语音导出单元、启动组件导出单元，所述动画组件导出单元获取并导出预设动画模块中产生的动画组件数据；所述语音导出单元获取并导出预设动画入场时间模块中用户输入的语音数据；所述启动组件导出单元获取并导出预设动画入场时间模块中产生的启动组件数据；动画组件数据、语音数据和启动组件数据合并成一个微课文件。

进一步地，所述播放模块包括：语音播放单元、动画渲染单元和播放控制单元；

所述播放控制单元先建立长页面，进行动画的预播放准备；

所述语音播放单元进行语音数据的播放，同时生成语音播放计时器记录语音播放时间；

所述动画渲染单元根据语音播放计时器记录的播放时间，当语音播放至相应字符对应的时间节点时，触发启动组件，将启动组件绑定的动画组件渲染至长页面。

进一步地，所述语音播放计时器实时记录语音播放时间，启动组件数据中每个启动组件都记录一个具体的时间点位，当时间点位与语音播放计时器中的时间点相吻合，则对应的启动组件被触发。

进一步地，所述动画渲染单元在启动组件被触发后，获取与该启动组件绑定的动画组件ID，通过ID在动画组件数据找到相应的动画组件，将该动画组件渲染至播放页面上，所述播放控制单元实时监控该页面可视区域中的内容占比，当可视区域中已显示的内容占比达到系统的预设比例时，自动控制页面向下滚动，以提供更多的空白区域显示新的内容。当检测到用户点击正在播放的播放页面时，会暂停播放，此时用户可以上下滚动播放页面回顾已经播放的内容。

本发明的第二方面，公开了一种基于HTML5的新型微课制作方法，所述方法为：

用户先在图文编辑器中输入图文内容，输入完成后在图文编辑器中选中目标图文内容，然后点击预设动画工具，弹出动画效果选择列表，进行动画效果选择；

用户输入语音，系统将语音转写成文字推送给用户，用户在语音转写的文字中选择具体的文字，选中后弹出动画组件选择列表，在列表中选择与该文字相匹配的动画组件，系统基于语音和转写的文字计算获得被用户选中的文字对应在语音中的具体时间位置，并在该时间位置绑定与该文字相匹配的动画组件，当语音播放到与该文字对应的具体时间位置时，同步播放与该文字相匹配的动画组件，从而实现语音与动画同步播放的效果。

进一步地，所述动画组件由动画内容和动画效果构成，用户完成动画效果选择后，使用用户选择的动画效果将被用户选中的图文内容渲染成动画组件，图文内容包括图片、图形、文字，所述动画效果包括图文内容的位置、角度、形状、大小、颜色随时间流动而改变所实现的动态视觉效果。

本发明具有如下优点：

本发明公开了一种基于HTML5的新型微课制作系统及方法，能自动选择播放动画样式，将语音转换成文字后，将文字与动画组件进行绑定，在语音播放过程，根据启动组件的定位时间点，自动播放绑定的动画组件，实现动画播放和声音播放的同步。降低操作门槛，更易上手操作，使输出的微课质量和效果更加标准统一。

附图说明

为了更清楚地说明本发明的实施方式或现有技术中的技术方案，下面将对实施方式或现有技术描述中所需要使用的附图作简单地介绍。显而易见地，下面描述中的附图仅仅是示例性的，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图引申获得其它的实施附图。

本说明书所绘示的结构、比例、大小等，均仅用以配合说明书所揭示的内容，以供熟悉此技术的人士了解与阅读，并非用以限定本发明可实施的限定条件，故不具技术上的实质意义，任何结构的修饰、比例关系的改变或大小的调整，在不影响本发明所能产生的功效及所能达成的目的下，均应仍落在本发明所揭示的技术内容得能涵盖的范围内。

图1为本发明实施例提供的一种基于HTML5的新型微课制作系统的流程图

图2为本发明实施例提供的一种基于HTML5的新型微课制作系统的动画预设模块工作示意图；

图3为本发明实施例提供的一种基于HTML5的新型微课制作系统语音匹配模块工作示意图；

图4为本发明实施例提供的一种基于HTML5的新型微课制作系统发布模块工作示意图；

图5为本发明实施例提供的一种基于HTML5的新型微课制作系统播放模块工作示意图。

具体实施方式

以下由特定的具体实施例说明本发明的实施方式，熟悉此技术的人士可由本说明书所揭露的内容轻易地了解本发明的其他优点及功效，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例1

本实施公开一种基于HTML5的新型微课制作系统，所述系统包括：预设动画模块、预设动画入场时间模块、发布模块和播放模块，所述预设动画模块将图文内容转化成具有动画渲染效果的动画组件，所述预设动画入场时间模块将语音转写成文字，并以转写文字中的具体文字为媒介，将具体文字在语音中的时间节点与动画组件进行匹配绑定，所述发布模块将将语音信息以及与语音信息相匹配的动画组件合成为微课文件，所述播放模块对微课文件进行解码，进行语音播放的同时，根据语音播放时间将对应时间节点的文字匹配绑定的动画组件进行同步播放。

动画预设模块包括：预设动画工具和图文编辑器，用户在图文编辑器中输入图文数据，选中将要编辑的图文内容，通过预设动画工具弹出动画效果选择列表，动画效果选择列表中具有多种动画效果，用户选择一种动画效果，系统将选中的动画效果渲染添加至选中的图文内容，生成动画组件，每个动画组件生成一个唯一的ID。同时为每一个动画组件生成标识码并将其显示在动画组件对应的图文内容上。动画组件ID使得系统可以在其他模块或组件中通过所述动画组件ID获取到相应的动画组件。标识码使得用户可以通过点击标识码对相应的动画组件进行修改，当用户点击图文内容上的标识码的时会再次弹出动画效果列表，用户可以重新选择该动画组件的动画效果。当用户删除标识码时，对应的动画组件也会被清除，而相应的图文内容不会被删除。

预设动画入场时间模块获取用户输入的语音，获取语音后通过语音转文字工具将语音转写为文字，为每个字符添加监听器，当具体字符被选中时触发监听器，对应的字符标记为启动组件，所述启动组件中记录字符在语音中对应的具体时间点，选中某个具体的字符后，弹出预设动画模块产生的所有动画组件，检测到用户选择一个动画组件后，将选定的动画组件的ID与启动组件进行绑定。用户可以反复执行预设动画入场时间阶段的操作生成启动组件，系统会在每一个启动组件对应的具体文字上生成并显示标识码，该标识码的码值与该文字匹配绑定的动画组件的码值相同，使得用户可以通过标识码的码值了解与相应文字匹配绑定的动画组件。

发布模块包括：动画组件导出单元、语音导出单元、启动组件导出单元，所述动画组件导出单元获取并导出预设动画模块中产生的动画组件数据；所述语音导出单元获取并导出预设动画入场时间模块中用户输入的语音数据；所述启动组件导出单元获取并导出预设动画入场时间模块中产生的启动组件数据；动画组件数据、语音数据和启动组件数据合并成一个微课文件。

播放模块包括：语音播放单元、动画渲染单元和播放控制单元；

所述播放控制单元先建立长页面，进行动画的预播放准备；

所述语音播放单元进行语音数据的播放，同时生成语音播放计时器记录语音播放时间；

所述动画渲染单元根据语音播放计时器记录的播放时间，当语音播放至相应字符对应的时间节点时，触发启动组件，将启动组件绑定的动画组件渲染至长页面。

语音播放计时器实时记录语音播放时间，启动组件数据中每个启动组件都记录一个具体的时间点位，当时间点位与语音播放计时器中的时间点相吻合，则对应的启动组件被触发。动画渲染单元在启动组件被触发后，获取与该启动组件绑定的动画组件ID，通过ID在动画组件数据找到相应的动画组件，将该动画组件渲染至播放页面上，所述播放控制单元实时监控该页面可视区域中的内容占比，当可视区域中已显示的内容占比达到系统的预设比例时，自动控制页面向下滚动，以提供更多的空白区域显示新的内容。当检测到用户点击正在播放的播放页面时，会暂停播放，此时用户可以上下滚动播放页面回顾已经播放的内容。

本实施例公开的一种基于HTML5的新型微课制作系统，能自动选择播放动画样式，将语音转换成文字后，将语音信息与图文编辑器进行绑定，在语音播放过程，根据启动组件的定位时间点，自动播放对应的图文编辑器，实现动画播放和声音播放的同步。降低操作门槛，提升自由度，使输出的微课质量和效果更加标准统一。

实施例2

本实施例公开了一种基于HTML5的新型微课制作方法，在实际操作过程中，用户先在图文编辑器中输入图文内容，输入完成后在图文编辑器中选中目标图文内容，然后点击预设动画工具，点击完会弹出一个动画效果选择列表，用户在动画效果选择列表中选择一个动画样式并点击，确认动画效果，点击完动画效果选择列表会自动关闭，系统会获取用户选择的动画效果，采用该动画效果将上述被用户选中的图文内容渲染成动画组件。

预设动画入场时间模块，通过用户点击语音编辑按钮后弹出语音编辑页面，在语音编辑页面中，用户按住语音输入工具时向系统输入的语音信息，系统获取用户输入的语音信息后将语音转写成文字并为每个文字绑定监听器，然后一同推送到输出显示区域中，在输出显示区域中，转写的文字中每一个字都是可点击的按钮，鼠标经过时可以看到可文字点击的提示，比如鼠标经过的文字样式会发生变化，鼠标离开时恢复原状。

此时用户点击任意一个字符，就会触发字符上的监听器；字符被标记为启动组件，用户点击上述语音转写字符中的任意一个时，弹出动画组件列表，列表中展示预设动画阶段中产生的动画组件供用户选择，用户选择点击其中一个动画组件后，动画组件列表会自动关闭。启动组件中记录该文字对应在语音中的具体时间点以及用户选择的动画组件ID。用户可以反复执行预设动画入场时间阶段的操作生成启动组件，系统会在每一个启动组件对应的具体文字上生成并显示标识码，该标识码的码值与该文字匹配绑定的动画组件的码值相同，使得用户可以通过标识码的码值了解与相应文字匹配绑定的动画组件。

在发布阶段，系统将动画组件数据、语音数据和启动组件数据合并成一个微课文件；用户点击发布按钮后，系统会根据用户的设置生成微课文件。

播放时，用户打开微课文件，进入播放；微课开始播放，用户会听到自己录入的语音；语音播放过程中，当被用户标记为启动组件的文字被提及的同时，相应的与该启动组件绑定的动画组件就会被播放出来；播放是在一个长页面中进行的，当长页面中的空白区间被出现的内容占据一定比例时，页面会向下滚动，显示出更多的空白区间供新的内容显示；用户随时可以点击页面暂停播放，并向上滚动回顾已经播放的内容。

实施例3

本实施例公开了另外一种基于HTML5的新型微课制作方法，预设动画阶段中，动画组件以动画标签块的形式存储在页面的图文数据中，所述动画标签是系统基于HTML超文本标记语言定义的特殊标签，在用户视角只会看到页面中图文数据，不会看到具体的标签。

相应地，在发布阶段，系统将图文数据全部导出后将其与语音数据和启动组件数据合成微课文件。

相应地，在播放阶段，动画渲染单元会预先将图文数据全部渲染到播放页面中，并将所有图文内容设置成隐藏状态。当相应的启动组件被触发时，通过启动组件中记录的ID在播放页面隐藏的图文数据中找到相应的动画标签块，将动画标签块的属性设置为显示状态，同时根据动画标签块属性中记录的动画效果信息，采用该动画效果对动画标签块中的图文内容进行动画渲染，实现动画播放的效果。

虽然，上文中已经用一般性说明及具体实施例对本发明作了详尽的描述，但在本发明基础上，可以对之作一些修改或改进，这对本领域技术人员而言是显而易见的。因此，在不偏离本发明精神的基础上所做的这些修改或改进，均属于本发明要求保护的范围。