0.啟發

在B站我們有很多的小伙伴們應該都看到過用AE做的可視化音樂播放器播放音樂的視頻,看著特別酷炫帶感有木有。

B站截圖

B站截圖

B站截圖

所以今天我就用 Canvas 做個簡單 環形頻譜圖。

那么~ ヾ(ｏ･ω･)ﾉ 開始吧！

1.首先繪制靜態的效果

靜態效果

繪制靜態效果很簡單,我們只要從一點出發根據一定角度繪制線條,然后畫個圓從中點開始覆蓋線條就行了

var wrap = document.getElementById("wrap");

var cxt = wrap.getContext("2d");

(function drawSpectrum() {

cxt.clearRect(0, 0, wrap.width, wrap.height);

//畫線條

for (var i = 0; i < 360; i++) {

var value = 8;

cxt.beginPath();

cxt.lineWidth = 2;

cxt.moveTo(300, 300);

//R * cos (PI/180*一次旋轉的角度數) ,-R * sin (PI/180*一次旋轉的角度數)

cxt.lineTo(Math.cos((i * 1) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i * 1) / 180 * Math.PI) * (200 + value) + 300));

cxt.stroke();

}

//畫一個小圓，將線條覆蓋

cxt.beginPath();

cxt.lineWidth = 1;

cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);

cxt.fillStyle = "#fff";

cxt.stroke();

cxt.fill();

})();

2.調用AudioAPI,繪制音樂的頻譜圖

繪制音樂的頻譜圖

第一步完成后，第二步就很簡單了,通過調用AudioAPI獲取音頻變化來改變線條長度。

注意！！！最新chrome瀏覽器可能需要在http服務器上運行~

var wrap = document.getElementById("wrap");

var cxt = wrap.getContext("2d");

//獲取API

var AudioContext = AudioContext || webkitAudioContext;

var context = new AudioContext;

//加載媒體

var audio = new Audio("demo.mp3");

//創建節點

var source = context.createMediaElementSource(audio);

var analyser = context.createAnalyser();

//連接：source → analyser → destination

source.connect(analyser);

analyser.connect(context.destination);

//創建數據

var output = new Uint8Array(360);

(function drawSpectrum() {

analyser.getByteFrequencyData(output);//獲取頻域數據

cxt.clearRect(0, 0, wrap.width, wrap.height);

//畫線條

for (var i = 0; i < 360; i++) {

var value = output[i] / 8;//<===獲取數據

cxt.beginPath();

cxt.lineWidth = 2;

cxt.moveTo(300, 300);

//R * cos (PI/180*一次旋轉的角度數) ,-R * sin (PI/180*一次旋轉的角度數)

cxt.lineTo(Math.cos((i * 1) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i * 1) / 180 * Math.PI) * (200 + value) + 300));

cxt.stroke();

}

//畫一個小圓，將線條覆蓋

cxt.beginPath();

cxt.lineWidth = 1;

cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);

cxt.fillStyle = "#fff";

cxt.stroke();

cxt.fill();

//請求下一幀

requestAnimationFrame(drawSpectrum);

})();

3.環形左右同步顯示

實習步驟2后其實已經完成一大半了,不過細心的小伙伴們會發現環形最右端點上的線條間差了好多。

demo

處理辦法很多,我們用其中一個簡單的辦法處理,那就是讓其左右對稱的顯示。

var wrap = document.getElementById("wrap");

var cxt = wrap.getContext("2d");

//獲取API

var AudioContext = AudioContext || webkitAudioContext;

var context = new AudioContext;

//加載媒體

var audio = new Audio("demo.mp3");

//創建節點

var source = context.createMediaElementSource(audio);

var analyser = context.createAnalyser();

//連接：source → analyser → destination

source.connect(analyser);

analyser.connect(context.destination);

//創建數據

var output = new Uint8Array(361);

(function drawSpectrum() {

analyser.getByteFrequencyData(output);//獲取頻域數據

cxt.clearRect(0, 0, wrap.width, wrap.height);

//畫線條

for (var i = 0; i < output.length; i++) {

var value = output[i] / 10;

//繪制左半邊

cxt.beginPath();

cxt.lineWidth = 1;

cxt.moveTo(300, 300);

cxt.lineTo(Math.cos((i *0.5 + 90) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i *0.5 + 90) / 180 * Math.PI) * (200 + value) + 300));

cxt.stroke();

//繪制右半邊

cxt.beginPath();

cxt.lineWidth = 1;

cxt.moveTo(300, 300);

cxt.lineTo( (Math.sin((i *0.5) / 180 * Math.PI) * (200 + value) + 300),-Math.cos((i *0.5) / 180 * Math.PI) * (200 + value) + 300);

cxt.stroke();

}

//畫一個小圓，將線條覆蓋

cxt.beginPath();

cxt.lineWidth = 1;

cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);

cxt.fillStyle = "#fff";

cxt.stroke();

cxt.fill();

//請求下一幀

requestAnimationFrame(drawSpectrum);

})();

效果

4.添加波形圖

最后我們來嘗試在圈內,添加一個波形圖

var wrap = document.getElementById("wrap");

var cxt = wrap.getContext("2d");

//獲取API

var AudioContext = AudioContext || webkitAudioContext;

var context = new AudioContext;

//加載媒體

var audio = new Audio("demo.mp3");

//創建節點

var source = context.createMediaElementSource(audio);

var analyser = context.createAnalyser();

//連接：source → analyser → destination

source.connect(analyser);

analyser.connect(context.destination);

//創建數據

var output = new Uint8Array(361);

//計算出采樣頻率44100所需的緩沖區長度

var length = analyser.frequencyBinCount * 44100 / context.sampleRate | 0;

//創建數據

var output2 = new Uint8Array(length);

(function drawSpectrum() {

analyser.getByteFrequencyData(output);//獲取頻域數據

cxt.clearRect(0, 0, wrap.width, wrap.height);

//畫線條

for (var i = 0; i < output.length; i++) {

var value = output[i] / 10;

//繪制左半邊

cxt.beginPath();

cxt.lineWidth = 1;

cxt.moveTo(300, 300);

cxt.lineTo(Math.cos((i * 0.5 + 90) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i * 0.5 + 90) / 180 * Math.PI) * (200 + value) + 300));

cxt.stroke();

//繪制右半邊

cxt.beginPath();

cxt.lineWidth = 1;

cxt.moveTo(300, 300);

cxt.lineTo((Math.sin((i * 0.5) / 180 * Math.PI) * (200 + value) + 300), -Math.cos((i * 0.5) / 180 * Math.PI) * (200 + value) + 300);

cxt.stroke();

}

//畫一個小圓，將線條覆蓋

cxt.beginPath();

cxt.lineWidth = 1;

cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);

cxt.fillStyle = "#fff";

cxt.stroke();

cxt.fill();

//將緩沖區的數據繪制到Canvas上

analyser.getByteTimeDomainData(output2);

var height = 100, width = 400;

cxt.beginPath();

for (var i = 0; i < width; i++) {

cxt.lineTo(i + 100, 300 - (height / 2 * (output2[output2.length * i / width | 0] / 256 - 0.5)));

}

cxt.stroke();

//請求下一幀

requestAnimationFrame(drawSpectrum);

})();

5.嘗試波形反向顯示

如果是波形向圓形內顯示 又改如何實現呢?

起始也很簡單稍微改下上面的代碼就可以了

首先我們要去掉圓形覆蓋,用空心圓代替

var wrap = document.getElementById("wrap");

var cxt = wrap.getContext("2d");

//獲取API

var AudioContext = AudioContext || webkitAudioContext;

var context = new AudioContext;

//加載媒體

var audio = new Audio('demo.mp3');

//創建節點

var source = context.createMediaElementSource(audio);

var analyser = context.createAnalyser();

//連接：source → analyser → destination

source.connect(analyser);

analyser.connect(context.destination);

//創建數據

var output = new Uint8Array(180);

var du = 2;//角度

var potInt = { x: 300, y: 300 };//起始坐標

var R = 200;//半徑

var W = 2;//寬

(function drawSpectrum() {

analyser.getByteFrequencyData(output);//獲取頻域數據

cxt.clearRect(0, 0, wrap.width, wrap.height);

//畫線條

for (var i = 0; i < 180; i++) {

var value = output[i] / 10;//<===獲取數據

cxt.beginPath();

cxt.lineWidth = W;

cxt.moveTo(( Math.sin((i * du) / 180 * Math.PI) * R + potInt.y),-Math.cos((i * du) / 180 * Math.PI) * R + potInt.x);//從圓邊開始

Rv = (R + value);

cxt.lineTo( ( Math.sin((i * du) / 180 * Math.PI) * Rv + potInt.y),-Math.cos((i * du) / 180 * Math.PI) * Rv + potInt.x);

cxt.stroke();

}

cxt.fill();

//畫一個空心小圓，將線條覆蓋

cxt.beginPath();

cxt.lineWidth = 1;

cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);

cxt.stroke();

cxt.closePath();

//請求下一幀

requestAnimationFrame(drawSpectrum);

})();

示例

接下去就簡單了 只要讓圓半徑減去對應值就行了

var wrap = document.getElementById("wrap");

var cxt = wrap.getContext("2d");

//獲取API

var AudioContext = AudioContext || webkitAudioContext;

var context = new AudioContext;

//加載媒體

var audio = new Audio('demo.mp3');

//創建節點

var source = context.createMediaElementSource(audio);

var analyser = context.createAnalyser();

//連接：source → analyser → destination

source.connect(analyser);

analyser.connect(context.destination);

//創建數據

var output = new Uint8Array(180);

var du = 2;//角度

var potInt = { x: 300, y: 300 };//起始坐標

var R = 200;//半徑

var W = 2;//寬

(function drawSpectrum() {

analyser.getByteFrequencyData(output);//獲取頻域數據

cxt.clearRect(0, 0, wrap.width, wrap.height);

//畫線條

for (var i = 0; i < 180; i++) {

var value = output[i] / 10;//<===獲取數據

cxt.beginPath();

cxt.lineWidth = W;

Rv = (R -value);

cxt.moveTo(( Math.sin((i * du) / 180 * Math.PI) * R + potInt.y),-Math.cos((i * du) / 180 * Math.PI) * R + potInt.x);

cxt.lineTo( ( Math.sin((i * du) / 180 * Math.PI) * Rv + potInt.y),-Math.cos((i * du) / 180 * Math.PI) * Rv + potInt.x);

cxt.stroke();

}

cxt.fill();

//畫一個空心小圓，將線條覆蓋

cxt.beginPath();

cxt.lineWidth = 1;

cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);

cxt.stroke();

cxt.closePath();

//請求下一幀

requestAnimationFrame(drawSpectrum);

})();

示例

6.雙向顯示

既然實現了反向顯示了那雙向顯示也就很簡單了

var wrap = document.getElementById("wrap");

var cxt = wrap.getContext("2d");

//獲取API

var AudioContext = AudioContext || webkitAudioContext;

var context = new AudioContext;

//加載媒體

var audio = new Audio('demo.mp3');

//創建節點

var source = context.createMediaElementSource(audio);

var analyser = context.createAnalyser();

//連接：source → analyser → destination

source.connect(analyser);

analyser.connect(context.destination);

//創建數據

var output = new Uint8Array(180);

var du = 2;//角度

var potInt = { x: 300, y: 300 };//起始坐標

var R = 200;//半徑

var W = 4;//寬

(function drawSpectrum() {

analyser.getByteFrequencyData(output);//獲取頻域數據

cxt.clearRect(0, 0, wrap.width, wrap.height);

//畫線條

for (var i = 0; i < 180; i++) {

var value = output[i] / 10;//<===獲取數據

cxt.beginPath();

cxt.lineWidth = W;

Rv1 = (R -value);

Rv2 = (R +value);

cxt.moveTo(( Math.sin((i * du) / 180 * Math.PI) * Rv1 + potInt.y),-Math.cos((i * du) / 180 * Math.PI) * Rv1 + potInt.x);

cxt.lineTo( ( Math.sin((i * du) / 180 * Math.PI) * Rv2 + potInt.y),-Math.cos((i * du) / 180 * Math.PI) * Rv2 + potInt.x);

cxt.stroke();

}

cxt.fill();

//畫一個空心小圓，將線條覆蓋

cxt.beginPath();

cxt.lineWidth = 1;

cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);

cxt.stroke();

cxt.closePath();

//請求下一幀

requestAnimationFrame(drawSpectrum);

})();

示例

添加自己的創意

添加自己的創意

(oﾟvﾟ)ノ 大家可以參考著嘗試自己DIY一個好玩的播放器出來

總結

以上是生活随笔為你收集整理的html音乐播放器 频谱,HTML5 Canvas 实现简易 绘制音乐环形频谱图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。