概要
twitterで面白いものを見つけたので、共有します。
それは、URLフォームに再現される、ボリュームメータ？（バー）です。
あれの名前は何なんだろう。
作るもの
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
コード
これで終わり！
以下を保存してopenコマンドで開けば終わり！
<html>
<script>
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();
});
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("");
}
</script>
</html>
注意
chromeだと以下の警告が出て、動かないです。
Firefoxで動作確認済みです。
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu