HTML5音乐可视化代码详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML5音乐可视化代码详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5268字，纯文字阅读大概需要8分钟。

内容图文

闲来无事做了个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 canvas可视化部分。原材料的粘合剂

var size = 64;
var box = $("#box")[0];
var height, width;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
box.appendChild(canvas);
var Dots = [];
draw.type = "column";
window.onresize = resize;
var line;


var mv = new musicVisualizer({
    size: size,
    visualizer: draw
});





var clickMusic = (function () {
    var lis = $(".music li");
    lis.click(function() {
        var i = $(this).index();
        lis.css('color', 'white');
        lis.eq(i).css('color', 'grey');
        mv.play('./musics/' + lis.eq(i).html());
    });
})();



function random(m, n) {
    return Math.round(Math.random() * (n - m) + m);
}

function getDots() {
    Dots = [];
    for (var i = 0; i < size; i++) {
        var x = random(0, width);
        var y = random(0, height);
        var color = "rgba(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ",0)";
        Dots.push({
            x: x,
            y: y,
            color: color,
            cap: 0,
            dx: random(1, 4)
        });
    };
}


var resize = (function () {
    height = box.clientHeight;
    width = box.clientWidth;
    canvas.height = height;
    canvas.width = width;
    line = ctx.createLinearGradient(0, 0, 0, height);
    line.addColorStop(0, "pink");
    line.addColorStop(0.5, "grey");
    line.addColorStop(1, "lightblue");
      getDots();
})();

function draw(arr) {
    ctx.clearRect(0, 0, width, height);
    var w = width / size;
    var cw = w * 0.6;
    var ch = cw;
    ctx.fillStyle = line;
    for (var i = 0; i < size; i++) {
        var o = Dots[i];
        if (draw.type == "column") {
            var h = arr[i] / 256 * height;
            ctx.fillRect(w * i, height - h, cw, h);
            ctx.fillRect(w * i, height - (o.cap + ch), cw, ch);
            o.cap--;
            if (o.cap < 0) {
                o.cap = 0;
            }
            if (h > 0 && o.cap < h + 30) {
                o.cap = h + 30 > height - ch ? height - ch : h + 30;
            }
        } else if (draw.type == "dot") {
            ctx.beginPath();
            var r = 10 + arr[i] / 256 * (height > width ? width : height) / 10;
            ctx.arc(o.x, o.y, r, 0, Math.PI * 2, true);
            var circle = ctx.createRadialGradient(o.x, o.y, 0, o.x, o.y, r);
            circle.addColorStop(0, "white");
            circle.addColorStop(1, o.color);
            ctx.fillStyle = circle;
            ctx.fill();
            o.x += o.dx;
            o.x = o.x > width ? 0 : o.x;
        }
    }
}


var changeStyle = (function () {
    var spans = $(".musicList span");
    spans.click(function() {
        var i = $(this).index();
        spans.removeClass('selected')
            .eq(i).addClass('selected');
        draw.type = spans.eq(i).attr('type');
    });
})();

以上就是HTML5音乐可视化代码详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的HTML5音乐可视化代码详解全部内容，希望文章能够帮你解决HTML5音乐可视化代码详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---