HTML5音楽視覚化コードの詳細説明

何もすることがなかったので、H5 音楽のビジュアライゼーションを作成しました。 以下はコードの主要部分です。一部の AudioContext API のコメントが含まれています。

• AudioContext API部分、家の原材料に相当します。

musicVisualizer.ac = new(window.AudioContext || window.webkitAudioContext)();
//实例化一个音频类型window.AudioContext,后面是为了兼容Chrome浏览器


function musicVisualizer(obj) {
    this.source = null; //初始化音频资源变量
    this.analyser = musicVisualizer.ac.createAnalyser(); //这一步是非常重要的，createAnalyser()可以创建一个／AnalyserNode／用来获取音频的各项数据，实现音乐可视化
    this.size = obj.size; //这里是 index.js里面实例化原型的参数obj中的大小属性
    this.analyser.fftSize = this.size * 2;
    //fftsize(AnalyserNode的一个属性)是一个无符号长整型的值, 用于确定频域的 FFT (快速傅里叶变换) 的大小.fftSize 属性的值必须是从32到32768范围内的2的非零幂; 
    其默认值为2048.总之最后获取到的数组长度应该是fftSize值的一半，还应该保证它是以2为底的幂。
    this.xhr = new XMLHttpRequest();//这个就很熟悉了对于大家而言，创建ajax对象
    this.analyser.connect(musicVisualizer.ac.destination);
    //musicVisualizer.ac.destination是音频要最终输出的目标，所有节点中的最后一个节点应该再连接到musicVisualizer.ac.destination播放声音
    this.visualizer = obj.visualizer;
    //这里是 index.js里面实例化原型的参数obj中的canvas绘画音乐节点实现节奏可视化
    this.visualize();
}
musicVisualizer.prototype.load = function(url, fun) {
    this.xhr.abort();//停止正在进行的ajax请求
    this.xhr.open("GET", url);
    this.xhr.responseType = "arraybuffer";
    var self = this;
    this.xhr.onload = function() {
        fun(self.xhr.response);
    };
    this.xhr.send();
};
musicVisualizer.prototype.decode = function(arraybuffer, fun) {
    musicVisualizer.ac.decodeAudioData(arraybuffer, function(buffer) {
//decodeAudioData用于异步解码音频文件中的arrayBuffer数据
        fun(buffer);
    }, function(err) {
        console.log(err);
    });
};
musicVisualizer.prototype.stop = function() {
    this.source[this.source.stop ? "stop" : "noteOff"](0);
};
musicVisualizer.prototype.visualize = function() {
    var arr = new Uint8Array(this.analyser.frequencyBinCount);
//frequencyBinCount通常是可视化数据值的数量，为fftSize的一半
    requestAnimationFrame = window.requestAnimationFrame || webkitRequestAnimationFrame || mozRequestAnimationFrame;
    //window.requestAnimationFrame() 方法告诉浏览器您希望执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法将在重绘之前调用的回调作为参数。
    var self = this;

    function v() {
        self.analyser.getByteFrequencyData(arr);
//getByteFrequmencyData把当前频率数据复制到传入其中的Uint8Array
        self.visualizer(arr);
        requestAnimationFrame(v);
    }
    requestAnimationFrame(v);
};
musicVisualizer.prototype.play = function(url) {
    var self = this;
    this.source && this.stop();
    this.load(url, function(arraybuffer) {
        self.decode(arraybuffer, function(buffer) {
            var bs = musicVisualizer.ac.createBufferSource();
//createBufferSource() 
方法用于创建一个新的AudioBufferSourceNode接口, 该接口可以通过AudioBuffer 对象来播放音频数据. 
AudioBuffer对象可以通过AudioContext.createBuffer 来创建或者通过 AudioContext.decodeAudioData成功解码音轨后获取.


            bs.connect(self.analyser);
            bs.buffer = buffer;
            bs[bs.start ? "start" : "noteOn"](0);
            self.source = bs;
        });
    });
};

• H5キャンバス視覚化部分。原料接着剤

rreee

以上がHTML5音楽視覚化コードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。