laurel-or-yanny/index.html at master · statementreply/laurel-or-yanny · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Yanny or Laurel</title>
	<script>
		var Gain = 11;
		var FilterFreq = 1500;
		var FilterNum = 4;

		var init = false;
		var audioCtx, filters, gainNode;
		var filterGain = -24;

		var onPlay = function() {
			if (!init) {
				if (!createFilters()) {
					alert("Web Audio API is not supported in this browser");
					return;
				}
				init = true;
			}
			onConfig();
		};

		var onConfig = function() {
			if (!init) {
				return;
			}
			filterGain = parseFloat(document.getElementById("filterGain").value);
			updateFilters();
		}

		var createFilters = function() {
			var AudioContext = window.AudioContext || window.webkitAudioContext;
			if (!AudioContext) {
				return false;
			}
			audioCtx = new AudioContext();
			filters = [];
			for (var i = 0; i < FilterNum; i++) {
				var f = audioCtx.createBiquadFilter();
				f.type = "highshelf";
				f.Q = Math.SQRT1_2;
				f.frequency.value = FilterFreq;
				f.gain.value = 0;
				filters.push(f);
			}
			gainNode = audioCtx.createGain();
			gainNode.gain.value = 0;

			var audioElem = document.querySelector('audio');
			var source = audioCtx.createMediaElementSource(audioElem);
			var pin = source;
			for (var i = 0; i < FilterNum; i++) {
				pin.connect(filters[i]);
				pin = filters[i];
			}
			pin.connect(gainNode);
			pin = gainNode;
			pin.connect(audioCtx.destination);
			return true;
		};

		var updateFilters = function() {
			gainNode.gain.value = 0;
			for (var i = 0; i < filters.length; i++) {
				filters[i].type = filterGain > 0 ? "lowshelf" : "highshelf";
				filters[i].gain.value = -Math.abs(filterGain) / FilterNum;
			}
			gainNode.gain.value = dbToField(Gain) / Math.sqrt(0.5 + 0.5 * dbToPower(-Math.abs(filterGain)));
		};

		var dbToPower = function(x) {
			return Math.exp(x / 10 * Math.LN10);
		};

		var dbToField = function(x) {
			return Math.exp(x / 20 * Math.LN10);
		};
	</script>
</head>
<body>
	<audio controls="controls" loop="true" onplay="onPlay()">
		<source src="laurel_yanny.mp4" type="audio/mpeg">
	</audio>
	<div>
		<span>Laurel</span>
		<input id="filterGain" name="filterGain" type="range" style="width:200px" min="-40" max="40" step="any" value="0" oninput="onConfig()" onchange="onConfig()">
		<span>Yanny</span>
	</div>
	<div style="margin-top:2em">
		<p style="font-size:small"><a href="https://www.reddit.com/r/blackmagicfuckery/comments/8ixrwi/">Original post</a></p>
	</div>
</body>
</html>