ブラウザのアドレスバーをイコライザーっぽく

Mon, 22 Apr 2019 00:00:00 +0000

URL のハッシュ部分を書き換えることで、ブラウザのアドレスバーをグラフィックイコライザーにするというアイデアです。

これのソースコードがなんと2ツイートに収まるサイズ。

MediaDevices.getUserMedia()でマイクからの音声を取り込み、

動いた!

しかし、ブラウザの履歴がたいへんなことに!

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 (@spe_) April 18, 2019

アドレスバー on akky@サイボウズラボ・ブログ

ブラウザのアドレスバーをイコライザーっぽく