浏览器播放音频的方法及系统与流程

本申请涉及音频处理技术领域，尤其涉及一种浏览器播放音频的方法及系统。

背景技术：

wavesurfer.js是一款基于html5canvas和webaudio的音频播放器插件。能够在浏览器上实现加载网络音频资源，具有播放，暂停等交互功能，并且能够根据音频信息，生成频谱图的播放效果。

但是，wavesurfer.js至少存在以下缺陷：

加载大音频时会非常缓慢，浏览器会卡顿甚至假死；

在大音频场景下绘制频谱图，会占用巨大的内存，浏览器会闪退，假死等。

技术实现要素：

本申请实施例提供一种浏览器播放音频的方法及系统，用于至少解决上述技术问题之一。

第一方面，本申请实施例提供一种浏览器播放音频的方法，包括：

s10、预先将音频文件分割为n个音频片段；

s20、从所述n个音频片段中获取第i个音频片段，解码得到第i组解码音频数据，并存储至音频缓存栈，其中，i取值1至n；

s30、根据所述第i组解码音频数据确定第i组波形数据，并存储至峰值数据缓存栈；

s40、从所述音频缓存栈和所述峰值数据缓存栈中获取所述第i组解码音频数据和所述第i组波形数据进行同步播放；i的取值增加1并跳转至步骤s20。

第二方面，本申请实施例提供一种浏览器播放音频的系统，包括：

音频分割程序模块，用于预先将音频文件分割为n个音频片段；

音频缓存栈程序模块，用于从所述n个音频片段中获取第i个音频片段，解码得到第i组解码音频数据，并存储至音频缓存栈，其中，i取值1至n；

峰值数据缓存栈程序模块，用于根据所述第i组解码音频数据确定第i组波形数据，并存储至峰值数据缓存栈；

播放程序模块，用于从所述音频缓存栈和所述峰值数据缓存栈中获取所述第i组解码音频数据和所述第i组波形数据进行同步播放；

跳转程序模块，用于将i的取值增加1，并跳转至所述音频缓存栈程序模块。

第三方面，本申请实施例提供一种存储介质，所述存储介质中存储有一个或多个包括执行指令的程序，所述执行指令能够被电子设备(包括但不限于计算机，服务器，或者网络设备等)读取并执行，以用于执行本申请上述任一项浏览器播放音频的方法。

第四方面，提供一种电子设备，其包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本申请上述任一项浏览器播放音频的方法。

第五方面，本申请实施例还提供一种计算机程序产品，所述计算机程序产品包括存储在存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，使所述计算机执行上述任一项浏览器播放音频的方法。

本申请实施例的有益效果在于：将音频文件进行分段加载，解析成频谱，这样浏览器就不会长时间停滞在一个http请求上，解决了现有技术中在浏览器播放大音频文件出现卡顿甚至卡死的问题。

附图说明

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

图1为本申请的浏览器播放音频的方法的一实施例的流程图；

图2为本申请的浏览器播放音频的方法的另一实施例的流程图；

图3为本申请的浏览器播放音频的方法中的频谱渲染过程示意图；

图4为本申请的浏览器播放音频的系统的原理框图；

图5为本申请的浏览器播放音频的系统中的音频分割程序模块的一实施例示意图；

图6为本申请的电子设备的一实施例的结构示意图。

具体实施方式

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

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、元件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

在本申请中，“模块”、“装置”、“系统”等指应用于计算机的相关实体，如硬件、硬件和软件的组合、软件或执行中的软件等。详细地说，例如，元件可以、但不限于是运行于处理器的过程、处理器、对象、可执行元件、执行线程、程序和/或计算机。还有，运行于服务器上的应用程序或脚本程序、服务器都可以是元件。一个或多个元件可在执行的过程和/或线程中，并且元件可以在一台计算机上本地化和/或分布在两台或多台计算机之间，并可以由各种计算机可读介质运行。元件还可以根据具有一个或多个数据包的信号，例如，来自一个与本地系统、分布式系统中另一元件交互的，和/或在因特网的网络通过信号与其它系统交互的数据的信号通过本地和/或远程过程来进行通信。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”，不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

如图1所示，本申请的实施例提供一种浏览器播放音频的方法，包括：

s10、预先将音频文件分割为n个音频片段；

示例性地，识别所述音频文件类型；示例性地，音频文件类型包括wav，mp3和acc(包括adts和adif)。其中，mp3和adts格式为一个类型，具备流特征；wav和adif格式为一个类型，不具备流特征。

当所述音频文件具备流特征时，直接将所述音频文件按照预设长度分割为n个音频片段；示例性地，预设长度可以为5分钟。

当所述音频文件不具备流特征时，获取所述音频文件的文件头，并按照预设长度将所述音频文件的数据部分分割为n个数据片段；

根据所述文件头为所述n个数据片段中的每个添加文件头得到n个音频片段。

s20、从所述n个音频片段中获取第i个音频片段，解码得到第i组解码音频数据，并存储至音频缓存栈，其中，i取值1至n；

示例性地，可以通过ws协议接口从所述n个音频片段中获取第i个音频片段。音频加载接口采用ws协议，可以利用ws的数据窗口为64kb的特性，去逐段的加载音频，然后解析等后续一系列操作。由于ws协议有很好的隐蔽性，可以防止audio资源被人从网页上下载下来。

s30、根据所述第i组解码音频数据确定第i组波形数据，并存储至峰值数据缓存栈；

s40、从所述音频缓存栈和所述峰值数据缓存栈中获取所述第i组解码音频数据和所述第i组波形数据进行同步播放；i的取值增加1并跳转至步骤s20。

示例性地，所述从所述音频缓存栈和所述峰值数据缓存栈中获取所述第i组解码音频数据和所述第i组波形数据进行同步播放包括：当监听到播放指令之后，从所述音频缓存栈中获取所述第i组解码音频数据进行播放；同时，从所述峰值数据缓存栈中获取所述第i组波形数据同步绘制波形。

本申请实施例中将大音频文件进行分段加载，预先将该大音频文件切割成5分钟的片段，逐片段的加载，解析成频谱。这样，浏览器就不会长时间停滞在一个http请求上。解决了现有技术中在浏览器播放大音频文件出现卡顿甚至卡死的问题。

此外，本申请实施例中在进行分段加载时采用了分段加载并缓存的方式，从而能够使得音频文件更加顺畅的播放，而且可以进行方便快捷的回放。

进一步地，本申请实施例中在分段加载缓存时，对解码得到的音频数据以及用于绘制波形图的波形数据进行了独立的缓存，而且是波形数据是基于已经缓存下来的音频数据计算得到并进行缓存的，而没有在分段解码音频文件时同步进行波形数据的计算，原因在于发明人在实现本申请的过程中发现，无论是解码音频片段还是计算波形数据都是需要占用很多计算资源(例如cpu的占用)的，如果同时进行则会导致浏览器的卡顿甚至卡死等现象的发生，因此本申请实施例中将两者分步进行缓存，并且波形数据还是在解码得到的音频数据的基础上进行计算得到的，这在一定程度上也避免了重复解码音频片段导致的资源开销及时间成本。

如图2所示，为本申请的浏览器播放音频的方法的另一实施例的流程图，该图中具体示出了分段加载过程，从图中可以开出，音频资源预先划分成了多个片段：第一段、第二段、第三段……。

在浏览器端发出加载视频的请求，从而逐段的加载音频资源，示例性地，首先加载第一段音频片段，并对其进行解码；

将对第一段音频片段进行解码得到的音频数据存储到预先配置的音频缓存栈，存储为相应的存储为第一段解码音频数据；

之后基于存储的第一段解码音频数据计算得到相应的波形数据(例如，波形峰值数据)，并将该波形数据存储到预先配置的波形数据缓存栈，存储为第一段波形数据；

之后继续加载第二端音频片段，并重复以上步骤；或者

如果检测到播放指令，则获取已经缓存的解码音频数据和波形数据进行音频和波形的同步播放，同时继续加载第二端音频片段，并重复以上步骤。

发明人在实现本申请的过程中发现从音频数据计算出audiobuffer(音频缓存)和peak(波峰)数据是非常消耗cpu的操作，而绘制过程的间隔最起码要保证24ms。如果24ms内，音频数据要重新解析成audiobuffer和计算peak，可能会发生卡帧的现象。所以为了防止卡帧，本申请在第一次下载完音频就把解析完成的audiobuffer和计算出来的peak值都缓存起来。此外，计算peak也是一个很消耗cpu的操作，并且peak值的多少取决于图形的细腻度，如果细腻度越细，计算量越大。本申请实施例的好处在于：播放和绘制过程能保证连贯性，人耳和人眼会察觉不出短暂时间，通过空间来换取时间。

在一些实施例中，所述波形数据至少包括波形峰值数据；所述从所述峰值数据缓存栈中获取所述第i组波形数据同步绘制波形包括：

根据当前播放时间和预设距离，计算出需要从所述峰值数据缓存栈的所述第i组波形数据中获取的峰值数据；

根据预设宽度的canvas对所述获取的峰值数据进行渲染得到波形。

示例性地，如图3所示，为本申请的浏览器播放音频的方法中的频谱渲染过程示意图，在该渲染过程中采用24ms时间帧进行画面的刷新，并且在下一个24ms时，获取已播放的时间，然后根据播放的时间和距离，从peakstack(波峰栈)中计算出所需渲染要用的peak，最后根据peak和canvas的宽度进行渲染即可。

示例性地，播放的时间指音频已经播放过的时长，“距离”指已经播放过的时长×波形图移动长度/每秒；

根据“播放的时间”和“距离”计算得到需要的peak的步骤如下：

-1，图形起点的peak的index＝指针位置÷波形图移动长度/每秒；

图形终点的peak的index＝(指针位置+canvas长度)÷波形图移动长度/每秒；

通过起点的index，终点的index，从peaks缓存中获取一段peak，重新绘制canvas。

-2，如果“距离”％“波形宽度”>0，也是说最左边的一格波形，在下一帧画面还存在一部分；

那么，根据(“距离”％“波形宽度”)得到的余数，下一次重新绘制时，所有波形格都向右偏移“余数”距离。

这样视觉效果就会非常连贯。因为canvas层级复杂，所以计算过程中需要的变量要极其可靠，利用动画的原理，在极短的时间内，在一个固定宽度的canvas中连续重新绘制，效果同样是流动效果，但是却节省内存。

在一些实施例中，本申请的浏览器播放音频的方法可以实现分段播放、速度控制、前进及后退等操作，具体示例如下：

1、分段播放：在播放时，会监听播放器事件，实时计算当前的播放时间等播放状态，当到达分段音频的duration最后时，会根据播放总时长计算出下一段音频的index，从缓存拿出audiobuffer，给播放器设置状态，播放器播放音频。

示例性地，播放器播放过程中会触发onaudioprocess事件，监听事件后，根据当前的播放状态，计算数据，然后擦除掉canvas波形，重新绘制。因为事件触发是毫秒级，所以人眼看到的波形仍然是连续的。

播放状态包括：暂停，播放，结束。当播放状态为“播放”时，计算相关播放数据和绘制数据。

1.1、播放数据包括以下数据：

指针位置/波形总长度＝已播放的时长/总时长；

波形总长度＝总时长×设置的参数；其中，设置的参数为波形图移动长度/每秒；

已播放时长＝指针位置÷波形总长度×总时长；

分段音频的index＝已播放的时长÷分段音频时长+1；

分段音频已播放的时长＝已播放的时长％分段音频时长；

通过分段音频已播放的时长，以及自身的总时长，可以判断出当前播放的分段音频是否已经到了自身尾部；

如果分段音频到了自身尾部，通过(分段音频的index+1)，得到下一段分段音频，进行播放；

如果该分段音频已经是最后一个音频，并且到了自身尾部，那么给播放器设置finish状态，触发finish事件。

1.2、绘制数据包括以下数据：

图形起点的peak的index＝指针位置÷波形图移动长度/每秒；

图形终点的peak的index＝(指针位置+canvas长度)÷波形图移动长度/每秒；

通过起点的index，终点的index，从peaks缓存中获取一段peak，重新绘制canvas。

在一些实施例中，擦除掉前一次触发的播放事件后，计算数据得出的peaks绘制出来的波形。因为是实时触发的事件，人眼会感觉不出短暂暂停，看到的画面仍然是连续的。

播放是一个连续的过程，过程中播放器会实时触发onaudioprocess事件，触发事件后执行以下步骤：

(1)计算播放数据，是否finish，是否需要寻找下一段音频；

(2)计算绘制数据，即绘制波形需要的peaks->擦除canvas->重新绘制；

(3)重复以下步骤(1)和(2)。

2、速度控制：设置播放速度时，会把每个分段source重新设置播放速度的属性。

3、前进/后退：在播放时前进/后退，会根据播放指针所在的位置，计算出duration等信息，然后再计算出属于哪个分段音频，以及该分段音频的start和end，然后播放。

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

如图4所示，本申请的实施例还提供一种浏览器播放音频的系统400，包括：

音频分割程序模块410，用于预先将音频文件分割为n个音频片段；

音频缓存栈程序模块420，用于从所述n个音频片段中获取第i个音频片段，解码得到第i组解码音频数据，并存储至音频缓存栈，其中，i取值1至n；

峰值数据缓存栈程序模块430，用于根据所述第i组解码音频数据确定第i组波形数据，并存储至峰值数据缓存栈；

播放程序模块440，用于从所述音频缓存栈和所述峰值数据缓存栈中获取所述第i组解码音频数据和所述第i组波形数据进行同步播放；

跳转程序模块450，用于将i的取值增加1，并跳转至所述音频缓存栈程序模块。

如图5所示，在一些实施例中所述音频分割程序模块410包括：

类型识别单元411，用于识别所述音频文件类型；

第一分割单元412，用于当所述音频文件具备流特征时，直接将所述音频文件按照预设长度分割为n个音频片段；

第二分割单元413，用于当所述音频文件不具备流特征时，获取所述音频文件的文件头，并按照预设长度将所述音频文件的数据部分分割为n个数据片段；

数据组包单元414，用于根据所述文件头为所述n个数据片段中的每个添加文件头得到n个音频片段。

在一些实施例中，所述从所述n个音频片段中获取第i个音频片段包括：

通过ws协议接口从所述n个音频片段中获取第i个音频片段。

在一些实施例中，所述从所述音频缓存栈和所述峰值数据缓存栈中获取所述第i组解码音频数据和所述第i组波形数据进行同步播放包括：

当监听到播放指令之后，从所述音频缓存栈中获取所述第i组解码音频数据进行播放；同时，

从所述峰值数据缓存栈中获取所述第i组波形数据同步绘制波形。

在一些实施例中，所述波形数据至少包括波形峰值数据；所述从所述峰值数据缓存栈中获取所述第i组波形数据同步绘制波形包括：

根据当前播放时间和预设距离，计算出需要从所述峰值数据缓存栈的所述第i组波形数据中获取的峰值数据；

根据预设宽度的canvas对所述获取的峰值数据进行渲染得到波形。

在一些实施例中，本申请实施例提供一种非易失性计算机可读存储介质，所述存储介质中存储有一个或多个包括执行指令的程序，所述执行指令能够被电子设备(包括但不限于计算机，服务器，或者网络设备等)读取并执行，以用于执行本申请上述任一项浏览器播放音频的方法。

在一些实施例中，本申请实施例还提供一种计算机程序产品，所述计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，使所述计算机执行上述任一项浏览器播放音频的方法。

在一些实施例中，本申请实施例还提供一种电子设备，其包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行浏览器播放音频的方法。

在一些实施例中，本申请实施例还提供一种存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现浏览器播放音频的方法。

上述本申请实施例的浏览器播放音频的系统可用于执行本申请实施例的浏览器播放音频的方法，并相应的达到上述本申请实施例的实现浏览器播放音频的方法所达到的技术效果，这里不再赘述。本申请实施例中可以通过硬件处理器(hardwareprocessor)来实现相关功能模块。

图6是本申请另一实施例提供的执行浏览器播放音频的方法的电子设备的硬件结构示意图，如图6所示，该设备包括：

一个或多个处理器610以及存储器620，图6中以一个处理器610为例。

执行浏览器播放音频的方法的设备还可以包括：输入装置630和输出装置640。

处理器610、存储器620、输入装置630和输出装置640可以通过总线或者其他方式连接，图6中以通过总线连接为例。

存储器620作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本申请实施例中的浏览器播放音频的方法对应的程序指令/模块。处理器610通过运行存储在存储器620中的非易失性软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例浏览器播放音频的方法。

存储器620可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据浏览器播放音频的装置的使用所创建的数据等。此外，存储器620可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器620可选包括相对于处理器610远程设置的存储器，这些远程存储器可以通过网络连接至浏览器播放音频的装置。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置630可接收输入的数字或字符信息，以及产生与浏览器播放音频的装置的用户设置以及功能控制有关的信号。输出装置640可包括显示屏等显示设备。

所述一个或者多个模块存储在所述存储器620中，当被所述一个或者多个处理器610执行时，执行上述任意方法实施例中的浏览器播放音频的方法。

上述产品可执行本申请实施例所提供的方法，具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本申请实施例所提供的方法。

本申请实施例的电子设备以多种形式存在，包括但不限于:

(1)移动通信设备:这类设备的特点是具备移动通信功能，并且以提供话音、数据通信为主要目标。这类终端包括:智能手机(例如iphone)、多媒体手机、功能性手机，以及低端手机等。

(2)超移动个人计算机设备:这类设备属于个人计算机的范畴，有计算和处理功能，一般也具备移动上网特性。这类终端包括:pda、mid和umpc设备等，例如ipad。

(3)便携式娱乐设备:这类设备可以显示和播放多媒体内容。该类设备包括:音频、视频播放器(例如ipod)，掌上游戏机，电子书，以及智能玩具和便携式车载导航设备。

(4)服务器:提供计算服务的设备，服务器的构成包括处理器、硬盘、内存、系统总线等，服务器和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。

(5)其他具有数据交互功能的电子装置。

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

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如rom/ram、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。