-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
129 lines (120 loc) · 6.59 KB
/
index.html
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LK0PB0DJ4X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-LK0PB0DJ4X');
</script>
<title>Golden Record Images</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="About Real-time decoding and Audio Visualizer of the 116 images present on the Voyager Golden Record using the browser.">
<meta name="keywords" content="Golden Record, Golden Record Images, Voyager Golden Record, Voyager Images, Voyager 1, Voyager 2, Voyager GOlden Record Images, ">
<meta name="author" content="Marc Baeuerle">
<link rel="shortcut icon" href="src/assets/images/golden_record_icon.webp">
<link href="./src/style.css" rel="stylesheet">
<script src="./public/main.js"></script>
</head>
<body>
<section class="description">
<h1>The Golden record</h1>
<p>
The Golden Record is a phonograph record that was included on the Voyager 1
and Voyager 2 spacecraft, which were launched in 1977. The record contains
sounds and images intended to provide information about Earth to any extraterrestrial
intelligence that might come across it.
<br>
Below are the live decodings of the 116 images that are present on the record.
</p>
</section>
<!-- Control Menu -->
<div class="sticky">
<section class="controls">
<div class="buttons">
<img class="svg" id="imgBack" src="src/assets/images/previous_icon.svg" width="50" height="50" alt="Back Image Button">
<img class="svg hide" id="play" src="src/assets/images/play_icon.svg" width="50" height="50" alt="Play Button">
<img class="svg" id="pause" src="src/assets/images/pause_icon.svg" width="50" height="50" alt="Pause Button">
<img class="svg" id="imgNext" src="src/assets/images/next_icon.svg" width="50" height="50" alt="Next Image Button">
</div>
<input id="imgSelector" type="range" min="0" max="78">
</section>
<!-- Image rendering + sound wave visualizer -->
<section class="images">
<img id="record-background" src="src/assets/images/sounds-of-earth.jpg" alt="Image of Golden Record"></img>
<div class="loader">
<img class="spinner" src="src/assets/images/golden-record-spnner.webp" alt="Image of Golden Record">
<p>Loading Audio File...</p>
<p style="font-size: 1rem;">This might take a while</p>
</div>
<!-- Left Channel -->
<div class="channel">
<h2>Left Channel</h2>
<section class="canvas">
<canvas id="leftWaveformCanvas" width="520" height="100">HTML5 Canvas not supported</canvas>
<canvas id="leftChannelImage" class="chnImage" width="520" height="367">HTML5 Canvas not supported</canvas>
</section>
<section id="leftCredits" class="credits">
<h2 id="leftCreditsTitle"> </h2>
<p id="leftCreditsPerson"> </p>
</section>
</div>
<!-- Right Channel -->
<div class="channel">
<h2>Right Channel</h2>
<section class="canvas">
<canvas id="rightWaveformCanvas" width="520" height="100">HTML5 Canvas not supported</canvas>
<canvas id="rightChannelImage" class="chnImage" width="520" height="367">HTML5 Canvas not supported</canvas>
</section>
<section id="rightCredits" class="credits">
<h2 id="rightCreditsTitle"> </h2>
<p id="rightCreditsPerson"> </p>
</section>
</div>
</section>
</div>
<!-- More Information -->
<section class="info">
<h2>How the images are created</h2>
<ul class="instructions">
<br>
<p>The Golden Record consists of 116 images that are encoded through an audio recording which consists of two
channels: left and right.
</p>
<br>
<p>We know, from the cover, that each image is made up of 520 'scan lines' which each last roughly 8ms. Therefore
to produce one cohesive image, we must stack 520 of these 'scan lines' next to each other. </p>
<br>
<p>When looking at each 8ms 'scan line' through audacity, a free audio editing software, we can see that the
audio is simply made up of many 'dots' that are represented through a 32bit floating point number.</p>
<br>
<p>These numbers are then converted into pixels, which should (with a lot of tinkering) produce an image.</p>
<br>
<p class="center-align">The MP3 Recording can be found
<a href="https://soundcloud.com/user-482195982/voyager-golden-record-encoded-images" target="_blank">here</a>
</p>
</ul>
</section>
<section class="info">
<h2>Extra resources</h2>
<div class="resources">
<a href="https://voyager.jpl.nasa.gov/golden-record/" target="_blank">
<img class="nasa" src="src/assets/images/nasa_frame.webp">
</a>
<div>
<iframe width="500" height="281" src="https://www.youtube.com/embed/RRuovINxpPc" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<p>Built and designed by Marc Baeuerle</p>
<p>Project Hosted on <a href="https://github.com/MarcBaeuerle/Golden-Record">Github</a></p>
</footer>
</body>
</html>