タグ: マイク

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