Baseline Widely available
getByteFrequencyData()
㯠AnalyserNode
ã¤ã³ã¿ã¼ãã§ã¤ã¹ã®ã¡ã½ããã§ã渡ããã Uint8Array
ï¼ç¬¦å·ãªããã¤ãé
åï¼ã«ç¾å¨ã®å¨æ³¢æ°ãã¼ã¿ãã³ãã¼ãã¾ãï¼
卿³¢æ°ãã¼ã¿ã¯ã 0 ãã 255 ã¾ã§ ã®ç¯å²ã®æ´æ°ã§æ§æããã¾ãã
é
åã®åé
ç®ã¯ãåºæã®å¨æ³¢æ°ã®ãã·ãã«å¤ã表ãã¾ãã卿³¢æ°ã¯ãµã³ãã«ã¬ã¼ãã® 0 ãã 1/2 ã¾ã§ç´ç·çã«åºããã¾ããä¾ãã°ããµã³ãã«ã¬ã¼ãã 48000
ã®å ´åãé
åã®æå¾ã®é
ç®ã¯ 24000
Hz ã®ãã·ãã«å¤ã表ãã¾ãã
é
åã®æã¤è¦ç´ ã AnalyserNode.frequencyBinCount
ããå°ãªãã£ãå ´åãä½åãªè¦ç´ ã¯åé¤ããã¾ããå¿
è¦ä»¥ä¸ã®è¦ç´ ããã£ãå ´åãä½åãªè¦ç´ ã¯ç¡è¦ããã¾ãã
getByteFrequencyData(array)
弿°
array
卿³¢æ°é åãã¼ã¿ãã³ãã¼ããã Uint8Array
ã é
åã®æã¤è¦ç´ ã AnalyserNode.frequencyBinCount
ããå°ãªãã£ãå ´åãä½åãªè¦ç´ ã¯åé¤ããã¾ããå¿
è¦ä»¥ä¸ã®è¦ç´ ããã£ãå ´åãä½åãªè¦ç´ ã¯ç¡è¦ããã¾ãã
ãªã (undefined
)ã
次ã®ä¾ã§ã¯ã AudioContext
ã§ AnalyserNode
ã使ãã requestAnimationFrame
㨠<canvas>
ã§æå»é åã®ãã¼ã¿ãç¹°ãè¿ãåéããç¾å¨ã®é³å£°å
¥åã®ããªã·ãã¹ã³ã¼ããåºåãæç»ããåºæ¬çãªä½¿ç¨æ¹æ³ã示ãã¾ãã ããå®å
¨ãªå¿ç¨ä¾/æ
å ±ã«ã¤ãã¦ã¯ã Voice-change-O-matic ã®ãã¢ã調ã¹ã¦ãã ããï¼é¢é£ããã³ã¼ã㯠app.js ã® 108 ï½ 193 è¡ç®ãåç
§ï¼ã
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
// â¦
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
canvasCtx.fillStyle = "rgb(0, 0, 0)";
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
const barWidth = (WIDTH / bufferLength) * 2.5;
let barHeight;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];
canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);
x += barWidth + 1;
}
}
draw();
仿§æ¸ ãã©ã¦ã¶ã¼ã®äºææ§ é¢é£æ
å ±
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4