一种将WebRTC音频流转化成粒子动画效果的方法技术

本发明专利技术公开一种将WebRTC音频流转化成粒子动画效果的方法。本发明专利技术所提供的粒子动画效果方法能够很好的解决从WebRTC音频流转化为诸如粒子动画特效之类的可视化效果的整个流程所遇到的一系列问题，包括但不限于网络音频跨域、音频增益处理、浏览器渲染性能问题，也能为WebRTC实时音视频中的音频也提供可视化效果的反馈。果的反馈。

【技术实现步骤摘要】
一种将WebRTC音频流转化成粒子动画效果的方法


[0001]本专利技术涉及计算机软件开发领域，尤其涉及一种将WebRTC音频流转化成粒子动画效果的方法。

技术介绍

[0002]浏览器的AudioContext API的AudioNode接口下的AnalyserNode API具有getFloatFrequencyData()、getByteFrequencyData()、getFloatTimeDomainData()及getByteTimeDomainData()方法，使用这几个方法可获取当前频域、波形及时域数据。
[0003]因WebRTC是实时音视频流，目前各大主流浏览器对于数据源是网络音频流时，有一定几率会出现音频数据无法读取的问题；且需要对音频数据做一定增益处理以应对声音可能过小的问题；且将数据源读取并转化为粒子动画的可视化效果，需要考虑到性能问题，对音频数据进行部分采样，并在每帧数据获取到时，初始化一定数量的粒子，再选取合适的函数制造出所需的粒子漂浮动画的效果。
[0004]因此，现有技术存在缺陷，需要改进。

技术实现思路

[0005]本专利技术的目的是克服现有技术的不足，提供一种将WebRTC音频流转化成粒子动画效果的方法，使用该方法将进行WebRTC的音频流进行抓包及频率数据分析，并将频率数据映射转化成粒子特效的动画效果。
[0006]本专利技术的技术方案如下：提供一种将WebRTC音频流转化成粒子动画效果的方法，包括如下步骤：
[0007]步骤1：创建一个新的AudioContext实例，命名为_analyser；
[0008]步骤2：通过_analyser的createAnalyser()API，创建一个AnalyserNode实例，命名为analyser；
[0009]步骤3：指定analyser的fftSize属性的值；
[0010]步骤4：通过analyser的createGain()API，创建一个GainNode实例，命名为gainNode；
[0011]步骤5：执行gainNode的connect(_analyser.destination)方法，将AudioContext中所有音频的最终目标节点输出到gainNode，执行音量增益处理；
[0012]步骤6：执行analyser的connect(gainNode)方法，将音量增益处理过后的节点输出到analyser分析器节点；
[0013]步骤7：执行_analyser的createMediaElementSource(audioEl)方法，将video标签与音频分析器analyser进行音频源的关联；定义一个MediaElementAudioSourceNode类型的节点，命名为audioSource，并设置其值为上述音频源的关联源；
[0014]步骤8：执行audioSource的connect(analyser)方法，将analyser分析器节点输出到audioSource节点；
[0015]步骤9：传入analyser的frequencyBinCount属性，frequencyBinCount属性的值为fftSize值的一半，用于创建一个新的Uint8Array实例，命名为visualArr；
[0016]步骤10：若当前浏览器需要有用户交互行为才可以使用Javascript代码进行播放，则在页面添加一个交互事件的监听；
[0017]步骤11：结合requestAnimationFrame()API来执行analyser的getByteFrequenecyData(visualArr)方法的执行来对每帧的数据进行读取；
[0018]步骤12：使用canvas进行样点绘制，设置canvas的width和height，对canvas标签进行getContext(
‘
2d
’
)方法的执行来获取上下文，命名为context；
[0019]步骤13：执行context.moveTo(x,y)方法以确定起点，执行context.lineTo(x,y)方法以确定终点，并设置context的lineWidth属性及strokeStyle属性，最后执行context.stroke()方法以绘制一条直线作为粒子生成的位置；
[0020]步骤14：每帧数据进行随机采样，取若干个音频样点作为数据，一个样点设置若干个粒子；
[0021]步骤15：每当每帧数据被获取到时，创建若干个粒子实例，可使用context.arc(width,height,r,0,2*Math.PI)方法来决定粒子的位置和大小，最后执行context.draw()来执行粒子的绘制；
[0022]步骤16：定义一个固定时间的值，命名为time，通过进行粒子生成的时间以及time时间的比较来计算粒子的透明度，当time时间后，粒子透明度为0，粒子实例进行销毁；
[0023]步骤17：每帧粒子绘制前，先执行context.clearRect(0,0,canvas.width,canvas.height)清除画布，再重复执行步骤13至步骤16进行新一帧的绘制。
[0024]进一步地，在所述步骤5中，音量增益处理为使用指数插值方法来进行音频增益。
[0025]进一步地，在所述步骤10中，监听的具体步骤为：当用户进行诸如鼠标点击或键盘敲击等交互行为时，检测_analyser的state属性，若为suspended，则执行_analyser的resume()方法恢复之前暂停播放的音频。
[0026]进一步地，在所述步骤14中，具体的采样方式为：先以直线的长度除以音频样点的个数，来决定粒子所属音频样点在直线上的初始位置，再随机生成偏移值来决定具体到各个粒子在直线上的初始位置。
[0027]进一步地，在粒子生成后，以获取到的帧数据对粒子的位置进行系数加权计算，让粒子的偏移量根据声音的大小进行调整，同时通过正弦函数的计算，让粒子朝左右漂浮更为均匀。
[0028]采用上述方案，本专利技术所提供的粒子动画效果方法能够很好的解决从WebRTC音频流转化为诸如粒子动画特效之类的可视化效果的整个流程所遇到的一系列问题，包括但不限于网络音频跨域、音频增益处理、浏览器渲染性能问题，也能为WebRTC实时音视频中的音频也提供可视化效果的反馈。
具体实施方式
[0029]以下结合具体实施例，对本专利技术进行详细说明。
[0030]本专利技术提供一种将WebRTC音频流转化成粒子动画效果的方法，包括如下步骤：
[0031]步骤1：创建一个新的AudioContext实例，指的是由链接在一起的音频模块构建的
音频处理图，命名为_analyser。
[0032]步骤2：通过_analyser的createAnalyser()API，创建一个AnalyserNode实例，指的是一个可以本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种将WebRTC音频流转化成粒子动画效果的方法，其特征在于，包括如下步骤：步骤1：创建一个新的AudioContext实例，命名为_analyser；步骤2：通过_analyser的createAnalyser()API，创建一个AnalyserNode实例，命名为analyser；步骤3：指定analyser的fftSize属性的值；步骤4：通过analyser的createGain()API，创建一个GainNode实例，命名为gainNode；步骤5：执行gainNode的connect(_analyser.destination)方法，将AudioContext中所有音频的最终目标节点输出到gainNode，执行音量增益处理；步骤6：执行analyser的connect(gainNode)方法，将音量增益处理过后的节点输出到analyser分析器节点；步骤7：执行_analyser的createMediaElementSource(audioEl)方法，将video标签与音频分析器analyser进行音频源的关联；定义一个MediaElementAudioSourceNode类型的节点，命名为audioSource，并设置其值为上述音频源的关联源；步骤8：执行audioSource的connect(analyser)方法，将analyser分析器节点输出到audioSource节点；步骤9：传入analyser的frequencyBinCount属性，frequencyBinCount属性的值为fftSize值的一半，用于创建一个新的Uint8Array实例，命名为visualArr；步骤10：若当前浏览器需要有用户交互行为才可以使用Javascript代码进行播放，则在页面添加一个交互事件的监听；步骤11：结合requestAnimationFrame()API来执行analyser的getByteFrequenecyData(visualArr)方法的执行来对每帧的数据进行读取；步骤12：使用canvas进行样点绘制，设置canvas的width和height，对canvas标签进行getContext(
‘
2d
’
)方...

【专利技术属性】
技术研发人员：王健，邹琼，周双全，
申请(专利权)人：深圳市瑞云科技股份有限公司，
类型：发明
国别省市：