浏览器播放音频的方法及系统技术方案

本申请公开一种浏览器播放音频的方法，包括：S10、预先将音频文件分割为n个音频片段；S20、从所述n个音频片段中获取第i个音频片段，解码得到第i组解码音频数据，并存储至音频缓存栈，其中，i取值1至n；S30、根据所述第i组解码音频数据确定第i组波形数据，并存储至峰值数据缓存栈；S40、从所述音频缓存栈和所述峰值数据缓存栈中获取所述第i组解码音频数据和所述第i组波形数据进行同步播放；i的取值增加1并跳转至步骤S20。本申请实施例的有益效果在于：将音频文件进行分段加载，解析成频谱，这样浏览器就不会长时间停滞在一个http请求上，解决了现有技术中在浏览器播放大音频文件出现卡顿甚至卡死的问题。

The method and system of browser playing audio

The application discloses a method for playing audio by browser, which includes: S10. The audio file is divided into n audio clips in advance; S20. The ith audio clip is obtained from the N audio clips, the ith group of decoded audio data is decoded, and stored in the audio cache stack, wherein the I value ranges from 1 to N; S30. The ith group of waveform data is determined according to the ith group of decoded audio data, and Store in the peak data cache stack; S40, obtain the group I decoded audio data and the group I waveform data from the audio cache stack and the peak data cache stack for synchronous playback; increase the value of I by 1 and jump to step S20. The beneficial effect of the embodiment of the application is that the audio file is loaded in sections and parsed into a spectrum, so that the browser will not be stuck on an HTTP request for a long time, solving the problem of stuck or even stuck playing a large audio file in the browser in the prior art.

【技术实现步骤摘要】
浏览器播放音频的方法及系统
本申请涉及音频处理
，尤其涉及一种浏览器播放音频的方法及系统。
技术介绍
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的数据窗口为6本文档来自技高网...

【技术保护点】
1.一种浏览器播放音频的方法，包括：/nS10、预先将音频文件分割为n个音频片段；/nS20、从所述n个音频片段中获取第i个音频片段，解码得到第i组解码音频数据，并存储至音频缓存栈，其中，i取值1至n；/nS30、根据所述第i组解码音频数据确定第i组波形数据，并存储至峰值数据缓存栈；/nS40、从所述音频缓存栈和所述峰值数据缓存栈中获取所述第i组解码音频数据和所述第i组波形数据进行同步播放；i的取值增加1并跳转至步骤S20。/n

【技术特征摘要】
1.一种浏览器播放音频的方法，包括：
S10、预先将音频文件分割为n个音频片段；
S20、从所述n个音频片段中获取第i个音频片段，解码得到第i组解码音频数据，并存储至音频缓存栈，其中，i取值1至n；
S30、根据所述第i组解码音频数据确定第i组波形数据，并存储至峰值数据缓存栈；
S40、从所述音频缓存栈和所述峰值数据缓存栈中获取所述第i组解码音频数据和所述第i组波形数据进行同步播放；i的取值增加1并跳转至步骤S20。


2.根据权利要求1所述的方法，其中，所述预先将音频文件分割为n个音频片段包括：
识别所述音频文件类型；
当所述音频文件具备流特征时，直接将所述音频文件按照预设长度分割为n个音频片段；
当所述音频文件不具备流特征时，获取所述音频文件的文件头，并按照预设长度将所述音频文件的数据部分分割为n个数据片段；
根据所述文件头为所述n个数据片段中的每个添加文件头得到n个音频片段。


3.根据权利要求1所述的方法，其中，所述从所述n个音频片段中获取第i个音频片段包括：
通过ws协议接口从所述n个音频片段中获取第i个音频片段。


4.根据权利要求1所述的方法，其中，所述从所述音频缓存栈和所述峰值数据缓存栈中获取所述第i组解码音频数据和所述第i组波形数据进行同步播放包括：
当监听到播放指令之后，从所述音频缓存栈中获取所述第i组解码音频数据进行播放；同时，
从所述峰值数据缓存栈中获取所述第i组波形数据同步绘制波形。


5.一种浏览器播放音频的系统，包括：
音频分割程序模块，用于预先将音频文件分割为n个音频片段；
音频缓存栈程序模块，用于从所述n个音频片段中获取第i个音频片段，解码得到第i组解码音频数据，并存储至音频缓存栈，其中，i取值1至n；
峰值数据缓存栈程序模块，...

【专利技术属性】
技术研发人员：周祥，
申请(专利权)人：苏州思必驰信息科技有限公司，
类型：发明
国别省市：江苏;32