HTML5 随音乐节奏变化的频谱图动画

最新推荐文章于 2024-10-10 09:56:47 发布

weixin_30609331

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量2.2k

点赞数 1

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/liuyq/p/4296923.html

版权

本文分享了如何使用HTML5结合JavaScript创建一个随音乐节奏变化的频谱图动画，通过解析音频数据，动态绘制频谱效果。

摘要由CSDN通过智能技术生成

这里将要介绍的HTML5 音频处理接口与Audio标签是不一样的。页面上的Audio标签只是HTML5更语义化的一个表现，而HTML5提供给JavaScript编程用的Audio API则让我们有能力在代码中直接操作原始的音频流数据，对其进行任意加工再造。

展示HTML5 Audio API 最典型直观的一个例子就是跟随音乐节奏变化的频谱图，也称之为可视化效果。本文便是以此为例子展示JavaScript中操作音频数据的。

文中代码仅供参考，实际代码以下载的源码为准。

了解Audio API
一段音频到达扬声器进行播放之前，半路对其进行拦截，于是我们就得到了音频数据了，这个拦截工作是由window.AudioContext来做的，我们所有对音频的操作都基于这个对象。

通过AudioContext可以创建不同各类的 AudioNode，即音频节点，不同节点作用不同，有的对音频加上滤镜比如提高音色(比如BiquadFilterNode)，改变单调，有的音频进行分割，比如将音源中的声道分割出来得到左右声道的声音（ChannelSplitterNode），有的对音频数据进行频谱分析即本文要用到的 (AnalyserNode)。

浏览器中的Audio API
统一前缀
JavaScript中处理音频首先需要实例化一个音频上下文类型window.AudioContext。目前Chrome和Firefox对其提供了支持，但需要相应前缀，Chrome中为window.webkitAudioContext，Firefox中为mozAudioContext。所以为了让代码更通用，能够同时工作在两种浏览器中，只需要一句代码将前缀进行统一即可。

window.AudioContext =
window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;

这是一种常见的用法，或者操作符'||' 连接起来的表达式中，遇到真值即返回。比如在Chrome中，window.AudioContext为undefined，接着往下走，碰到 window.webkitAudioContext不为undefined，表达式在此判断为真值，所以将其返回，于是此时 window.AudioContext =window.webkitAudioContext ，所以代码中我们就可以直接使用window.AudioContext 而不用担心具体Chrome还是Firefox了。

var audioContext=new window.AudioContext();

考虑浏览器不支持的情况
  但这还只是保证了在支持AudioContext的浏览器中能正常工作，如果是在IE中，上面实例化对象的操作会失败，所以有必要加个try catch语句来避免报错。
try {
   var audioContext = new window.AudioContext();
} catch (e) {
    Console.log('!Your browser does not support AudioContext');
}

这样就安全多啦，妈妈再不担心浏览器报错了。

组织代码
为了更好地进行编码，我们创建一个Visualizer对象，把所有相关属性及方法写到其中。按照惯例，对象的属性直接写在构造器里面，对象的方法写到原型中。对象内部使用的私有方法以短横线开头，不是必要但是种好的命名习惯。其中设置了一些基本的属性将在后续代码中使用，详细的还请参见源码，这里只简单展示。

 var Visualizer = function() {
    this.file = null, //要处理的文件，后面会讲解如何获取文件
    this.fileName = null, //要处理的文件的名，文件名
    this.audioContext = null, //进行音频处理的上下文，稍后会进行初始化
    this.source = null, //保存音频
 };
 Visualizer.prototype = {
   _prepareAPI: function() {
     //统一前缀，方便调用
     window.AudioContext =
       window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
    //这里顺便也将requestAnimationFrame也打个补丁，后面用来写动画要用
    window.requestAnimationFrame = 
           window.requestAnimationFrame || window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
   //安全地实例化一个AudioContext并赋值到Visualizer的audioContext属性上，方便后面处理音频使用
   try {
       this.audioContext = new AudioContext();
    } catch (e) {
        console.log('!妳的浏览器不支持AudioContext:(');
        console.log(e);
    }
  },
 }

加载音频文件
不用说，你肯定得先在代码中获取到音频文件，才能够对其进一步加工。

文件获取的方法: 读取文件到JavaScript可以有以下三种方法：
1.新开一个Ajax异步请求来获取文件，如果是本地测试需要关掉浏览器的同源安全策略才能获取成功，不然只能把网页放到服务器上才能正常工作。
具体说来，就是先开一个XMLHttpRequest请求，将文件路径作为请求的URL，并且设置请求返回类