URL のハッシュ部分を書き換えることで、ブラウザのアドレスバーをグラフィックイコライザーにするというアイデアです。
when your friend throws you a dumb idea like a URL-based graphic eq, don't think twice, just do it. pic.twitter.com/gBOQR2Ews9
— jake albaugh (@jake_albaugh) April 17, 2019
これのソースコードがなんと2ツイートに収まるサイズ。
var l = ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
var x = new AudioContext();
var a = x.createAnalyser();
a.fftSize = 32;
var d = new Uint8Array(16);
navigator.mediaDevices.getUserMedia({ audio: true }).then(s => {
x.createMediaStreamSource(s).connect(a);
z();
});— jake albaugh (@jake_albaugh) April 17, 2019
MediaDevices.getUserMedia()でマイクからの音声を取り込み、
function z() {
setTimeout(z, 40);
a.getByteFrequencyData(d);
var s = [];
d.forEach(v => s.push(l[Math.floor((v / 255) * 8)]));
location.hash = document.title = s.join("");
}— jake albaugh (@jake_albaugh) April 17, 2019
動いた!
しかし、ブラウザの履歴がたいへんなことに!
replaceState()を使った、履歴が壊れないバージョンも提案されています。
// Alternative to avoid polluting browser history:
function z() {
setTimeout(z, 40);
a.getByteFrequencyData(d);
var s = [];
d.forEach(v => s.push(l[Math.floor((v / 255) * 8)]));
var t = document.title = s.join("");
history.replaceState(history.state, t, '#' + t);
}— Spencer Elliott (@spe_) April 18, 2019
