一种处理视音频的方法、装置、电子设备及存储介质与流程

本发明涉及信息处理技术领域，特别是涉及一种处理视音频的方法、装置、电子设备及存储介质。

背景技术：

在相关技术中，处理视音频的方法为：由服务器端进行音视频解码、特效处理和图像渲染，再将处理好的音视频流混合后发送给web端，由web端进行实时播放和显示。该方法中，web端不需要对音视频进行处理，只负责实时播放和显示图像，然而在web端进行实时播放和显示时，由于需要服务器端实时地将处理好的音视频流发送给web端，因而存在过渡依赖网络的问题，如果网络环境不稳定或者网络速度较差，该方法就会导致实时性无法保证，会出现频繁卡顿的问题，进而导致web端的用户体验变得很差。

因此，处理视音频的相关技术方案中，由于web端的播放和显示，需要实时地从服务器端获取，因而存在过渡依赖网络、实时性较低等问题。

技术实现要素：

鉴于上述问题，本发明实施例提供一种处理视音频的方法、装置、电子设备及存储介质，旨在解决相关技术中存在的过渡依赖网络和实时性较低的问题。

为了解决上述技术问题，本发明采取以下方案实现：

第一方面，提供了一种处理视音频的方法，所述方法包括：

web端启动待编辑工程；

所述web端从存储服务器中下载携带有javascript接口的wasm相关文件，并对所述wasm相关文件进行编译，得到wasm处理模块；

在所述待编辑工程中，所述web端通过所述javascript接口，创建视音频编辑界面；

所述wasm处理模块获取待编辑视音频中的m3u8文件切片，并将所述m3u8文件切片添加到所述视音频编辑界面；

所述web端从所述存储服务器中下载特效包；

所述wasm处理模块根据所述特效包，对所述m3u8文件切片进行渲染处理。

本发明实施例的第二方面，提供了一种处理视音频的装置，所述装置包括：

启动模块，用于web端启动待编辑工程；

获取模块，用于所述web端从存储服务器中加载携带有javascript接口的wasm相关文件，并对所述wasm相关文件进行编译，得到wasm处理模块；

第一添加模块，用于在所述待编辑工程中，所述web端通过所述javascript接口，创建视音频编辑界面；

第二添加模块，用于所述wasm处理模块加载待编辑视音频中的m3u8文件切片，并将所述m3u8文件切片添加到所述视音频编辑界面；

下载模块，用于所述web端从所述存储服务器中下载特效包；

处理模块，用于所述wasm处理模块根据所述特效包，对所述m3u8文件切片进行渲染处理。

本发明实施例的第三方面，提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一方面所述的处理视音频的方法。

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

本发明实施例中，首先，web端启动待编辑工程，从存储服务器中下载携带有javascript接口的wasm相关文件，并对wasm相关文件进行编译，得到wasm处理模块；然后，在待编辑工程中，wasm处理模块通过javascript接口添加视音频轨道，并将待编辑视音频中的m3u8文件切片添加到视音频轨道上；最后，wasm处理模块通过javascript接口，从存储服务器中加载特效包，并根据加载的特效包对m3u8文件切片进行渲染处理。

由于本发明实施例中，对视音频的特效处理过程是在web端完成的，因而无论是播放还是seek定位都能实时看到渲染后的图像效果，在播放和显示的过程中，不需要依赖网络从服务器端获取，解决了相关技术中过渡依赖网络的问题，同时提高了播放和显示的实时性。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

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

图1是本发明实施例中的一种处理视音频的方法的通信环境示意图；

图2是本发明实施例中的一种处理视音频的方法的步骤流程图；

图3是本发明实施例中的一种wasm处理模块获取待编辑视音频中的m3u8文件切片的方法的步骤流程图；

图4是本发明实施例中的一种处理视音频的装置的结构示意图。

具体实施方式

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

本发明的核心构思为：基于webassembly技术，用c++语言编译出带有javascript接口的wasm相关文件，使得web端可以直接使用该wasm相关文件，实现在web端对视音频进行流媒体处理、视频图像特效渲染等处理。基于该技术构思，提出了本发明的处理视音频的方法，下面，对本发明的处理视音频的进行清楚、完整地描述。

图1是本发明实施例中的一种处理视音频的方法的通信环境示意图。参照图1，本发明的实施环境包括：服务器端100和web端200。其中，服务器端100包括转码服务器、存储服务器和合成服务器，主要用于视音频的切片处理、合成和存储；web端200包括wasm处理模块、fs和indexdb，主要用于视音频切片的编辑和特效处理。其中，服务器端100中的各功能模块分别与web端200通信连接，连接方式可以是有线连接，或者是无线连接。

下面对服务器端100和web端200终端中的各功能模块的通信连接路径进行说明：

转码服务器，与存储服务器和web端200分别进行通信连接；存储服务器，与转码服务器、合成服务器、web端200、wasm处理模块以及fs分别进行通信连接；合成服务器，与存储服务器和web端200分别进行通信连接；

wasm处理模块，与存储服务器和fs分别进行通信连接；fs，与存储服务器、wasm处理模块和indexdb分别进行通信连接；indexdb，与fs进行通信连接。其中，wasm处理模块，通过wasm相关文件携带的javascript接口，实现通信连接。

下面对各个模块的功能进行详细介绍：

转码服务器：从web端获取待编辑视音频，并对获取的待编辑视音频进行转码分片；然后，将分片后的视音频切片发送到存储服务器。

存储服务器：接收由存储服务器发送的分片后的视音频切片；将视音频切片发送给wasm处理模块；将本地存储的特效素材包发送给fs；最后，还会接收合成服务器发送的处理后的待编辑视音频的成片。需要说明的是，存储服务器用于存储与处理视音频相关的所有信息，如wasm相关文件、特效素材包、音视频切片、工程以及成片等。

合成服务器：接收由web端发送的处理后（渲染完成的）的切片信息；对接收的各切片信息进行合成，得到待编辑视音频的成片；最后，将待编辑视音频的成片发送给存储服务器。

web端：一方面，从存储服务器中下载wasm相关文件，然后根据下载的wasm相关文件得到wasm处理模块；另一方面，将本地存储的待编辑视音频上传给转码服务器。

wasm处理模块：一方面，接收由存储服务器发送的视音频切片，并将接收的视音频切片写入fs中进行缓存，当需要对视音频切片进行编辑时，再从fs中读取；另一方面，当需要对视音频切片进行渲染时，将从fs中读取渲染所需的特效功能。

fs：接收由存储服务器发送的特效素材包，并对接收的特效素材包进行临时缓存，当wasm处理模块需要使用某特效时，fs将需要使用的特效功能传输给wasm处理模块。其中，fs中缓存的所有信息（wasm相关文件、特效素材包、音视频切片等），都会写入indexdb中，由indexdb进行永久存储。

indexdb：接收fs写入的所有信息，并对这些信息进行永久存储；当fs需要某一信息时，indexdb向fs传输其所需的信息。

本发明实施例中，fs是指：一种对数据资源进行二级临时缓存的存储空间，其中存储的数据依靠操作系统提供的文件系统进行存储；indexdb是指：一种数据库类型的永久存储的存储空间，用于对数据资源进行永久存储；seek定位是指：在视音频播放时，可以准确定位到该视音频的某一播放时间点；webassembly技术是指：一种可以使用非javascript编程语言编写代码并且能在浏览器上运行的技术方案。

本发明实施例第一方面，提供了一种处理视音频的方法。参照图2，图2是本发明实施例中的一种处理视音频的方法的步骤流程图。如图2所示，该方法，具体可以包括以下步骤：

步骤s11：web端启动待编辑工程。

本实施步骤中，用户首先注册、登录，当进入编辑界面后，创建新工程或者加载已有工程。具体实施时，首先，用户在web端进行注册和/或登录；然后，当用户需要在web端的编辑界面进行编辑时，如果是要编辑新工程，则重新创建新工程，并将新工程作为待编辑工程，如果是要对已经编辑的工程进行再次编辑，则加载已有工程，并将已有工程作为待编辑工程；最后，web端启动待编辑工程。

其中，保存时，将已创建的工程这一大的数据结构写入xml里，并进行存储，再次编辑时就加载该工程，加载时，前端对xml进行解析，将大数据结构还原成编辑时的界面。同时，合成服务器也会解析一遍，实现同步合成。

步骤s12：所述web端从存储服务器中下载携带有javascript接口的wasm相关文件，并对所述wasm相关文件进行编译，得到wasm处理模块。

具体实施时，首先，编辑服务器基于webassembly技术，用c++语言编译得到wasm相关文件，并将wasm相关文件存储在存储服务器中，实现将wasm相关文件部署在服务器端；然后，web端从存储服务器中下载wasm相关文件，并对wasm相关文件进行编译和初始化，得到wasm处理模块。

其中，wasm相关文件携带有javascript接口，并且，wasm相关文件中编译有各种具有解析渲染功能的信息模块，每个信息模块对应一个视音频编辑技术或一个特效处理技术。

需要说明的是，本发明中，wasm相关文件是指：基于webassembly技术，把c++编程的一套源码生成的一系列文件，该系列文件由以.wasm为后缀的主文件和以.jps等现有的后缀为后缀的其他相关后缀的相关辅助文件组成。生成带有javascript接口的wasm相关文件的作用是：通过带有javascript接口的wasm相关文件，将c++通过webassembly技术，转换成web端可以直接调用的一些javascript接口，实现web端通过javascript接口，自动调用c++编译出来的二进制文件，进而实现web端对视音频片段的编辑和渲染。

步骤s13：在所述待编辑工程中，所述web端通过所述javascript接口，创建视音频编辑界面。

本实施例中，在待编辑工程中，web端通过javascript接口创建视音频编辑界面，并连接canvas预览窗口。为了节约资源，本发明通过定义有多种方法的javascript接口，实现创建流媒体上下文、添加视音频轨道、创建时间线等编辑功能，其中，定义的方法可以包括：创建流媒体上下文、添加视音频轨道、创建时间线、添加特效等。当用户在web端的创建视音频编辑界面，进行编辑时，web端通过javascript接口实现wasm相关文件中对应的编辑功能。其中，创建的视音频编辑界面中可以包括：流媒体上下文、视音频轨道、时间线等。

具体实施时，不管是步骤s11中的新工程还是已有工程，web端都需要创建时间线，以供在该时间线上进行编辑，而对于已有工程，由于已有工程中已存在音视频轨道，则无需加载，而对于新工程，由于新工程中没有编辑视音频的信息，则需要通过wasm相关文件的javascript接口，添加视音频轨道等编辑信息。

步骤s14：所述wasm处理模块获取待编辑视音频中的m3u8文件切片，并将所述m3u8文件切片添加到所述视音频编辑界面。

本实施例中，在所述wasm处理模块获取待编辑视音频中的m3u8文件切片之前，还需服务器端生成m3u8文件切片。生成方法为：web端将待编辑视音频上传到转码服务器，由转码服务器按照预设的配置规则，对待编辑视音频进行转码和分片，生成多个携带有切片信息的低码流的m3u8文件切片，并将生成的多个低码流的m3u8文件切片存储在存储服务器中；其中，配置规则包括配置切片信息，切片信息包括分辨率、码率和时长。

具体实施时，如果服务器端本地已存储有待编辑视音频的视音频切片，则转码服务器直接按照配置规则，将已有的视音频切片配置成低码流的音视频切片（即本发明中的m3u8文件切片）；如果服务器端本地未存储有待编辑视音频的视音频切片，则web端需要将待编辑音视频上传到服务器端中的转码服务器，由转码服务器采用了m3u8切片处理的方式，对待编辑音视频进行转码和分片，并按照配置规则生成相应分辨率、码率、时长的低码流的视音频切片。

本实施例，对生成m3u8文件的过程进行举例说明，例如，对于一个5分钟的视音频文件，设置的预设规则为分辨率为10×10，码率为256，时长为5秒，则生成的每个m3u8文件都是分辨率为10×10，码率为256，时长为5秒的切片。

本发明实施例中，采用了m3u8切片处理的方式，视频由web端上传到服务器进行分片转码，转码服务器按照配置生成相应分辨率、码率、时长的切片，也就是所要求的低码流的视音频切片（该低码流的视音频切片即本发明中的m3u8文件切片），低码流的切片可以节省更多的网络带宽，大幅提高web端渲染速度，保证web端的实时性编辑处理更流畅。

本发明实施例中，在m3u8的文件中会对切片进行自端的扩展，得到低码流的视音频切片。实际中，m3u8文件实质是一种切片信息的描述文件，至于切片视频就是把一个视频切割成很多段，然后采用m3u8文件记录这些片段的存储地址和存储名称等信息。但是在流媒体中，若只进行这些传统的切片和存储处理，所得到的切片的码流较大，不利于下载和传输，因此，在本发明中，利用分辨率、码率以及时长等这些视频流方面的额外信息，对切片进行转码，以得到满足要求的低码流的视音频切片。即，本发明中的切片处理实际上包括对待编辑视音频进行分片和转码，转码服务器按照配置生成相应分辨率、码率、时长的切片（即，低码流的视音频切片）。

在本实施例的步骤s14具体实施时，当wasm处理模块获取到待编辑视音频中的m3u8文件切片后，将m3u8文件切片添加到视音频编辑界面中的轨道上进行编辑。并且，wasm处理模块会将获取到的m3u8文件切片，写入fs中进行缓存，并由fs将m3u8文件切片写入indexdb中，由indexdb进行永久保存。

步骤s15：所述web端从所述存储服务器中下载特效包。

具体实施时，当需要对m3u8文件切片进行渲染时，首先，web端调用javascript接口，从存储服务器中下载特效包，并且将下载到fs中的特效包，由fs写入indexdb中，进行永久存储。其中，特效包中的特效包括：字幕样式、贴纸、粒子、滤镜、字体，主题等特效处理功能。

步骤s16：所述wasm处理模块根据所述特效包，对所述m3u8文件切片进行渲染处理。

具体实施时，当需要对m3u8文件切片进行渲染时，首先，web端对下载的特效包进行安装；然后wasm处理模块根据需要使用的某特效，向fs发送获取所需特效的获取信息；接着，fs根据获取信息从indexdb中的特效包中，获取所需特效，并将获取的所需特效返回给wasm处理模块；最后，wasm处理模块通过javascript接口，将读取的所需特效添加至视音频编辑界面中，并通过添加的特效对m3u8文件切片进行渲染。

在本实施例中，在对m3u8文件切片进行渲染处理的同时，本发明的方法还包括：

web端按照每个m3u8文件切片的切片信息，从存储服务器中预取下一个m3u8文件切片，并将预取的下一个m3u8文件切片下载至fs中，并继续写入indexdb中，进行永久存储；切片信息包括分辨率、码率和时长；其中，下一个m3u8文件切片为：在处理完m3u8文件切片后，待处理的m3u8文件切片。

具体实施时，在对当前m3u8文件切片进行编辑时，若处理到当前m3u8文件切片的末尾时，会提前预取下一切片，其中，提前预取的时间可以根据具体情况设置，例如设置为2min，即，距离当前视音频结束还有2min时，预取下一个切片。

本实施例中，转码服务器处理完分片任务之后生成相应m3u8文件信息，web端使用m3u8文件添加m3u8文件切片，同时在播放过程中进行预先拉取下一个m3u8文件切片，然后缓存在web端，即使网络出现问题，缓存过视音频片段同样可以进行离线编辑，保证播放预览的流畅性，用户的体验有明显改善。

本发明实施例中，本发明首先利用webassembly技术，用c++语言实现了视音频的流媒体处理、视频图像特效渲染，编译出的wasm相关文件，带有javascript接口，web端可以直接使用。wasm相关文件，部署在网站发布服务器中，web端在使用的时候下载并编译，初始化流媒体处理模块，就可以使用相应的javascript接口，创建流媒体上下文、创建时间线、添加视音频轨道、添加视音频片段、添加字幕、贴纸、粒子、滤镜、主题等特效。

由于本发明实施例中，对视音频的特效处理过程是在web端完成的，因而无论是播放还是seek定位都能实时看到渲染后的图像效果，在播放和显示的过程中，不需要依赖网络从服务器端获取，解决了相关技术中过渡依赖网络的问题，同时提高了播放和显示的实时性。在本发明的另一实施例中，接着上述步骤s16，本发明的方法还包括：

步骤s17：在渲染处理过程中，所述web端将对所述m3u8文件切片进行渲染处理得到的渲染结果以xml格式进行存储，得到xml格式的处理数据。

具体实施时，在渲染处理过程中，web端将对m3u8文件切片进行渲染处理得到的渲染结果以xml格式进行保存，得到xml格式的处理数据。

步骤s18：所述web端将所述处理数据，发送至所述合成服务器并通过所述web端的canvas预览窗口显示发送给所述合成服务器的所述处理数据。

具体实施时，web端将处理数据同步上传到合成服务器，并通过web端的canvas预览窗口显示与发送给合成服务器的处理数据对应的渲染结果。

步骤s19：所述合成服务器对同时接收到的多个所述处理数据进行合成，得到所述待编辑视音频的成片。

具体实施时，合成服务器对接收到的多个处理数据进行合成，得到待编辑视音频的成片；其中，每个成片均携带有合成地址。

步骤s110：根据所述合成地址，将所述待编辑视音频的成片存储在所述存储服务器中，并将所述合成地址返回给所述web端。

具体实施时，根据合成地址，服务器端将待编辑视音频的成片存储在存储服务器中，并将合成地址返回给web端。

步骤s111：所述web端根据所述合成地址，对所述待编辑视音频的成片进行下载和预览。

具体实施时，web端根据合成地址，对待编辑视音频的成片进行下载和预览。

本发明实施例中，当web端编辑完成，可以保存工程或者进行合成，当进行保存时，web端通过完整的xml工程结构将完成的编辑工程，保存在服务器存储中；当进行合成时，合成服务器的合成需要进行一个工程重构，所以合成服务器收到合成任务时，在web端的编辑过程中，对保存的编辑工程进行同步翻译和成片的合成，实现web端的预览与合成服务器的合成效果统一，进而实现工程化管理。其中，web端与合成服务器实时对接，信息更新保持一致，使得预览与合成效果一致，例如，预览的过程中加的贴纸是放在中间的，且合成的时候该贴纸也是在中间。

图3是本发明实施例中的一种wasm处理模块获取待编辑视音频中的m3u8文件切片的方法的步骤流程图，参照图3，在本实施例中，wasm处理模块获取待编辑视音频中的m3u8文件切片的方法，具体可以包括以下步骤：

步骤s21：所述wasm处理模块检测所述fs中，是否存储有所述m3u8文件切片。

具体实施时，由于每个m3u8文件切片均携带有切片信息，因而当需要编辑某个m3u8文件切片时，wasm处理模块根据与所需m3u8文件切片相对应的切片信息检测fs中，是否存储有与切片信息对应的m3u8文件切片。

步骤s22：若检测到所述fs中存储有所述m3u8文件切片，所述wasm处理模块从所述fs中加载所述m3u8文件切片。

具体实施时，若检测到fs中缓存有m3u8文件切片，则wasm处理模块从fs中直接加载所需的m3u8文件切片。

步骤s23：若检测到所述fs中未存储有所述m3u8文件切片，则检测所述indexdb中，是否存储有所述m3u8文件切片。

具体实施时，若检测到fs中未存储有所需m3u8文件切片，则继续根据与所需m3u8文件切片相对应的切片信息检测indexdb中，是否存储有所需m3u8文件切片。

步骤s24：若检测到所述indexdb存储有所述m3u8文件切片，则将indexdb中的所述m3u8文件切片，从所述indexdb中读取到所述fs中，所述wasm处理模块再从所述fs中加载所述m3u8文件切片。

具体实施时，若检测到indexdb中存储有所需m3u8文件切片，则将indexdb中的所需m3u8文件切片，从indexdb中读取到fs中，wasm处理模块再从fs中加载所需m3u8文件切片。

步骤s25：若检测到所述indexdb未存储有所述m3u8文件切片，则所述wasm处理模块根据所述切片信息，从所述存储服务器中的所述多个m3u8文件切片中，下载所述m3u8文件切片。

具体实施时，若检测到indexdb未存储有所需m3u8文件切片，则wasm处理模块根据切片信息，从存储服务器中的多个m3u8文件切片中，筛选出所需m3u8文件切片；然后，web端下载所需m3u8文件切片，并根据切片信息，将下载的所需m3u8文件切片写入fs中；最后，一方面，wasm处理模块从fs中读取所需m3u8文件切片，另一方面，fs将写入的所需m3u8文件切片继续写入indexdb中，进行永久存储，以供下次使用时，直接加载，而不需要依赖网络从服务器端下载。

本发明实施例中，利用本发明的缓存机制实现了大部分视音频编辑去网络化。并且，本发明中，web端缓存主要是两种类型，一种是视音频切片的缓存，一种是特效素材包的缓存。两种缓存都是保存在indexdb中的，indexdb作为数据库类型的永久存储，可以快速的异步增加、插入、修改和删除，便于数据的管理，容量相对于localstorge也大得多，能够轻松容纳缓存的这些数据。但是，由于wasm模块无法直接使用indexdb数据，所以需要把indexdb中的数据读取到fs存储空间作为二级临时缓存，提供给wasm读取使用。

本发明实施例，还提供了一种处理视音频的装置，参考图4，图4是本发明实施例中的一种处理视音频的装置的结构示意图，如图4所示，所述装置包括：

启动模块41，用于web端启动待编辑工程；

获取模块42，用于web端从存储服务器中下载携带有javascript接口的wasm相关文件，并对wasm相关文件进行编译，得到wasm处理模块；

第一添加模块43，用于在待编辑工程中，web端通过javascript接口，创建视音频编辑界面；

第二添加模块44，用于wasm处理模块获取待编辑视音频中的m3u8文件切片，并将m3u8文件切片添加到视音频编辑界面；

下载模块45，用于web端从存储服务器中下载特效包；

处理模块46，用于wasm处理模块根据特效包，对m3u8文件切片进行渲染处理。

优选地，本发明实施例的装置，还包括：

第一存储模块，用于web端将对m3u8文件切片进行渲染处理得到的渲染结果以xml格式进行存储，得到xml格式的处理数据；

发送模块，用于web端将处理数据发送至合成服务器，并通过web端的canvas预览窗口显示向合成服务器发送的处理数据；

合成模块，用于合成服务器对接收到的处理数据进行合成，得到待编辑视音频的成片；其中，成片携带有合成地址；

第二存储模块，用于根据合成地址，将待编辑视音频的成片存储在存储服务器中，并将合成地址返回给web端；

预览模块，用于web端根据合成地址，对待编辑视音频的成片进行下载和预览。

优选地，获取模块42包括：

编辑子模块，用于编辑服务器基于webassembly技术，用c++语言编译得到wasm相关文件，并将wasm相关文件存储在存储服务器，其中，wasm相关文件携带有javascript接口；

第一下载子模块，用于web端从存储服务器中，下载携带有javascript接口的wasm相关文件。

优选地，本发明实施例的装置，还包括：

上传模块，用于web端将待编辑视音频上传到转码服务器；

分片模块，用于转码服务器按照预设的配置规则，对待编辑视音频进行转码和分片，生成多个携带有切片信息的低码流的m3u8文件切片，并将生成的多个低码流的m3u8文件切片存储在存储服务器中；

其中，配置规则包括配置切片信息，切片信息包括分辨率、码率和时长。

优选地，第二添加模块44包括：

第一检测子模块，用于wasm处理模块检测fs中，是否存储有m3u8文件切片；

第一加载子模块，用于若检测到fs中存储有m3u8文件切片，wasm处理模块从fs中加载m3u8文件切片；

第二检测子模块，用于若检测到fs中未存储有m3u8文件切片，则检测indexdb中，是否存储有m3u8文件切片；

第二加载子模块，用于若检测到indexdb存储有m3u8文件切片，则将indexdb中的m3u8文件切片，从indexdb中读取到fs中，wasm处理模块再从fs中加载m3u8文件切片；

第二下载子模块，用于若检测到indexdb未存储有m3u8文件切片，则根据切片信息，wasm处理模块从存储服务器中的多个m3u8文件切片中，下载m3u8文件切片。

优选地，第二添加模块44还包括：

第一存储子模块，用于根据切片信息，wasm处理模块将获取的m3u8文件切片，存储至fs中；

第二存储子模块，用于fs将fs中存储的m3u8文件切片，存储至indexdb中。

优选地，下载模块45包括：

第三下载子模块，用于web端从存储服务器中将特效包下载至fs中；

第三存储子模块，用于fs再将特效包写入indexdb中。

优选地，处理模块46包括：

发送子模块，用于wasm处理模块向fs发送获取所需特效的获取信息；

返回子模块，用于fs根据获取信息从indexdb中的特效包中，获取所需特效，并将获取的所需特效返回给wasm处理模块；

添加子模块，用于wasm处理模块将得到的所需特效，添加至视音频编辑界面中；

渲染子模块，用于在视音频编辑界面中，wasm处理模块通过添加的所需特效，对每个m3u8文件切片进行渲染处理。

优选地，本发明实施例的装置，还包括：

预取模块，用于web端按照每个m3u8文件切片的切片信息，从存储服务器中预取下一个m3u8文件切片，并将预取的下一个m3u8文件切片存储至indexdb中；切片信息包括分辨率、码率和时长；

其中，下一个m3u8文件切片为在处理完m3u8文件切片后，待处理的m3u8文件切片。

本公开实施例，还提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，该计算机程序被处理器执行所述计算机程序时实现上述处理视音频的方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

本公开实施例，还提供了一种非临时性计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述处理视音频的方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。其中，所述的计算机可读存储介质，如只读存储器（read-onlymemory，简称rom）、随机存取存储器（randomaccessmemory，简称ram）、磁碟或者光盘等。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

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

上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本发明的保护之内。

本领域普通技术人员可以意识到，结合本发明实施例中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

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

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

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

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

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。