CN115145530A - 播放界面处理方法、电子设备和计算机可读存储介质 - Google Patents

Abstract

本申请涉及一种播放界面处理方法、电子设备和计算机存储介质。所述方法包括：响应于音频播放请求，获取与待播放的目标音频关联的动态效果素材；所述动态效果素材中的每一动效视频帧是基于与所述目标音频关联的至少两种代表色对素材视频中对应的素材视频帧进行染色处理后得到的，所述动态效果素材中各像素点的颜色为所述代表色的渐变色；在所述目标音频所对应的播放界面的界面背景中展示所述动态效果素材。采用本方法能够使得播放界面展示的内容更具独特的氛围感，为目标音频增加视觉效果表达，视觉和听觉结合，提高用户的使用体验。

Description

播放界面处理方法、电子设备和计算机可读存储介质

技术领域

本申请涉及音频播放技术领域，特别是涉及一种播放界面处理方法、电子设备和计算机可读存储介质。

背景技术

随着技术的不断发展，目前大多数计算机设备均提供有音频播放应用程序，用户通过音频播放应用程序，能够满足其欣赏音频的需求。目前，在播放音频的过程中，在当前播放音频的播放界面中，展示当前播放音频的音频封面以及当前播放音频的音频信息。例如，以音频为歌曲为例，该音频封面可以是歌曲的专辑图、音频信息包括歌曲名称。歌手名称、歌词等。

然而，上述方案在播放音频时所展示的内容较为单一，难以营造和音频匹配的氛围，用户体验感较差。

发明内容

基于此，有必要针对上述技术问题，提供一种能够丰富音频播放界面展示内容的播放界面处理方法、电子设备和计算机可读存储介质。

第一方面，本发明实施例提供了一种播放界面处理方法，其特征在于，包括：

响应于音频播放请求，获取与待播放的目标音频关联的动态效果素材；所述动态效果素材中的每一动效视频帧是基于与所述目标音频关联的至少两种代表色对素材视频中对应的素材视频帧进行染色处理后得到的，所述动态效果素材中各像素点的颜色为所述代表色的渐变色；

在所述目标音频所对应的播放界面的界面背景中展示所述动态效果素材。

第二方面，本发明实施例提供了一种电子设备，包括显示装置、存储器和处理器，存储器存储有计算机程序，处理器执行计算机程序时实现上述的播放界面处理方法的步骤。

第三方面，本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述的播放界面处理方法的步骤。

上述播放界面处理方法、电子设备和计算机可读存储介质中，响应于音频播放请求，获取与待播放的目标音频关联的动态效果素材；其中，动态效果素材中的每一动效视频帧是基于与目标音频关联的至少两种代表色对素材视频中对应的素材视频帧进行染色处理后得到的，动态效果素材中各像素点的颜色为代表色的渐变色；进而可以在目标音频所对应的播放界面的界面背景中展示动态效果素材。在本实施例的方案中，能够使播放界面展示的内容营造的氛围感与播放音频统一，为目标音频增加视觉效果表达，视觉和听觉结合，提高用户的使用体验。

附图说明

图1为一个实施例中播放界面处理方法的应用环境图；

图2为一个实施例中播放界面处理方法的流程示意图；

图3为一个实施例中一种播放界面的示意图；

图4为一个实施例中一种获取动态效果素材的流程示意图；

图5为一个实施例中从音频封面图像提取代表色的流程示意图；

图6为一个实施例中从目标色相区间中确定代表色的流程示意图；

图7为一个实施例中基于两种代表色对像素点进行染色处理的流程示意图；

图8为一个实施例中素材视频的视频帧的结构示意图；

图9a为一个实施例中一种素材视频帧的示意图；

图9b为一个实施例中另一种素材视频帧的示意图；

图10为一个实施例中电子设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请实施例提供的播放界面处理方法，可以应用于如图1所示的应用环境中的终端102上。其中，终端102通过网络与服务器104进行通信。数据存储系统可以存储服务器104需要处理的数据。数据存储系统可以集成在服务器104上，也可以放在云上或其他网络服务器上，数据存储系统可以设置有音频库，在播放音频时，终端102可以从服务器104获取待播放的音频，并且可以获取动态效果素材，进而将动态效果素材展示在音频播放界面的界面背景中。

其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环等。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

本发明实施例提供一种音频处理方法，以该方法应用于图1中的终端102进行说明，请参阅图2，该方法可以包括如下步骤：

S201，响应于音频播放请求，获取与待播放的目标音频关联的动态效果素材。

其中，动态效果素材中的每一动效视频帧是基于与目标音频关联的至少两种代表色对素材视频中对应的素材视频帧进行染色处理后得到的，动态效果素材中各像素点的颜色为代表色的渐变色。

具体而言，目标音频可以是终端待播放的音频。目标音频包括但不限于歌曲、纯音乐、影视原声、有声小说、脱口秀、广播剧等各种类型的音频作品。在一示例中，对于目标音频由用户自行选择的场景，在打开该应用程序后，在界面上展示以不同分类方式进行分类得到的音频列表，分类可以是由应用程序提供者生成推送的，如每日随机歌单列表、与用户收听习惯相关的类似音频推荐列表等。也可以是用户根据实际情况自行分类的，如根据音频创作者、音频风格等创建对应的列表。在用户选择一个音频列表后，音频列表界面将会展示用户所选音频列表中包含的音频，终端响应于对音频列表界面中音频的选取操作，将选取操作对应的音频作为目标音频。

实际应用中，终端可以接收针对目标音频的音频播放请求，该音频播放请求可以是用户主动触发的，例如用户点击某一音频进行播放；或者，也可以是自动触发的，例如可以是播放音频的应用程序在前一音频播放结束后，自动将下一音频作为目标音频，并生成针对该目标音频的音频播放请求。在接收到音频播放请求后，终端可以获取与待播放的目标音频相关联的动态效果素材，该动态效果素材可以是预先生成的，也可以是在接收到音频播放请求后再生成的。

具体地，在生成动态效果素材时，可以获取与目标音频关联的至少两种代表色，代表色可以是能够体现目标音频风格特点的颜色，其中，目标音频风格特点包括但不限于目标音频在听觉上的特点或者与目标音频相关的图片在视觉上所呈现的特点，例如，若目标音频为歌曲，可以通过预先训练的模型获取歌曲的音乐风格(如抒情、忧伤、激昂)，根据音乐风格确定目标音频的代表色；又如，可以从与目标音频相关的图像如音频封面中提取代表色。音频封面指的是用于对目标音频进行宣传、代表目标音频的特点的图片。如目标音频为歌曲时，音频封面可以为该歌曲的专辑图，目标音频为有声小说时，可以为该小说的书籍封面图。

为了得到动态背景视频，除了获取代表色外还需要获取素材视频。具体地，素材视频可以是为了配合目标音频的播放，营造具有氛围感动效的视频，可以为动态变化的双色视频，如黑白视频。动态变化可以是随机的，也可以是随着目标音频的节奏变化的。素材视频可以随时更新，从而拓展出多种不同动态效果。由于素材视频可以是用于提供动态效果变化方式的模板，其颜色与目标音频不一定匹配，而不同颜色常常具有不同寓意，如红色代表热情、积极，灰色代表寂寞、朴素等，颜色不匹配的动态效果可能破坏用户对音频的欣赏体验，如用户在收听悲情小说时，音频播放界面是粉红色调，或用户在听爱情歌曲时，音频播放界面为黑灰色调。

因此，在本实施例中，为便于后续在音频的播放界面中展示出与目标音频相匹配的动效，可以基于提取得到至少两种代表色对素材视频中选中的多个视频帧(也即多个素材视频帧，可以是素材视频帧的部分视频帧，也可以是素材视频帧中的所有视频帧)中的像素点进行染色处理，得到对应的多个动效视频帧，换而言之，针对每个选中的素材视频帧，可以至少两种代表色对该素材视频帧中的至少部分像素点进行染色处理，得到该素材视频帧对应的动效视频帧，进而可以基于多个动效视频帧生成动态效果素材。

S202，在目标音频所对应的播放界面的界面背景中展示动态效果素材。

在本步骤中，在获取到与目标音频关联的动态效果素材后，则可以在目标音频播放界面的界面背景中展示该动态效果素材。

具体而言，音频的播放界面可以包括界面背景，界面背景之上可以展示有播放应用的一个或多个界面元素，如音频播放进度条、触发对应操作或功能的预设按钮的预设控件，又如音频封面图像展示区域、音频内容词句(如歌词、小说原句等)或音频作者信息展示区域；其中，播放应用中的界面背景可以通过具有独立的图层，而一个或多个界面元素则可以通过其他图层进行设置，例如针对不同界面元素分别设置不同层级的图层。

相关界面元素的展示方式可以基于在播放界面进行模式选择操作实现。例如选择的播放模式为封面模式时，播放界面还展示目标音频的音频封面。例如选择的播放模式为歌词模式时，播放界面还展示目标音频的歌词信息等。可选的，目标音频的播放界面还可以包括播放控件。播放控件可以包括播放进度条、单曲循环/随机/顺序播放控件、音效选择控件、音质选择控件、暂停控件、倍速控件、下载控件、评论控件、收藏控件中的至少一种，本申请实施例并不对播放控件的具体类型进行限定。另外，预设素材视频可填充到上述可选展示项的展示区域以外的其他区域，从而避免影响上述可选展示项的展示效果

在相关技术中，界面背景可以是纯色背景(例如全黑色背景)或展示一些静态图像，而本实施例中，则在获取到目标音频关联的动态效果素材后，可以通过目标音频播放界面的界面背景展示动态效果素材，如图3所示，示出了一种播放界面的示意图，在图3下方的虚线框中，是经过染色处理后的带有渐变效果的像素点，在目标音频的播放过程中，界面背景由于动态效果素材的播放而不断发生变化，展现出目标音频多种代表色之间的渐变色。

上述播放界面处理方法中，响应于音频播放请求，获取与待播放的目标音频关联的动态效果素材；其中，动态效果素材中的每一动效视频帧是基于与目标音频关联的至少两种代表色对素材视频中对应的素材视频帧进行染色处理后得到的，动态效果素材中各像素点的颜色为代表色的渐变色；进而可以在目标音频所对应的播放界面的界面背景中展示动态效果素材。在本实施例的方案中，能够使播放界面展示的内容营造的氛围感与播放音频统一，为目标音频增加视觉效果表达，视觉和听觉结合，提高用户的使用体验。

在一个实施例中，如图4所示，所述方法还可以包括如下步骤：

S401，获取目标音频相关的音频封面图像和素材视频。

具体实现中，目标音频可以配置有相关的音频封面图像，例如，在推广或介绍目标音频时，为便于听众直接明了地快速获取到目标音频的相关信息，可以通过音乐专辑的配图、小说封面或海报等图像作为目标音频的音频封面图像，使用户从图像中快速获取到目标音频的关键信息。

在本步骤中，可以获取目标音频相关的音频封面图像，以及，获取预先设置的素材视频。

S402，从音频封面图像提取满足预设条件的至少两种代表色。

音频封面一般包括多种颜色，代表色即是在音频封面的多种颜色中具有代表性的颜色。具体地，可以从音频封面图像的多种颜色中，将满足预设条件的颜色作为音频封面图像的代表色，例如，可以根据各颜色在音频封面中的占比确定代表色，或者可以根据音频封面主体对象的颜色确定代表色，等等。

S403，基于代表色对素材视频中的每个素材视频帧进行染色处理，得到素材视频帧对应的动效视频帧。

其中，动效视频帧中各像素点的颜色为所述代表色的渐变色。

具体实现中，代表色是从音频封面中提取出来的，音频封面在设计时往往可以与对应的目标音频保持风格统一，因此从音频封面图像中提取得到的至少两种代表色也将与目标音频保持风格统一。

在本步骤中，可以基于获取到的代表色，对素材视频中各素材视频帧的像素点进行染色处理，具体而言，可以从素材视频中获取素材视频帧，针对每个获取的素材视频帧，可以根据素材视频帧中像素点的灰度值，确定用于指示像素点染色方式的染色信息，染色信息可以指示基于代表色对待染色像素点进行染色的方式；进而可以根据素材视频帧中多个像素点的染色信息，对素材视频帧中的多个像素点染色，得到与该素材视频帧对应的动效视频帧，通过该染色方式依次对素材视频帧中的多个素材视频帧进行处理，可以得到与之分别对应的多个动效视频帧，由此可以基于多个动效视频帧所构成的动态效果素材，呈现出多种代表色在播放界面动态变化的过程。

其中，染色处理所选用的颜色为两种代表色之间的渐变色，渐变色是与两种代表色相似，但又与两种代表色不相同的颜色，使得渐变色染色后的预设素材视频展现出与目标封面不同的效果，染色后的预设素材视频与目标音频搭配，营造出专属于该目标音频的氛围。

在另外一种示例中，也可以从素材视频帧中获取其中的部分素材视频帧进行染色处理，例如按照预设的间隔抽取动效视频帧，提高动画效果素材的生成速度。

S404，基于多个动效视频帧，获取与目标音频关联的动态效果素材。

在经过染色处理得到多个动效视频帧后，可以基于多个动效视频帧生成与目标音频相关联的动态效果素材。可以理解，本实施例步骤S401-S404除了可以适用于预先获取动态效果素材，也可以适用于动态效果素材的实时生成，即在S201接收到音频播放请求后，也可以通过步骤S401-S404的方式获取动态效果素材。

在本实施例中，一方面，可以从目标音频的音频封面图像中提取可代表目标音频风格的代表色，再利用这两种代表色对素材视频进行染色处理，使得最终生成的动态效果素材可以展现与目标音频的风格匹配的动态效果，使得播放界面展示的内容营造的氛围感与目标音频统一；另一方面，该方案通用性很强，不需要单独开发动态效果，只需要更新素材视频就能新增动态效果，例如设计素材视频的动画表达形式，实现对播放界面动态效果快速高效的拓展。

在一个实施例中，请参阅图5，S402从音频封面图像提取满足预设条件的至少两种代表色可以包括如下步骤：

S501，根据音频封面图像中各像素点的色相值，将音频封面中各像素点划分至对应的色相区间，并确定每个色相区间的像素点数量。

在实际应用中，在获取到音频封面图像后，可以确定音频封面图像中各个像素点的色相值。具体而言，在HSB(Hue-Saturation-Brightness，色相-饱和度-明度)色彩模式中，色相的特征决定于光源的光谱组成以及有色物体表面反射的各波长辐射的比值对人眼所产生的感觉，因此通过色相值能够准确区别各种颜色。可以理解的是，如果音频封面是基于其它色彩模式，如RGB(Red-Green-Yellow，红-绿-蓝)色彩模式或CMYK(Cyan-Magenta-Yellow-Black，青-洋红-黄-黑色)色彩模式等，则需要对音频封面进行HSB转换。可选地，考虑到图像处理速度，可以将音频封面进行压缩，例如压缩到10*10共100个像素点，提取压缩后的各像素点的色相值。

在获取到各个像素点的色相值后，则可以获取预先设置的多个色相区间，并根据色相值将像素点划分到对应的色相区间。可以理解，色相区间包含色相值范围的多个颜色，根据各像素点的色相值，可以确定该像素点的颜色属于哪个色相区间。

在一示例中，各个色相区间的色相值范围确定方式为：以色相环中各个颜色为基准色，基于各基准色设置色相区间。在划分颜色到对应的色相区间时，可以将与基准色的色相值之差在阈值范围之内的颜色划分至该基准色所属的色相区间内。常见的色相环包括8色相环、10色相环、12色相环、24色相环等。各个色相区间的基准色也可不根据色相环进行设计，各个色相区间的阈值范围也可根据实际情况进行选择，本实施例中不做限定。

S502，从多个色相区间中确定至少两个目标色相区间，目标色相区间的像素点数量满足预设的像素点数量条件。

在将音频封面图像中的各个像素点划分到对应的色相区间后，可以对每个色相区间内的像素点数量进行统计，得到每个色相区间的像素点数量。具体而言，各色相区间内包含像素点的颜色的数量即反映了该色相区间中的颜色在音频封面的占比，而音频封面中占比较大的颜色具有代表性且与目标音频的风格匹配，因此，可以根据各个色相区间的像素点数量，从多个色相区间中确定出像素点数量满足预设的像素点数量条件的色相区间，作为目标色相区间。具体例如，可以将像素点数量最多的至少两个色相区间作为目标色相区间，或者，也可以将像素点数量超过数量阈值的至少两个色相区间作为目标色相区间。

以基于10色相环构建的色相区间为例，若音频封面40％的像素点颜色属于紫红色相区间，音频封面35％的像素点颜色属于蓝色相区间，其余25％的像素点颜色属于其它色相区间，则紫红色相区间和蓝色相区间为目标色相区间。

S503，从每个目标色相区间中选择一个颜色，得到至少两种代表色。

在获取到至少两个目标色相区间后，可以从每个目标色相区间中获取一个颜色，从而可以根据从各个目标色相区间获取的颜色，得到至少两种代表色。本实施例对从目标色相区间中选择出代表色的方式不做限定，例如可以是任意选择，也可以将符合预设的染色效果的颜色选择为代表色。

在本实施例中，通过将音频封面图像的各像素点按照色相值划分到多个色相区间，并选择目标区间中的颜色，能够快速获取到与目标音频风格匹配的代表色。

在一个实施例中，请参阅图6，S503从每个目标色相区间中选择一个颜色，得到至少两种代表色，可以包括如下步骤：

S601，针对每个目标色相区间，从划分至目标色相区间的多个像素点中，获取色彩参数与预设色彩参数最接近的像素点作为目标像素点。

其中，色彩参数可以包括明度和/或饱和度。

可以理解，在HSB色彩模式下，明度和饱和度也是一个颜色的重要特征。明度指照射在景物或图像上光线的明暗程度。图像明度增加时，就会显得耀眼或刺眼，明度越小时，图像就会显得灰暗。饱和度是指图像颜色的浓度，饱和度越高颜色越饱满，如青翠欲滴的感觉；饱和度越低，颜色就会显得越陈旧、惨淡。

在本实施例中，可以获取各个像素点的色彩参数，并根据像素点的色彩参数，从色相区间的各像素点中选择出色彩参数满足要求的目标像素点，并根据目标像素点的颜色确定出满足视觉要求的代表色。具体地，可以获取预设色彩参数，各个目标色相区间的预设色彩参数可以相同也可以存在差异，预设色彩参数可以是预设视觉效果对应的色彩参数。

进而针对每个目标色相区间，可以将该目标色相区间下各像素点的色彩参数与预设色彩参数进行比较，选择色彩参数与预设色彩参数最接近的像素点作为目标像素点。可选地，明度和饱和度的取值范围在0-100，在明度和/或饱和度位于中间值时(即50)，颜色较为柔和，不会出现过亮、过暗和/或过度鲜艳，因此，明度和饱和度的预设色彩参数可以选择50。

S602，根据目标像素点的颜色确定代表色。

在确定目标像素点后，则可以目标像素点的颜色确定代表色，例如可以直接将目标像素点的颜色确定为代表色。在一些示例中，目标像素点的颜色视觉效果可能较差，则可对目标像素点的颜色进行微调，并基于微调后的颜色确定代表色。

例如，在目标像素点的色彩参数与预设色彩参数间的差异小于预设阈值的情况下，可以以目标像素点的颜色为代表色。在目标像素点的色彩参数与预设色彩参数间的差异大于或等于预设阈值的情况下，可以根据预设色彩参数调整目标像素点的颜色，以调整后的颜色为代表色。换句话说，如果音频封面图像的所有像素点的色彩参数都与预设色彩参数偏差较大，即使从目标色相区间中确定了与预设色彩参数最为接近的像素点，但视觉效果仍然较差。针对这种情况根据预设色彩参数对目标颜色的色彩参数进行一定调整，使调整后的目标颜色的色彩参数与预设色彩参数的差异小于预设阈值。例如，色彩参数包括明度和饱和度的情况下，音频封面的各像素点均过于鲜艳且过亮，提取出来的目标颜色的饱和度和明度分别为80和90，而明度和饱和度的预设色彩参数都为50，预设阈值为20，则可以选择将饱和度和明度调整为30-70之间的值。

在本实施例中，针对每个目标色相区间，可以从划分至目标色相区间的多个像素点中，获取色彩参数与预设色彩参数最接近的像素点作为目标像素点，并根据目标像素点的颜色确定代表色，能够快速获取到满足预设视觉效果的代表色。

在其中一个实施例中，请参阅图7，若至少两种代表色为两种代表色，S403基于代表色对素材视频中的每个素材视频帧进行染色处理，得到素材视频帧对应的动效视频帧，可以包括如下步骤：

S701，确定素材视频的视频帧中的颜色表达区域，以及，确定素材视频帧的待染色区域。

可以理解的是，由于两种代表色之间的渐变色有多种，需要确定每个像素点具体使用的渐变色。在本步骤，可以从素材视频中提取素材视频帧，从素材视频提取素材视频帧的技术可以根据素材视频所采用的编码方式确定，例如常见的编码方式包括H.264、H.265、MPEG-1、MPEG-2等，则不同的编码方式可以确定不同的视频帧提取技术。

从素材视频中提取素材视频帧后，可以确定素材视频帧中用于计算待染色像素点所用渐变色的颜色表达区域，该颜色表达区域可以为整个素材视频帧，也可以是素材视频帧的部分，若颜色表达区域为素材视频帧的部分，可以预先设置颜色表达区域的配置信息，例如颜色表达区域范围，从而在获取素材视频中的素材视频帧后，可以根据配置信息确定出颜色表达区域。例如，图8示出了一种素材视频的素材视频帧，通过配置信息将该素材视频帧中左半边的区域(即白色虚线方框中的区域)确定为颜色表达区域。

此外，还可以确定素材视频帧中待染色区域，具体而言，可以确定素材视频帧中用于生成动效视频帧的区域，作为待染色区域，待染色区域中的各个像素点可以作为待染色像素点，其中，待染色区域可以是素材视频帧中的颜色表达区域，也可以是颜色表达区域以外的区域，例如透明度表达区域，当然，也可以是从素材视频帧中框选的其他区域，设备可以根据配置信息确定素材视频帧中的待染色区域。

S702，根据待染色区域中待染色像素点的位置，确定颜色表达区域中与待染色像素点关联的颜色表达像素点。

具体地，可以根据待染色像素点的在待染色区域中的位置，确定待染色像素点在颜色表达区域中关联的颜色表达像素点。

其中，待染色像素点可以与颜色表达像素点之间一一对应，例如在颜色表达区域的大小与待染色区域的大小相同或者颜色表达区域大于待染色区域的情况下，可以将待染色像素点与颜色表达区域中的像素点逐一对应；或者，也可以一个颜色表达像素点对应多个待染色像素点，例如在颜色表达区域小于待染色区域的情况下，可以重复使用颜色表达区域中的像素点，将颜色表达区域中的一个像素点作为待染色区域中多个待染色像素点所关联的颜色表达像素点。

可选地，在一一对应关系中，根据待染色像素点在待染色区域中的位置，选择在颜色表达区域相同位置的像素点为颜色表达像素点。

具体例如，若待染色区域的长宽分别为a和b，待染色像素点位于长度0.1a和宽度0.1b的位置，而颜色表达区域的长宽也分别为a和b，则该待染色像素点关联的颜色表达像素点可以在颜色表达区域中长度0.1a和宽度0.1b的位置。

例如，图9a示出了一个素材视频帧，若素材视频帧中的待染色区域(图9a中的虚线框901对应区域)与颜色表达区域重合，针对左上角顶点，当该顶点作为待染色像素点P1，可以将该顶点同时作为关联的颜色表达像素点(a1)；若待染色区域(图9a中的点虚线框902对应的区域)与颜色表达区域不重合，但大小相同，在待染色像素点P2为待染色区域中心的像素点时，可以将颜色表达区域中心的像素点a2确定为与待染色像素点P2关联的颜色表达像素点；若待染色区域比颜色表达区域小(例如颜色表达区域的长宽分别为c(c＞a)和d(d＞b))，可以根据区域映射关系，从颜色表达区域中确定出与待染色区域大小相同的颜色查找区域，并将该区域中的各像素点与待染色区域中的像素点一一对应。

可选地，在一对多关系中，为同一行的待染色像素点，在颜色表达区域选择对应行中的任一像素点作为颜色表达像素点，即为第n行的待染色像素点，选择颜色表达区域第n行中的任一像素点作为颜色表达像素点。待染色像素点与颜色表达像素点之间的对应关系可根据想达到的染色效果确定，不限于本实施例提到的方式。

S703，根据颜色表达像素点的灰度值，在两种代表色之间的各渐变色中确定目标渐变色。

假设渐变色是由第一代表色渐变至第二代表色，则两种代表色之间的各渐变色可视为与第一代表色相似度逐渐降低或与第二代表色相似度逐渐升高。而颜色表达像素点的灰度值可以用比例的方式表示，可以根据颜色表达像素点的灰度值选择对应相似度的渐变色为目标渐变色。具体而言，灰度值往往具有预设的灰度值范围，即确定某个像素点的灰度值时，可以在该灰度值范围内选择某一数值作为像素点的灰度值，因此，可以通过该数值在灰度值范围内所占的比例，确定灰度值，例如若灰度值范围为0-225，当选择的数值为100时，灰度值可以通过44％(100/225)这一比例来表示。

S704，根据目标渐变色对待染色像素点进行染色。

换言之，将待染色区域中待染色像素点的颜色染色为目标渐变色。

在本实施例中，通过素材视频颜色表达区域中的灰度值，能够快速待染色区域中多个待染色像素点在动画特效中的染色方式。

在一个具体实施例中，S703根据颜色表达像素点的灰度值，在两种代表色之间的各渐变色中确定目标渐变色，可以包括如下步骤：根据第一代表色与第二代表色的红色值之差和颜色表达像素点的灰度值，确定红色值渐变参数；根据第一代表色与第二代表色的绿色值之差和颜色表达像素点的灰度值，确定绿色值渐变参数；根据第一代表色与第二代表色的蓝色值之差和颜色表达像素点的灰度值，确定蓝色值渐变参数；分别根据红色值渐变参数、绿色值渐变参数和蓝色值渐变参数，对第一代表色的红色值、绿色值和蓝色值进行调整，以得到目标渐变色。

在进行颜色调制时，常使用RGB色彩模式，即颜色由其红色值、绿色值以及蓝色值决定。以红色值为例，根据灰度值可以确定需要对第一代表色的红色值做出的调整大小，灰度值越小，则调整越少，得到的目标渐变色的红色值就越接近第一代表色的红色值，反之，得到的目标渐变色的红色值就越接近第二代表色的红色值。具体而言，红色值渐变参数R_渐变＝(R₂-R₁)*S，其中，R₁为第一代表色的红色值，R₂为第二代表色的红色值，S为颜色表达像素点的灰度值。利用红色值渐变参数进行调整，得到目标渐变色的红色值可以为R_目标＝R₁+R_渐变。假设第一代表色的红色值为50，第二代表色的红色值为60，而颜色表达像素点的灰度值为50％，则R_渐变为5，R_目标为55，即目标渐变色的红色值为55。对于蓝色值和绿色值的说明和具体示例与红色值类似，不再赘述。

在一个实施例中，若至少两种代表色为三种或三种以上的代表色，可以将素材视频帧中的待染色区域划分为多个区域，针对每个区域，可以从三种或三种以上的代表色中选取两种代表色对该区域中的像素点进行染色处理。

在一个具体实施例中，在S704之前，所述方法还可以包括如下步骤：

S801，确定素材视频的素材视频帧中的透明度表达区域。

为了进一步增添视觉效果，还可对待染色像素点的透明度进行调整。因此，本实施例在视频帧中划分出用于颜色表达区域和透明度表达区域，透明度表达区域用于计算颜色透明度。由于透明度表达区域和颜色表达区域中的像素点可以都是具有灰度值的像素点，透明度表达区域和颜色表达区域可以互相重合，即部分像素点可以被透明度表达区域和颜色表达区域共用，当然，两个区域也可以完全分离。在确定视频帧中的透明度表达区域时，可以读取用于确定透明度表达区域的配置信息，并根据该配置信息确定出颜色表达区域。例如，请参阅图8，视频帧为左右结构，配置信息可以视频帧被划分为左右两个区域，从而当设备读取到配置信息后，可以确定左半边区域为颜色表达区域，右半边为透明度表达区域。

S802，根据待染色像素点的位置，确定透明度表达区域中与待染色像素点关联的透明度表达像素点。

待染色像素点可以与颜色表达像素点、透明度表达像素点之间一一对应，也可以一个颜色表达像素点或透明度表达像素点对应多个待染色像素点。

具体而言，在透明度表达区域与待染色区域的大小相同或者透明度表达区域大于待染色区域的情况下，可以将待染色区域中的待染色像素点与透明度表达区域中的至少部分像素点逐一对应。或者，也可以一个透明度表达像素点对应多个待染色像素点，例如在透明度表达区域小于待染色区域的情况下，可以根据预设的像素点对应方式，确定与一个透明度表达像素点关联的多个待染色像素点。

可选地，在一一对应关系中，根据待染色像素点在待染色区域中的位置，可以选择在颜色表达区域和透明度表达区域相应位置的像素点为颜色表达像素点以及透明度表达像素点。

例如，若待染色区域的长宽分别为a和b，待染色像素点位于长度0.1a和宽度0.1b的位置，而颜色表达区域以及透明度表达区域的长宽也分别为a和b，则该待染色像素点关联的透明度表达像素点在透明度表达区域中长度0.1a和宽度0.1b的位置。

例如，图9b示出了一个素材视频帧，若素材视频帧中的待染色区域(图9中的虚线框903对应区域)与透明度表达区域重合，针对左上角顶点，当该顶点作为待染色像素点P1，可以将该顶点同时作为关联的透明度表达像素点(b1)；若待染色区域(图9中的点虚线框902对应的区域)与透明度表达区域不重合，但大小相同，在待染色像素点P2为待染色区域中心的像素点时，可以将透明度表达区域中心的像素点b2确定为与待染色像素点P2关联的透明度表达像素点；若待染色区域比颜色表达区域小(例如透明度表达区域的长宽分别为c(c＞a)和d(d＞b))，可以根据区域映射关系，从透明度表达区域中确定出与待染色区域大小相同的透明度查找区域，并将该区域中的各像素点与待染色区域中的像素点一一对应。

可选地，在一对多关系中，同一行的待染色像素点选择在颜色表达区域对应行中的任一像素点作为颜色表达像素点，即第n行的待染色像素点选择颜色表达区域第n行中任一像素点作为颜色表达像素点，并选择透明度表达区域第n行中任一像素点作为透明度表达像素点。待染色像素点与颜色表达像素点以及透明度表达像素点之间的对应关系可根据想达到的染色效果自行选择，不限于本实施例中提到的方式。

S803，根据透明度表达像素点的灰度值，确定目标透明度。

具体而言，透明度和灰度值均可以采用百分比的形式表示，因此可以使灰度值与透明度一一对应，在本步骤中，可以根据透明度表达像素点的灰度值确定待染色像素点的目标透明度。具体而言，像素点的灰度值往往具有预设的灰度值范围，即确定某个像素点的灰度值时，可以在该灰度值范围内选择某一数值作为像素点的灰度值，因此，可以通过该数值在灰度值范围内所占的比例，确定灰度值，例如若灰度值范围为0-225，当选择的数值为100时，灰度值可以通过44％(100/225)这一比例来表示，进而可以根据该比例确定目标透明度。

在一个可选的实施例中，线性映射关系可反映灰度值与透明度之间的一一对应关系，因此根据线性映射关系，可确定透明度表达像素点的灰度值对应的透明度。例如，线性映射关系为y＝x，y为颜色表达像素点的灰度值，x为目标透明度，灰度值用百分比表示为50％，则目标透明度为50％。

相应地，步骤S704根据目标渐变色对待染色像素点进行染色，可以包括如下步骤：根据目标渐变色和目标透明度对待染色像素点进行染色。

换言之，可以将待染色像素点的颜色染色为目标渐变色，且将该待染色像素点的透明度调整为目标透明度。

在其中一个实施例中，可以通过调用设备的预设接口实现对素材视频帧中像素点的染色处理，具体地，可以包括如下步骤：调用渲染组件的渲染编程接口Metal或OpenGLES，基于至少两种代表色对素材视频中多个素材视频帧的待染色像素点进行染色处理。

可以理解，移动终端在进行染色处理时，会利用GPU进行图形渲染来实现，Metal或OpenGLES为目前主流的两种渲染编程接口，性能表现较为优异。具体而言，基于矩形顶点的渲染管线下，GPU的片段着色器负责像素颜色的处理。因此，上述确定目标渐变色和目标透明度也可由GPU执行，片段着色器在确定目标渐变色和目标透明度后，对素材视频帧中的待染色像素点进行染色，得到相应的动效视频帧，最后将由多个动效视频帧组成的动态效果素材展示在播放界面的界面背景中。该方案是基于视频帧图像处理的方式实现，直接使用了滤镜链GPU编程的方式实现，跟CPU处理对比起来性能方面能达到很好的效果，非常适用于性能要求苛刻的场景。

应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

在一个实施例中，提供了一种电子设备，该电子设备可以是终端，其内部结构图可以如图10所示。该电子设备包括通过系统总线连接的处理器、存储器、通信接口、显示装置。其中，该电子设备的处理器用于提供计算和控制能力。该电子设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该电子设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以上述的播放界面处理方法的步骤。该电子设备的显示装置可以是液晶显示屏或者电子墨水显示屏，可以是触摸屏或非触摸屏。

本领域技术人员可以理解，图10中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的电子设备的限定，具体的电子设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述的播放界面处理方法的步骤。

需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (11)

1.一种播放界面处理方法，其特征在于，包括：

响应于音频播放请求，获取与待播放的目标音频关联的动态效果素材；所述动态效果素材中的每一动效视频帧是基于与所述目标音频关联的至少两种代表色对素材视频中对应的素材视频帧进行染色处理后得到的，所述动态效果素材中各像素点的颜色为所述代表色的渐变色；

在所述目标音频所对应的播放界面的界面背景中展示所述动态效果素材。

2.根据权利要求1所述的播放界面处理方法，其特征在于，在所述响应于音频播放请求，获取与待播放的目标音频关联的动态效果素材之前，还包括：

获取目标音频相关的音频封面图像和素材视频；

从所述音频封面图像提取满足预设条件的至少两种代表色；

基于所述代表色对所述素材视频中的每个素材视频帧进行染色处理，得到所述素材视频帧对应的动效视频帧，所述动效视频帧中各像素点的颜色为所述代表色的渐变色；

基于多个所述动效视频帧，获取与所述目标音频关联的动态效果素材。

3.根据权利要求2所述的播放界面处理方法，其特征在于，所述从所述音频封面图像提取出至少两种代表色包括：

根据所述音频封面图像中各像素点的色相值，将所述音频封面中各像素点划分至对应的色相区间，并确定每个色相区间的像素点数量；

从多个色相区间中确定至少两个目标色相区间，所述目标色相区间的像素点数量满足预设的像素点数量条件；

从每个目标色相区间中选择一个颜色，得到至少两种代表色。

4.根据权利要求3所述的播放界面处理方法，其特征在于，所述从每个目标色相区间中选择一个颜色，得到至少两种代表色包括：

针对每个目标色相区间，从划分至所述目标色相区间的多个像素点中，获取色彩参数与预设色彩参数最接近的像素点作为目标像素点；所述色彩参数包括明度和/或饱和度；

根据所述目标像素点的颜色确定代表色。

5.根据权利要求4所述的播放界面处理方法，其特征在于，所述根据所述目标像素点的颜色确定代表色包括：

若所述目标像素点的色彩参数与预设色彩参数的差异小于预设阈值，则以所述目标像素点的颜色为代表色；

若所述目标像素点的色彩参数与预设色彩参数的差异大于或等于预设阈值，则根据所述预设色彩参数调整所述目标像素点的颜色，将调整后的目标像素点的颜色确定为代表色。

6.根据权利要求2所述的播放界面处理方法，其特征在于，所述至少两种代表色为两种代表色，所述基于所述代表色对所述素材视频中的每个素材视频帧进行染色处理，包括：

确定所述素材视频的素材视频帧的颜色表达区域，以及，确定所述素材视频帧的待染色区域；

根据所述待染色区域中待染色像素点的位置，确定所述颜色表达区域中与所述待染色像素点关联的颜色表达像素点；

根据所述颜色表达像素点的灰度值，在所述两种代表色之间的各渐变色中确定目标渐变色；

根据所述目标渐变色对所述待染色像素点进行染色。

7.根据权利要求6所述的播放界面处理方法，其特征在于，在所述根据所述目标渐变色对所述待染色像素点进行染色之前，还包括：

确定所述素材视频的素材视频帧中的透明度表达区域；

根据所述待染色像素点的位置，确定所述透明度表达区域中与所述待染色像素点关联的透明度表达像素点；

根据所述透明度表达像素点的灰度值，确定目标透明度；

所述根据所述目标渐变色对所述待染色像素点进行染色包括：

根据所述目标渐变色和所述目标透明度对所述待染色像素点进行染色。

8.根据权利要求7所述的播放界面处理方法，其特征在于，所述根据所述透明度表达像素点的灰度值，确定目标透明度包括：

根据线性映射关系，确定所述透明度表达像素点的灰度值对应的透明度作为目标透明度。

9.根据权利要求6所述的播放界面处理方法，其特征在于，所述两种代表色包括第一代表色和第二代表色，所述根据所述颜色表达像素点的灰度值，在所述两种代表色之间的各渐变色中确定目标渐变色包括：

根据所述第一代表色与第二代表色的红色值之差和所述颜色表达像素点的灰度值，确定红色值渐变参数；根据所述第一代表色与第二代表色的绿色值之差和所述颜色表达像素点的灰度值，确定绿色值渐变参数；根据所述第一代表色与第二代表色的蓝色值之差和所述颜色表达像素点的灰度值，确定蓝色值渐变参数；

分别根据所述红色值渐变参数、所述绿色值渐变参数和所述蓝色值渐变参数，对所述第一代表色的红色值、绿色值和蓝色值进行调整，以得到所述目标渐变色。

10.一种电子设备，包括显示装置、存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至9中任一项所述的播放界面处理方法的步骤。

11.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至9中任一项所述的播放界面处理方法的步骤。

Images