CN108616768B - 多媒体资源的同步播放方法、装置、存储位置及电子装置 - Google Patents

Abstract

本发明公开了一种多媒体资源的同步播放方法、装置、存储位置及电子装置。其中，该方法包括：播放目标多媒体资源中的第一资源，其中，目标多媒体资源包括第一资源和第二资源；获取第一资源的第一播放位置，其中，第一播放位置为第一资源的当前播放位置；确定第一播放位置在第二资源上对应的第二播放位置；播放第二资源中位于第二播放位置上的资源。本发明解决了多媒体资源在播放时同步效率较低的技术问题。

Description

多媒体资源的同步播放方法、装置、存储位置及电子装置

技术领域

本发明涉及计算机领域，具体而言，涉及一种多媒体资源的同步播放方法、装置、存储位置及电子装置。

背景技术

为了更好的吸引用户的关注度，页面推广、应用介绍、下载界面等等场景下会播放多媒体资源。目前的播放方案是动画和音频各自播放，对于该方案，音频和动画在一开始播放的时候，能出现同步效果，但继续播放，它们之间的偏差会越来越大，在较为低端的移动设备中这种现象会更为明显，非常影响用户的体验度。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种多媒体资源的同步播放方法、装置、存储位置及电子装置，以至少解决多媒体资源在播放时同步效率较低的技术问题。

根据本发明实施例的一个方面，提供了一种多媒体资源的同步播放方法，包括：播放目标多媒体资源中的第一资源，其中，所述目标多媒体资源包括第一资源和第二资源；获取所述第一资源的第一播放位置，其中，所述第一播放位置为所述第一资源的当前播放位置；确定所述第一播放位置在所述第二资源上对应的第二播放位置；播放所述第二资源中位于所述第二播放位置上的资源。

根据本发明实施例的另一方面，还提供了一种多媒体资源的同步播放装置，包括：第一播放模块，用于播放目标多媒体资源中的第一资源，其中，所述目标多媒体资源包括第一资源和第二资源；第一获取模块，用于获取所述第一资源的第一播放位置，其中，所述第一播放位置为所述第一资源的当前播放位置；第一确定模块，用于确定所述第一播放位置在所述第二资源上对应的第二播放位置；第二播放模块，用于播放所述第二资源中位于所述第二播放位置上的资源。

根据本发明实施例的另一方面，还提供了一种存储介质，其特征在于，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行上述任一项中所述的方法。

根据本发明实施例的另一方面，还提供了一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为通过所述计算机程序执行上述任一项中所述的方法。

在本发明实施例中，采用播放目标多媒体资源中的第一资源，其中，目标多媒体资源包括第一资源和第二资源；获取第一资源的第一播放位置，其中，第一播放位置为第一资源的当前播放位置；确定第一播放位置在第二资源上对应的第二播放位置；播放第二资源中位于第二播放位置上的资源的方式，播放多媒体资源中的第一资源，并获取第一资源的当前播放位置，根据第一资源的当前播放位置确定第二资源上与该位置对应的第二播放位置，播放第二资源中位于第二播放位置上的资源，从而由第一资源的播放控制第二资源与其同步，来确保第一资源和第二资源同步播放，从而实现了提高多媒体资源在播放时的同步效率的技术效果，进而解决了多媒体资源在播放时同步效率较低的技术问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的一种可选的多媒体资源的同步播放方法的示意图；

图2是根据本发明实施例的一种可选的多媒体资源的同步播放方法的应用环境示意图；

图3是根据本发明可选的实施方式的一种可选的多媒体资源的同步播放方法的示意图；

图4是根据本发明可选的实施方式的另一种可选的多媒体资源的同步播放方法的示意图；

图5是根据本发明可选的实施方式的另一种可选的多媒体资源的同步播放方法的示意图；

图6是根据本发明实施例的一种可选的多媒体资源的同步播放装置的示意图；

图7是根据本发明实施例的一种可选的多媒体资源的同步播放方法的应用场景示意图一；

图8是根据本发明实施例的一种可选的多媒体资源的同步播放方法的应用场景示意图二；

图9是根据本发明实施例的一种可选的多媒体资源的同步播放方法的应用场景示意图室内；以及

图10是根据本发明实施例的一种可选的电子装置的示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

根据本发明实施例的一个方面，提供了一种多媒体资源的同步播放方法，如图1所示，该方法包括：

S102，播放目标多媒体资源中的第一资源，其中，目标多媒体资源包括第一资源和第二资源；

S104，获取第一资源的第一播放位置，其中，第一播放位置为第一资源的当前播放位置；

S106，确定第一播放位置在第二资源上对应的第二播放位置；

S108，播放第二资源中位于第二播放位置上的资源。

可选地，在本实施例中，上述多媒体资源的同步播放方法可以应用于如图2所示的客户端202所构成的硬件环境中。如图2所示，客户端202 播放目标多媒体资源中的第一资源，其中，目标多媒体资源包括第一资源和第二资源；获取第一资源的第一播放位置，其中，第一播放位置为第一资源的当前播放位置；确定第一播放位置在第二资源上对应的第二播放位置；播放第二资源中位于第二播放位置上的资源。

可选地，在本实施例中，上述多媒体资源的同步播放方法可以但不限于应用于播放多媒体资源的场景中。其中，上述客户端可以但不限于为各种类型的应用，例如，在线教育应用、即时通讯应用、社区空间应用、游戏应用、购物应用、浏览器应用、金融应用、多媒体应用、直播应用等。具体的，可以但不限于应用于在上述浏览器应用中播放多媒体资源的场景中，或还可以但不限于应用于在上述即时通讯应用中播放多媒体资源的场景中，以提高多媒体资源在播放时的同步效率。上述仅是一种示例，本实施例中对此不做任何限定。

可选地，在本实施例中，多媒体资源可以但不限于包括：视频资源(视频流、视频文件等)、音频资源(音频流、音频文件等)、幻灯片、电子相册、动态图片、动画等等。

可选地，在本实施例中，多媒体资源可以包括多种资源(例如：第一资源和第二资源)，例如：对于视频资源来说，其可以包括音频资源和图像资源等等，由其中的一种资源来驱动其他资源的播放，从而实现多媒体资源的同步播放。在一种方案中，第一资源可以为音频资源，第二资源可以为图像资源，也就是说，可以由音频资源的播放来驱动图像资源的播放，从而使二者同步。在另一中方案中，第一资源可以为图像资源，第二资源可以为音频资源，通过图像资源的播放来驱动音频资源的播放。

再例如：对于音频资源来说，其可以包括音频资源和音效图等等，在一种方案中，第一资源可以为音频资源，第二资源可以为音效图，也就是说，可以由音频资源的播放来驱动音效图的播放，从而使二者同步。在另一中方案中，第一资源可以为音效图，第二资源可以为音频资源，通过音效图的播放来驱动音频资源的播放。

需要说明的是，上述第二资源可以是一种或者多种资源，也就是说，可以由多媒体资源中的第一资源来驱动其他一种或者多种资源的同步播放。

可选地，在本实施例中，获取第一资源的第一播放位置的时机可以但不限于是设定的一个时间间隔，也就是说，在第一资源的播放过程中，每隔该时间间隔获取一次第一资源的第一播放位置，确定第二资源的第二播放位置，播放第二资源中位于第二播放位置上的资源。该时间间隔设置的越小，资源播放时的卡顿感觉就越弱，用户的体验度就会越高。

可选地，在本实施例中，资源的播放位置可以但不限于由以下形式表示：播放时间，播放百分比，播放的帧等等。例如：以视频资源中的第一资源为音频资源，第二资源为图像资源为例，获取到音频资源的第一播放位置为播放到整个音频资源的M％，从而确定该第一播放位置M％在图像资源上对应的第二播放位置为位于整个图像资源的M％处的图像帧N，则播放该图像帧N。

在一个可选的实施方式中，如图3所示，在页面上播放视频资源A，视频资源A包括音频资源B和图像资源C。播放视频资源A中的音频资源B，获取音频资源B的第一播放位置为00:00:35，即音频的第35秒，确定00:00:35在图像资源C上对应的第二播放位置为图像帧D，播放图像资源C中的图像帧D，从而使得在音频播放到00:00:35时图像资源跳转到图像帧D的播放。

可见，通过上述步骤，播放多媒体资源中的第一资源，并获取第一资源的当前播放位置，根据第一资源的当前播放位置确定第二资源上与该位置对应的第二播放位置，播放第二资源中位于第二播放位置上的资源，从而由第一资源的播放控制第二资源与其同步，来确保第一资源和第二资源同步播放，从而实现了提高多媒体资源在播放时的同步效率的技术效果，进而解决了多媒体资源在播放时同步效率较低的技术问题。

进一步，多媒体资源的播放是第一资源和第二资源的分别播放的过程，因此，在该多媒体资源的播放过程中可以在其UI界面上加载其他多媒体资源的播放，从而能够制造出混音的播放效果，为用户创造更加震撼的视听效果，提升用户的体验度。

作为一种可选的方案，确定第一播放位置在第二资源上对应的第二播放位置包括：

S1，根据第一播放位置和第一资源的播放时长确定第一资源的目标播放进度；

S2，将第二资源中播放进度为目标播放进度的播放位置确定为第二播放位置，其中，第二资源的播放时长与第一资源的播放时长相同。

可选地，在本实施例中，对于播放时长相同的第一资源和第二资源，可以按照第一资源的播放进度确定第二资源的第二播放位置，从而保证第一资源和第二资源的播放进度相同。

可选地，在本实施例中，资源的播放进度可以但不限于由播放百分比、播放长度，距播放结束剩余的资源占总资源的百分比，距播放结束剩余的资源长度等等形式来表示。例如：播放了46％、播放了5秒、距播放结束剩余的资源占总资源的50％、距播放结束剩余的资源35秒等等。

作为一种可选的方案，根据第一播放位置和第一资源的播放时长确定第一资源的目标播放进度包括：

S1，获取第一播放位置的播放时间；

S2，确定播放时间在第一资源的播放时长中所占的百分比；

S3，将百分比确定为目标播放进度。

可选地，在本实施例中，由于第一资源和第二资源的播放时长是相同的，那么，第一资源和第二资源的播放进度也是相同的，也就是说，第一资源播放到P％时，第二资源也应该播放到P％，以确保二者的同步播放，因此，可以将第一资源的当前播放时间转换为当前播放的百分比，将该百分比确定为目标播放进度，控制第二资源随时保持与第一资源的目标播放进度相同则可以保持第一资源和第二资源的同步播放。

在一个可选的实施方式中，如图4所示，在页面上播放音频资源A，音频资源A包括音频B和效果图C。播放音频资源A中的音频B，获取音频B的第一播放位置为00:00:35，即音频的第35秒，音频的播放时长为4分30秒，确定该播放时间00:00:35在音频的播放时长4分30秒中所占的百分比为13％，确定效果图C中播放进度为13％时对应效果图D，则播放效果图D，从而使得在音频播放到00:00:35时效果图跳转到效果图 D的播放。

作为一种可选的方案，确定第一播放位置在第二资源上对应的第二播放位置包括：

S1，获取具有对应关系的第一资源的播放位置和第二资源的播放位置；

S2，从具有对应关系的第一资源的播放位置和第二资源的播放位置中查找第一播放位置对应的第二播放位置。

可选地，在本实施例中，可以记录第一资源的播放位置和第二资源的播放位置之间的对应关系，在播放第一资源的同时根据该对应关系来确定第一资源的第一播放位置对应的第二资源的第二播放位置。

例如：如图5所示，以第一资源为音频资源，第二资源为图像资源为例，建立音频资源的播放位置和图像资源的播放位置之间的对应关系：A1 秒对应P1帧，A2秒对应P2帧，A3秒对应P3帧，……，Ai秒对应Pi 帧，……，AN秒对应PN帧，播放音频资源，获取音频资源的第一播放位置A3秒，从上述具有对应关系的第一播放位置和第二播放位置中查找到A3秒对应P3帧，则播放图像资源中的P3帧。再一次获取到音频资源的第一播放位置A4秒，从上述具有对应关系的第一播放位置和第二播放位置中查找到A4秒对应P4帧，则播放图像资源中的P4帧。依次类推，直至多媒体资源播放结束。

作为一种可选的方案，在确定第一播放位置在第二资源上对应的第二播放位置之前，还包括：

S1，加载音频资源和动画资源；

S2，从动画资源中获取与音频资源的每个播放位置对应的动画帧，得到与音频资源的播放时长相同的目标动画资源；

S3，将音频资源确定为第一资源，并将目标动画资源确定为第二资源。

可选地，在本实施例中，上述确定第一资源和第二资源的过程可以但不限于在动画编辑器上完成，例如：Adobe Animate CC动画编辑器。通过动画编辑器对音频资源和动画资源进行对齐处理，使得音频资源的每个播放时间均有其对应的动画帧，将动画资源中多余的动画帧删除后得到与音频资源的播放时长相同的目标动画资源，音频资源即为上述第一资源，目标动画资源即为第二资源。

作为一种可选的方案，将音频资源确定为第一资源，并将目标动画资源确定为第二资源包括：

S1，记录具有对应关系的音频资源的每个播放位置与动画帧；

S2，将具有对应关系的音频资源的每个播放位置与动画帧确定为具有对应关系的第一资源的播放位置和第二资源的播放位置。

可选地，在本实施例中，由于二者的播放时长是相同的，因此，只需确定第一资源的当前播放进度就可以得到第二资源的第二播放位置。或者也可以记录音频的播放时间和目标动画资源的动画帧的对应关系，从而利用音频资源的播放控制目标动画资源的播放。

作为一种可选的方案，播放第二资源中位于第二播放位置上的资源包括：

S1，播放目标动画资源中位于第二播放位置上的动画帧。

可选地，在本实施例中，播放的第二资源中位于第二播放位置上的资源可以但不限于是第二播放位置上的动画帧。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如 ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

根据本发明实施例的另一个方面，还提供了一种用于实施上述多媒体资源的同步播放方法的多媒体资源的同步播放装置，如图6所示，该装置包括：

1)第一播放模块62，用于播放目标多媒体资源中的第一资源，其中，目标多媒体资源包括第一资源和第二资源；

2)第一获取模块64，用于获取第一资源的第一播放位置，其中，第一播放位置为第一资源的当前播放位置；

3)第一确定模块66，用于确定第一播放位置在第二资源上对应的第二播放位置；

4)第二播放模块68，用于播放第二资源中位于第二播放位置上的资源。

可选地，在本实施例中，上述多媒体资源的同步播放装置可以应用于如图2所示的客户端202所构成的硬件环境中。如图2所示，客户端202 播放目标多媒体资源中的第一资源，其中，目标多媒体资源包括第一资源和第二资源；获取第一资源的第一播放位置，其中，第一播放位置为第一资源的当前播放位置；确定第一播放位置在第二资源上对应的第二播放位置；播放第二资源中位于第二播放位置上的资源。

可选地，在本实施例中，上述多媒体资源的同步播放装置可以但不限于应用于播放多媒体资源的场景中。其中，上述客户端可以但不限于为各种类型的应用，例如，在线教育应用、即时通讯应用、社区空间应用、游戏应用、购物应用、浏览器应用、金融应用、多媒体应用、直播应用等。具体的，可以但不限于应用于在上述浏览器应用中播放多媒体资源的场景中，或还可以但不限于应用于在上述即时通讯应用中播放多媒体资源的场景中，以提高多媒体资源在播放时的同步效率。上述仅是一种示例，本实施例中对此不做任何限定。

可选地，在本实施例中，多媒体资源可以但不限于包括：视频资源(视频流、视频文件等)、音频资源(音频流、音频文件等)、幻灯片、电子相册、动态图片、动画等等。

可选地，在本实施例中，多媒体资源可以包括多种资源(例如：第一资源和第二资源)，例如：对于视频资源来说，其可以包括音频资源和图像资源等等，由其中的一种资源来驱动其他资源的播放，从而实现多媒体资源的同步播放。在一种方案中，第一资源可以为音频资源，第二资源可以为图像资源，也就是说，可以由音频资源的播放来驱动图像资源的播放，从而使二者同步。在另一中方案中，第一资源可以为图像资源，第二资源可以为音频资源，通过图像资源的播放来驱动音频资源的播放。

再例如：对于音频资源来说，其可以包括音频资源和音效图等等，在一种方案中，第一资源可以为音频资源，第二资源可以为音效图，也就是说，可以由音频资源的播放来驱动音效图的播放，从而使二者同步。在另一中方案中，第一资源可以为音效图，第二资源可以为音频资源，通过音效图的播放来驱动音频资源的播放。

需要说明的是，上述第二资源可以是一种或者多种资源，也就是说，可以由多媒体资源中的第一资源来驱动其他一种或者多种资源的同步播放。

可选地，在本实施例中，获取第一资源的第一播放位置的时机可以但不限于是设定的一个时间间隔，也就是说，在第一资源的播放过程中，每隔该时间间隔获取一次第一资源的第一播放位置，确定第二资源的第二播放位置，播放第二资源中位于第二播放位置上的资源。该时间间隔设置的越小，资源播放时的卡顿感觉就越弱，用户的体验度就会越高。

可选地，在本实施例中，资源的播放位置可以但不限于由以下形式表示：播放时间，播放百分比，播放的帧等等。例如：以视频资源中的第一资源为音频资源，第二资源为图像资源为例，获取到音频资源的第一播放位置为播放到整个音频资源的M％，从而确定该第一播放位置M％在图像资源上对应的第二播放位置为位于整个图像资源的M％处的图像帧N，则播放该图像帧N。

在一个可选的实施方式中，如图3所示，在页面上播放视频资源A，视频资源A包括音频资源B和图像资源C。播放视频资源A中的音频资源B，获取音频资源B的第一播放位置为00:00:35，即音频的第35秒，确定00:00:35在图像资源C上对应的第二播放位置为图像帧D，播放图像资源C中的图像帧D，从而使得在音频播放到00:00:35时图像资源跳转到图像帧D的播放。

可见，通过上述装置，播放多媒体资源中的第一资源，并获取第一资源的当前播放位置，根据第一资源的当前播放位置确定第二资源上与该位置对应的第二播放位置，播放第二资源中位于第二播放位置上的资源，从而由第一资源的播放控制第二资源与其同步，来确保第一资源和第二资源同步播放，从而实现了提高多媒体资源在播放时的同步效率的技术效果，进而解决了多媒体资源在播放时同步效率较低的技术问题。

进一步，多媒体资源的播放是第一资源和第二资源的分别播放的过程，因此，在该多媒体资源的播放过程中可以在其UI界面上加载其他多媒体资源的播放，从而能够制造出混音的播放效果，为用户创造更加震撼的视听效果，提升用户的体验度。

作为一种可选的方案，第一确定模块包括：

1)第一确定单元，用于根据第一播放位置和第一资源的播放时长确定第一资源的目标播放进度；

2)第二确定单元，用于将第二资源中播放进度为目标播放进度的播放位置确定为第二播放位置，其中，第二资源的播放时长与第一资源的播放时长相同。

可选地，在本实施例中，对于播放时长相同的第一资源和第二资源，可以按照第一资源的播放进度确定第二资源的第二播放位置，从而保证第一资源和第二资源的播放进度相同。

可选地，在本实施例中，资源的播放进度可以但不限于由播放百分比、播放长度，距播放结束剩余的资源占总资源的百分比，距播放结束剩余的资源长度等等形式来表示。例如：播放了46％、播放了5秒、距播放结束剩余的资源占总资源的50％、距播放结束剩余的资源35秒等等。

作为一种可选的方案，第一确定单元包括：

1)获取子单元，用于获取第一播放位置的播放时间；

2)第一确定子单元，用于确定播放时间在第一资源的播放时长中所占的百分比；

3)第二确定子单元，用于将百分比确定为目标播放进度。

可选地，在本实施例中，由于第一资源和第二资源的播放时长是相同的，那么，第一资源和第二资源的播放进度也是相同的，也就是说，第一资源播放到P％时，第二资源也应该播放到P％，以确保二者的同步播放，因此，可以将第一资源的当前播放时间转换为当前播放的百分比，将该百分比确定为目标播放进度，控制第二资源随时保持与第一资源的目标播放进度相同则可以保持第一资源和第二资源的同步播放。

在一个可选的实施方式中，如图4所示，在页面上播放音频资源A，音频资源A包括音频B和效果图C。播放音频资源A中的音频B，获取音频B的第一播放位置为00:00:35，即音频的第35秒，音频的播放时长为4分30秒，确定该播放时间00:00:35在音频的播放时长4分30秒中所占的百分比为13％，确定效果图C中播放进度为13％时对应效果图D，则播放效果图D，从而使得在音频播放到00:00:35时效果图跳转到效果图 D的播放。

作为一种可选的方案，第一确定模块包括：

1)获取单元，用于获取具有对应关系的第一资源的播放位置和第二资源的播放位置；

2)查找单元，用于从具有对应关系的第一资源的播放位置和第二资源的播放位置中查找第一播放位置对应的第二播放位置。

可选地，在本实施例中，可以记录第一资源的播放位置和第二资源的播放位置之间的对应关系，在播放第一资源的同时根据该对应关系来确定第一资源的第一播放位置对应的第二资源的第二播放位置。

例如：如图5所示，以第一资源为音频资源，第二资源为图像资源为例，建立音频资源的播放位置和图像资源的播放位置之间的对应关系：A1 秒对应P1帧，A2秒对应P2帧，A3秒对应P3帧，……，Ai秒对应Pi 帧，……，AN秒对应PN帧，播放音频资源，获取音频资源的第一播放位置A3秒，从上述具有对应关系的第一播放位置和第二播放位置中查找到A3秒对应P3帧，则播放图像资源中的P3帧。再一次获取到音频资源的第一播放位置A4秒，从上述具有对应关系的第一播放位置和第二播放位置中查找到A4秒对应P4帧，则播放图像资源中的P4帧。依次类推，直至多媒体资源播放结束。

作为一种可选的方案，上述装置还包括：

1)加载模块，用于加载音频资源和动画资源；

2)第二获取模块，用于从动画资源中获取与音频资源的每个播放位置对应的动画帧，得到与音频资源的播放时长相同的目标动画资源；

3)第二确定模块，用于将音频资源确定为第一资源，并将目标动画资源确定为第二资源。

可选地，在本实施例中，上述确定第一资源和第二资源的过程可以但不限于在动画编辑器上完成，例如：Adobe Animate CC动画编辑器。通过动画编辑器对音频资源和动画资源进行对齐处理，使得音频资源的每个播放时间均有其对应的动画帧，将动画资源中多余的动画帧删除后得到与音频资源的播放时长相同的目标动画资源，音频资源即为上述第一资源，目标动画资源即为第二资源。

作为一种可选的方案，第二确定模块包括：

1)记录单元，用于记录具有对应关系的音频资源的每个播放位置与动画帧；

2)第三确定单元，用于将具有对应关系的音频资源的每个播放位置与动画帧确定为具有对应关系的第一资源的播放位置和第二资源的播放位置。

可选地，在本实施例中，由于二者的播放时长是相同的，因此，只需确定第一资源的当前播放进度就可以得到第二资源的第二播放位置。或者也可以记录音频的播放时间和目标动画资源的动画帧的对应关系，从而利用音频资源的播放控制目标动画资源的播放。

作为一种可选的方案，播放模块包括：

1)播放单元，用于播放目标动画资源中位于第二播放位置上的动画帧。

可选地，在本实施例中，播放的第二资源中位于第二播放位置上的资源可以但不限于是第二播放位置上的动画帧。

本发明实施例的应用环境可以但不限于参照上述实施例中的应用环境，本实施例中对此不再赘述。本发明实施例提供了用于实施上述实时通信的连接方法的一种可选的具体应用示例。

作为一种可选的实施例，上述多媒体资源的同步播放方法可以但不限于应用于如图7所示的播放视频资源的场景中。在本场景中，将目标多媒体资源拆分为HTML5动画和音频两部分，用户可以点击位于界面下半部分的按钮选择要播放的音频，在播放用户选择的音频的同时会在界面的上半部显示动画。移动端的音频播放选择webaudio，同样能播放音频，audio 标签仅能提供给开发人员对声音文件进行读取，播放，暂停以及音量调节的功能，它并不能处理更复杂的音频应用，而webaudio有比较全面的功能，例如：首先，webaudio是在音频完全加载完成时才进行播放，这样能保证在播放过程中不出现因为缓冲区资源不足而卡顿的情况。其次，webaudio具有音频的当前播放时间的属性，也就是position属性，能够确定音频播放头位置，以毫秒为单位。通过position属性与duration属性，可以计算出当前音频的播放位置的百分比。

可选地，在本实施例中，由于动画和音频是单独制作的，所以在同步的时候会有一定偏差，产生偏差之后，会破坏用户体验，出现音频快于或者慢于画面的情况，为了克服这种问题，如图8所示，利用Adobe Animate CC动画编辑器，先新建一个HTML5Canvas文件，然后在场景里面新建两个图层，图层1用来放置动画，图层2用来放置音频文件，导入音频和动画资源，此时可以在时间轴上清晰的看到音频和动画资源的同步情况，接下来进行资源的同步对齐，首先是音频和动画的对齐，在动画编辑器里面能直接播放动画和音频，此时就可以进行直接预览，在发现有不同步的地方的时候，就对动画进行修改，修改完成之后直接预览，反复打磨，直到完全同步，在上述步骤完成之后，把动画的多余帧删除，对齐音频的总时长，为后续前端逻辑实现同步做准备。

前端逻辑的主要同步核心是通过音频的播放进度来驱动动画画面更新，通过音频的两个属性position和duration，通过换算，就能得出目前音频的播放百分比，然后再基于动画的总帧数，换算成当前动画应该停留的帧，从而实现动画播放，如图9所示，可以分为以下三方面：

首先，利用页面帧循环函数，来实时获取音频播放进度和设置动画画面，代码如下：

其次，对音频进度进行换算，代码如下：

最后，设置界面上播放的动画画面，代码如下：

var movie；//动画文件；

movie.totalFrames；//动画总帧数；

movie.currentFrame；//动画当前帧数；

movie.currentFrame＝getSoundProgress()*movie.totalFrames；//换算出当前的动画进度；

通过上述描述可知，在本实施例中，实现了HTML5动画和audio同步，为移动端HTML5创意提供技术支持，主要针对audio同步要求较高的业务需求，不用再依靠视频来呈现，而且可以同时呈现若干组，HTML5 动画带透明通道，可以跟其他设计资源进行叠加组合。

根据本发明实施例的又一个方面，还提供了一种用于实施上述多媒体资源的同步播放的电子装置，如图10所示，该电子装置包括：一个或多个(图中仅示出一个)处理器1002、存储器1004、传感器1006、编码器 1008以及传输装置1010，该存储器中存储有计算机程序，该处理器被设置为通过计算机程序执行上述任一项方法实施例中的步骤。

可选地，在本实施例中，上述电子装置可以位于计算机网络的多个网络设备中的至少一个网络设备。

可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：

S1，播放目标多媒体资源中的第一资源，其中，目标多媒体资源包括第一资源和第二资源；

S2，获取第一资源的第一播放位置，其中，第一播放位置为第一资源的当前播放位置；

S3，确定第一播放位置在第二资源上对应的第二播放位置；

S4，播放第二资源中位于第二播放位置上的资源。

可选地，本领域普通技术人员可以理解，图10所示的结构仅为示意，电子装置也可以是智能手机(如Android手机、iOS手机等)、平板电脑、掌上电脑以及移动互联网设备(Mobile Internet Devices，MID)、PAD等终端设备。图10其并不对上述电子装置的结构造成限定。例如，电子装置还可包括比图10中所示更多或者更少的组件(如网络接口、显示装置等)，或者具有与图10所示不同的配置。

其中，存储器1004可用于存储软件程序以及模块，如本发明实施例中的多媒体资源的同步播放方法和装置对应的程序指令/模块，处理器 1002通过运行存储在存储器1004内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的目标组件的控制方法。存储器1004可包括高速随机存储器，还可以包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器1004可进一步包括相对于处理器1002远程设置的存储器，这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

上述的传输装置1010用于经由一个网络接收或者发送数据。上述的网络具体实例可包括有线网络及无线网络。在一个实例中，传输装置1010 包括一个网络适配器(NetworkInterface Controller，NIC)，其可通过网线与其他网络设备与路由器相连从而可与互联网或局域网进行通讯。在一个实例中，传输装置1010为射频(Radio Frequency，RF)模块，其用于通过无线方式与互联网进行通讯。

其中，具体地，存储器1004用于存储应用程序。

本发明的实施例还提供了一种存储介质，该存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。

可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的计算机程序：

S1，播放目标多媒体资源中的第一资源，其中，目标多媒体资源包括第一资源和第二资源；

S2，获取第一资源的第一播放位置，其中，第一播放位置为第一资源的当前播放位置；

S3，确定第一播放位置在第二资源上对应的第二播放位置；

S4，播放第二资源中位于第二播放位置上的资源。

可选地，存储介质还被设置为存储用于执行上述实施例中的方法中所包括的步骤的计算机程序，本实施例中对此不再赘述。

可选地，在本实施例中，本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令终端设备相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：闪存盘、只读存储器(Read-Only Memory，ROM)、随机存取器(Random Access Memory，RAM)、磁盘或光盘等。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在上述计算机可读取的存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在存储介质中，包括若干指令用以使得一台或多台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的客户端，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (7)

1.一种多媒体资源的同步播放方法，其特征在于，包括：

在动画编辑器中创建两个图层，并在两个图层中分别加载音频资源和动画资源；

通过所述动画编辑器将所述音频资源和所述动画资源对齐；预览所述音频资源和所述动画资源，以确定所述音频资源与所述动画资源是否同步；在所述音频资源与所述动画资源不同步的情况下，修改所述动画资源，并重新预览所述音频资源和修改后的所述动画资源，以确定所述动画资源中的多余帧；

删除所述动画资源中的多余帧，以从所述动画资源中获取与所述音频资源的每个播放位置对应的动画帧，得到与所述音频资源的播放时长相同的目标动画资源；

播放目标多媒体资源中的音频资源，其中，所述目标多媒体资源包括音频资源和目标动画资源；

在播放目标多媒体资源中的音频资源的过程中，每隔预定时间间隔获取所述音频资源的第一播放位置，其中，所述第一播放位置为所述音频资源的当前播放位置；

确定所述第一播放位置在所述目标动画资源上对应的第二播放位置；

播放所述目标动画资源中位于所述第二播放位置上的资源，以使得所述目标动画资源与所述音频资源同步播放；

其中，确定所述第一播放位置在所述目标动画资源上对应的第二播放位置包括：获取所述第一播放位置的播放时间；确定所述播放时间在所述音频资源的播放时长中所占的百分比；将所述百分比确定为所述目标播放进度；将所述目标动画资源中播放进度为所述目标播放进度的播放位置确定为所述第二播放位置，其中，所述目标动画资源的播放时长与所述音频资源的播放时长相同；

根据所述百分比从所述目标动画资源的总帧数中确定出当前动画应该停留的帧，从而实现动画播放；

利用页面帧循环函数，来实时获取所述目标播放进度和设置动画画面，实现了HTML5动画和音频同步，其中，所述动画画面包括HTML5动画，所述HTML5动画带透明通道，允许跟其他设计资源进行叠加组合。

2.根据权利要求1所述的方法，其特征在于，确定所述第一播放位置在所述目标动画资源上对应的第二播放位置包括：

获取具有对应关系的音频资源的播放位置和目标动画资源的播放位置；

从所述具有对应关系的音频资源的播放位置和目标动画资源的播放位置中查找所述第一播放位置对应的所述第二播放位置。

3.根据权利要求1所述的方法，其特征在于，播放所述目标动画资源中位于所述第二播放位置上的资源包括：

播放所述目标动画资源中位于所述第二播放位置上的动画帧。

4.一种多媒体资源的同步播放装置，其特征在于，包括：

加载模块，用于在动画编辑器中创建两个图层，并在两个图层中分别加载音频资源和动画资源；

第二获取模块，用于通过所述动画编辑器将所述音频资源和所述动画资源对齐；预览所述音频资源和所述动画资源，以确定所述音频资源与所述动画资源是否同步；在所述音频资源与所述动画资源不同步的情况下，修改所述动画资源，并重新预览所述音频资源和修改后的所述动画资源，以确定所述动画资源中的多余帧；删除所述动画资源中的多余帧，以从所述动画资源中获取与所述音频资源的每个播放位置对应的动画帧，得到与所述音频资源的播放时长相同的目标动画资源；

第一播放模块，用于播放目标多媒体资源中的音频资源，其中，所述目标多媒体资源包括音频资源和目标动画资源；

第一获取模块，用于在播放目标多媒体资源中的音频资源的过程中，每隔预定时间间隔获取所述音频资源的第一播放位置，其中，所述第一播放位置为所述音频资源的当前播放位置；

第一确定模块，用于确定所述第一播放位置在所述目标动画资源上对应的第二播放位置；

第二播放模块，用于播放所述目标动画资源中位于所述第二播放位置上的资源，以使得所述目标动画资源与所述音频资源同步播放；

所述第一确定模块包括：

获取子单元，用于获取所述第一播放位置的播放时间；

第一确定子单元，用于确定所述播放时间在所述音频资源的播放时长中所占的百分比；

第二确定子单元，用于将所述百分比确定为所述目标播放进度；

第二确定单元，用于将所述目标动画资源中播放进度为所述目标播放进度的播放位置确定为所述第二播放位置，其中，所述目标动画资源的播放时长与所述音频资源的播放时长相同；

所述装置还用于：根据所述百分比从所述目标动画资源的总帧数中确定出当前动画应该停留的帧，从而实现动画播放；

所述装置还用于：利用页面帧循环函数，来实时获取所述目标播放进度和设置动画画面，实现了HTML5动画和音频同步，其中，所述动画画面包括HTML5动画，所述HTML5动画带透明通道，允许跟其他设计资源进行叠加组合。

5.根据权利要求4所述的装置，其特征在于，所述第一确定模块包括：

获取单元，用于获取具有对应关系的音频资源的播放位置和目标动画资源的播放位置；

查找单元，用于从所述具有对应关系的音频资源的播放位置和目标动画资源的播放位置中查找所述第一播放位置对应的所述第二播放位置。

6.一种存储介质，其特征在于，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行所述权利要求1至3任一项中所述的方法。

7.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为通过所述计算机程序执行所述权利要求1至3任一项中所述的方法。

Images