Web Audio API 实现音频可视化

  声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢!

  一转眼就已经有三个月没写博客了,毕业季事情确实多,现在也终于完全毕业了,博客还是不能落下。偶尔还是要写一下。

  玩HTML5的Audio API是因为之前看到博客园里有关于这个的博客,觉得挺好玩的,所以就学习了一下。本文仅作为自己的学习记录。如有错误之处请指出。

    最终的效果也就如右图,园友们可以自己去玩一下 

  

  DEMO链接:请戳我!!!   可以选择本地音频文件进行播放,也可以听楼主的音乐哈

  同时,这个API目前浏览器支持度不高,PC浏览器支持较好的仅firefox、chrome以及safari,移动端就更少的,android5.0才支持,safari是6.1以上版本支持。

  因此,若要用于生产环境,请自行斟酌。

 

  WebAudio从获取数据到播放整个流程可以用一张图解释:

  

  有点像nodejs里的pipe流式传输,input是Audio的输入节点,可以为buffer,也可以为audio对象。Effects为各个操控音频的节点,我自己用到的就只有GainNode以及AnalyserNode,GainNode可以用来控制音频音量的大小,默认值为0,也就是静音,如果设为1才有声音,如果设的更高的值,就会更高音。而AnalyserNode是用来获取音频大小的数值。

  还有其他很多节点,其他节点的话个人感觉是一些比较高级的音频处理,我是不知道怎么用,有兴趣的可以自行去mdn上查询。

  回归正题:说下该效果改如何实现,首先,要做成这种效果,要分几步:

  1、获取音频文件,实例化一个音频容器对象。

  2、通过FileReader把音频文件转成ArrayBuffer后再对其进行解码。

  3、用解码后的buffer实例化一个AudioBuffer对象。

  4、使用AnalyserNode接口实例化一个分析器节点。

  5、使用connect方法将AudioBuffer对象连接至AnalyserNode,如果想用GainNode,就再用connect方法,把AnalyserNode跟GainNode连接,然后再接到最终的音频播放节点:Destination,开始播放音频

  6、在音频播放的时候通过AnalyserNode获取音频播放时的各个频率值并转成8bit的ArrayBuffer。

  7、根据上面的arraybuffer里的各个值在canvas上画出相应的条形图即可。

 

  大概说起来就以上几步,具体代码分析如下:

  先将要用到的对象先定义好:其中包括audioContext音频容器对象,以及canvas的2d绘图环境对象,requestAnimationFrame的兼容性写法。

var music = document.getElementById("music"),canvas = document.getElementById("cas"),ctx=canvas.getContext("2d");
        
window.AudioContext= window.AudioContext||window.webkitAudioContext||window.mozAudioContext;
window.RAF =  (function(){
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };
})();
var AC = new AudioContext();

  然后就获取音频文件,可以直接通过input file来获取,或者用xhr也行。楼主为了方便,做的demo上就是直接用input file来获取音频文件。代码如下:通过onchange事件来获取到音频文件music.file[0]。再对音频文件进行解码,也就是changeBuffer方法要做的事。

music.onchange = function(){
            if(music.files.length!==0){
                changeBuffer(music.files[0]);
            }
        }        

  获取到了音频文件,先用FilreReader将文件转成ArrayBuffer对象,在加载完后可以通过e.target.result获取到文件内容。

  然后再对文件内容进行解码,用到的就是audioContext对象里的decodeAudioData方法。根据官方API文档得知,该方法有三个参数:第一个是就是音频ArrayBuffer对象,第二个是成功解码完毕后的回调,第三个是解码失败后的回调

function changeBuffer(file){
            var fr = new FileReader();
            fr.onload = function(e){
                var fileResult = e.target.result;
                AC.decodeAudioData(fileResult , function(buffer){
                    playMusic(buffer)
                }, function(e){
                    console.log(e)
                    alert("文件解码失败")
                })
            }
            fr.readAsArrayBuffer(file);
        }

  解码成功后调用playMusic方法,并且传入解码后的buffer数据,此时实例化一个AudioBufferSource对象,AudioBufferSource对象的属性有五个。分别是:buffer、playbackRate、loop、loopstart和loopend,buffer自然就是音频buffer数据,playbackRate是渲染音频流的速度,其默认值是1。loop则是播放循环属性,默认为false,如果设为true则会循环播放音频。loopstart和loopend则是循环开始和结束的时间段,以秒为单位,默认值均为0,只有当loop的值为true的时候这两个属性才会起效。

  下面的playMusic方法不仅处理了buffer的播放,如果传入的是audio dom对象也会进行相应的转换。但是注意,如果是audio对象转出来的audioSource,就不会有上面AudioBufferSource的方法,毕竟audio dom对象本身有方法可以控制自己的播放。

  实例化AudioBufferSource对象后,就像上面说的一样,接入analyserNode,analyserNode再接入gainnode,然后最终gainnode再接入audioContext.destination。

  准备完毕后,如果源是bufferSource则调用start方法播放音频,否则就是用audio 的play方法播放音频。

  播放后就跳转到canvas的绘图方法animate中,将音谱绘制出来。

//音频播放
    function playMusic(arg) {
        var source;
        //如果arg是audio的dom对象,则转为相应的源
        if (arg.nodeType) {
            audioSource = audioSource || AC.createMediaElementSource(arg);
            source = audioSource;
        } else {
            bufferSource = AC.createBufferSource();

            bufferSource.buffer = arg;

            bufferSource.onended = function () {
                app.trigger(singleLoop ? nowIndex : (nowIndex + 1));
            };

            //播放音频
            setTimeout(function () {
                bufferSource.start()
            }, 0);

            source = bufferSource;
        }

        //连接analyserNode
        source.connect(analyser);

        //再连接到gainNode
        analyser.connect(gainnode);

        //最终输出到音频播放器
        gainnode.connect(AC.destination);
    }

  然后获取到analyser节点里的频率长度,根据长度实例化一个8位整型数组,通过analyser.getByteFrequencyData将analyser节点中的频率数据拷贝进数组。因为数组为8位数组,即每个值的大小就为0~256,然后就可以根据这个值即各个频率的信号量进行绘制不同的条形图,每个条形图我也抽象成了对象,在每一帧对各个条形图进行修改就完成了最简单的音频动画了。

  条形图对象代码:

//音谱条对象
    function Retangle(w, h, x, y) {
        this.w = w;
        this.h = h; //小红块高度
        this.x = x;
        this.y = y;
        this.jg = 3;
        this.power = 0;
        this.dy = y; //小红块位置
        this.initY = y;
        this.num = 0;
    };

    var Rp = Retangle.prototype;

    Rp.update = function(power){
        this.power = power;
        this.num = ~~(this.power / this.h + 0.5);

        //更新小红块的位置,如果音频条长度高于红块位置,则红块位置则为音频条高度,否则让小红块下降
        var nh = this.dy + this.h;//小红块当前位置
        if (this.power >= this.y - nh) {
            this.dy = this.y - this.power - this.h - (this.power == 0 ? 0 : 1);
        } else if (nh > this.y) {
            this.dy = this.y - this.h;
        } else {
            this.dy += 1;
        }

        this.draw();
    };

    Rp.draw = function(){
        ctx.fillStyle = grd;
        var h = (~~(this.power / (this.h + this.jg))) * (this.h + this.jg);
        ctx.fillRect(this.x, this.y - h, this.w, h)
        for (var i = 0; i < this.num; i++) {
            var y = this.y - i * (this.h + this.jg);
            ctx.clearRect(this.x - 1, y, this.w + 2, this.jg);
        }
        ctx.fillStyle = "#950000";
        ctx.fillRect(this.x, ~~this.dy, this.w, this.h);
    };

  循环动画方法:

function animate() {
        if(!musics[nowIndex].decoding){
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            //出来的数组为8bit整型数组,即值为0~256,整个数组长度为1024,即会有1024个频率,只需要取部分进行显示
            var array_length = analyser.frequencyBinCount;
            var array = new Uint8Array(array_length);
            analyser.getByteFrequencyData(array);    //将音频节点的数据拷贝到Uin8Array中

            //数组长度与画布宽度比例
            var bili = array_length / canvas.width;

            for (var i = 0; i < rt_array.length; i++) {
                var rt = rt_array[i];
                //根据比例计算应该获取第几个频率值,并且缓存起来减少计算
                rt.index = ('index' in rt) ? rt.index : ~~(rt.x * bili);
                rt.update(array[rt.index]);
            }

            copy();
        }else {
            showTxt("音频解码中...")
        }

        RAF(animate);
    }

   为了让整个条形图更美观,所以还加入了一个半透明投影效果:

//制造半透明投影
    function copy() {
        var outctx = outcanvas.getContext("2d");
        var imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height / 2);
        for (var i = 0; i < imgdata.data.length; i += 4) {
            imgdata.data[i + 3] = 30;
        }
        outctx.putImageData(imgdata, 0, 0);
        ctx.save();
        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.rotate(Math.PI);
        ctx.scale(-1, 1);
        ctx.drawImage(outcanvas, -canvas.width / 2, -canvas.height / 2)
        ctx.restore();
    }

  

  后期对代码有所更改,若要最新源码请见github地址:

  https://github.com/whxaxes/canvas-test/blob/gh-pages/src/Funny-demo/musicPlayer/

posted @ 2014-07-14 15:38 W·Axes 阅读(...) 评论(...) 编辑 收藏