一直觉得网易云音乐的用户体验很好，很早就注意到里面的鲸鱼音效，如下图，是一个随音乐节拍跳动的环形特效。gif动画效果可能不理想。您可以直接在手机上体验。作为一个有着本能的好奇和探索的前端，当然会做一些研究。如何在页面上实现这种效果？1.AudioContext其实这种动画效果的原理并不复杂。你需要一堆数据来表达每个块的高度，然后通过某种方式让前景渲染可见。如何获取音乐的实时节拍数据？这里使用AudioContextAudioContext接口来表示音频模块连接的音频处理图，每个模块对应一个AudioNode。AudioContext可以控制它包含的节点的创建，以及音频处理和解码操作的执行。在做任何事情之前创建一个AudioContext对象，因为一切都发生在这个环境中。本段摘自https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext。里面有很多方法。具体可以参考具体文档。下面我们只介绍其中几个我们用到的。1.1AudioContext.createAnalyser()AudioContext的createAnalyser()方法可以创建一个AnalyserNode，用于获取音频时频数据，实现数据可视化。varaudioCtx=newAudioContext();varanalyzer=audioCtx.createAnalyser();这里返回的是一个AnalyserNode对象。AnalyserNode赋予节点信息，可以提供实时的频域和时域分析。它使AudioNode将未修改的音频流从输入传递到输出，但允许您获取结果数据、处理它并创建音频可视化。AnalyserNode还有很多属性AnalyserNode.fftSizeAnalyserNode接口的fftSize属性的值是一个无符号长整数值，表示（信号）样本的窗口大小。这些（信号）样本用于在执行快速傅立叶变换(FFT)时获取频域数据。fftSize属性的值必须是2的非零幂，范围从32到32768；默认值为2048。AnalyserNode.frequencyBinCount只读frequencyBinCount的值固定为AnalyserNode接口中fftSize值的一半。该属性通常用于可视化的数据值个数。1.2AudioContext.createMediaElementSource()AudioContext的createMediaElementSource()方法用于新建一个MediaElementAudioSourceNode对象，输入一个已有的HTML
