搜尋
首頁web前端H5教程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 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(&#39;selected&#39;)
            .eq(i).addClass(&#39;selected&#39;);
        draw.type = spans.eq(i).attr(&#39;type&#39;);
    });
})();

以上是HTML5音樂視覺化程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
H5指的是什麼?探索上下文H5指的是什麼?探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5:工具,框架和最佳實踐H5:工具,框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面,支持組件化開發。 2.React通過虛擬DOM優化頁面渲染,適合複雜應用。 3.Webpack用於模塊打包,優化資源加載。

HTML5的遺產:當前了解H5HTML5的遺產:當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代碼:可訪問性和語義HTMLH5代碼:可訪問性和語義HTMLApr 09, 2025 am 12:05 AM

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構,提高SEO。 2.ARIA屬性如aria-label增強可訪問性,輔助技術用戶可順利使用網頁。

H5與HTML5相同嗎?H5與HTML5相同嗎?Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多數情況下是相同的,但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準,包含新標籤和API。 2."h5"通常是HTML5的簡稱,但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

H5的功能是什麼?H5的功能是什麼?Apr 07, 2025 am 12:10 AM

H5,即HTML5,是HTML的第五個版本,它為開發者提供了更強大的工具集,使得創建複雜的網頁應用變得更加簡單。 H5的核心功能包括:1)元素允許在網頁上繪製圖形和動畫;2)語義化標籤如、等,使網頁結構清晰,利於SEO優化;3)新API如GeolocationAPI,支持基於位置的服務;4)跨瀏覽器兼容性需要通過兼容性測試和Polyfill庫來確保。

h5鏈接怎麼做h5鏈接怎麼做Apr 06, 2025 pm 12:39 PM

如何創建 H5 鏈接?確定鏈接目標:獲取 H5 頁面或應用程序的 URL。創建 HTML 錨點:使用 <a> 標記創建錨點並指定鏈接目標URL。設置鏈接屬性(可選):根據需要設置 target、title 和 onclick 屬性。添加到網頁:將 HTML 錨點代碼添加到希望鏈接出現的網頁中。

h5兼容問題怎麼解決h5兼容問題怎麼解決Apr 06, 2025 pm 12:36 PM

解決 H5 兼容問題的方法包括:使用響應式設計,允許網頁根據屏幕尺寸調整佈局。採用跨瀏覽器測試工具,在發布前測試兼容性。使用 Polyfill,為舊瀏覽器提供對新 API 的支持。遵循 Web 標準,使用有效的代碼和最佳實踐。使用 CSS 預處理器,簡化 CSS 代碼並提高可讀性。優化圖像,減小網頁大小並加快加載速度。啟用 HTTPS,確保網站的安全性。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版