-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
191 lines (172 loc) · 8.16 KB
/
index.html
File metadata and controls
191 lines (172 loc) · 8.16 KB
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>AudioAtlas</title>
<link rel="icon" href="/globe_icon.svg" />
<style>@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Oleo+Script+Swash+Caps:wght@400;700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Shrikhand&display=swap');</style>
<style>@import url('https://fonts.googleapis.com/css2?family=Barrio&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=New+Amsterdam&family=Oleo+Script+Swash+Caps:wght@400;700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Shrikhand&display=swap');</style>
<style>@import url('https://fonts.googleapis.com/css2?family=Barrio&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=MuseoModerno:ital,wght@0,100..900;1,100..900&family=New+Amsterdam&family=Oleo+Script+Swash+Caps:wght@400;700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Shrikhand&display=swap');</style>
<script src="https://kit.fontawesome.com/1c8d7ba273.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="title" class="titleText">
<h1 id="mainTitle">Audio Atlas</h1>
<p id="info-page-button">Info</p>
</div>
<div id="greeter">
<h1>Welcome to Audio Atlas</h1>
<p>An interactive multimedia experience taking you on a journey through the worlds top songs</p>
</div>
<div id="info-page">
<div class="info-content">
<div class="tabs">
<button class="tab-button active" data-tab="about">About</button>
<button class="tab-button" data-tab="how">How to Use</button>
<button class="tab-button" data-tab="credits">Credits</button>
</div>
<div id="closeInfoButton">ⓧ</div>
<div class= "tab-content active" id="about">
<h2>About Audio Atlas</h2>
<p>Audio Atlas was created to provide an immersive and educational experience into the global music scene, allowing users to explore and discover top songs from different countries and see how world events influence music.</p>
<p>Audio Atlas was the product of a senior project design class at the University of Florida.</p>
<p>Developed by Lance Daley, Ruperto Esteban, Rachel Gadonniex, and Hunter Stewart.</p>
</div>
<div class= "tab-content" id="how">
<h2>How to Use</h2>
<ol>
<li>Toggle between different databases (Last.fm, Spotify, Aggregate) to explore data from different sources.</li>
<i>Aggregate mode combines data from both Spotify and Last.fm. Ranks are shown for each song based on its position in both charts, if it exists.</i>
<li>Use the search bar or click on the globe to find a country and view its top songs for the selected week.</li>
<li>Select a week from the dropdown to view top songs for that period.</li>
<i> Data is updated weekly on Fridays. Historical data is available starting from Feburary 27, 2026</i>
<li>Click on a song to play it and view more details.</li>
<li>Use the music player controls to play, pause, or skip songs.</li>
<i>Clicking on the album art or song title in the player will open a Spotify search for that song.</i>
</ol>
</div>
<div class= "tab-content" id="credits">
<h2>Credits</h2>
<p>Special thanks to our advisor Dr. Schmer-Galunder</p>
<p>Chart data sourced from <a href="https://www.last.fm/" target="_blank">Last.fm</a> and <a href="https://www.spotify.com/" target="_blank">Spotify</a> through <a href="https://kworb.net/" target="_blank">Kworb</a>. Music playback provided by iTunes.</p>
<p>Audio Atlas recognizes the ethical concerns within music streaming services, and does not condone or support unethical practices within the music industry. We encourage users to support artists directly by purchasing music and merchandise, attending concerts, and using ethical streaming services.</p>
<i>Audio Atlas is not monetized. Music playback is for educational and research purposes only. Audio Atlas does not claim ownership of any music, data, or art.</i>
</div>
</div>
</div>
<div id="musicPlayer" class="player">
<div class="songInfo">
<strong id="songName"></strong>
<p id="artistName"></p>
<p id="albumName"></p>
<audio id ="audioPlayer"></audio>
</div>
<div class="centerColumn">
<div class="controls">
<button id="backButton">
<i id="back" class="fa-solid fa-backward-step"></i>
</button>
<button id="playButton">
<i id="play" class="fa-solid fa-play"></i>
</button>
<button id="nextButton">
<i id="next" class="fa-solid fa-forward-step"></i>
</button>
</div>
<div class="timeline">
<span class="currentTime" id="currentTime">0:00</span>
<div class="barContainer" id="barContainer">
<div class="timelineBar" id="timelineBar"></div>
</div>
<span class="fullTime" id="fullTime">0:30</span>
</div>
</div>
<div class="rightControls">
<div class="extraDetails">
<div class="pb">Playback:</div>
<div class="custom-dropdown" id="playbackDropdown">
<div class="selected">Off</div>
<ul class="options">
<li data-value="off">Off</li>
<li data-value="autoplay">Autoplay</li>
<li data-value="loop">Loop</li>
</ul>
</div>
</div>
<div class="vol-container">
<div class="volume">
<i id="volumeIcon" class="fa-solid fa-volume-low"></i>
<input type="range" id="volumeBar" min="0" max="1" step="0.01" value="1">
</div>
</div>
</div>
</div>
<div id="selectOptions">
<div class="custom-dropdown" id="databaseDropdown">
<div class="selected">Select a database</div>
<ul class="options">
<li data-value="lastfm">Last.fm</li>
<li data-value="spotify">Spotify</li>
<li data-value="aggregate">Aggregate</li>
</ul>
</div>
<div id="aggInfo">
<div id="about">Aggregate mode combines data from both Spotify and Last.fm.</div>
<p>Weights:</p>
<div id = "weights">Spotify: 0.5 | Last.fm: 0.5</div>
</div>
</div>
<div id="searchBar">
<input type="text" id="countryInput" placeholder="Search for a country..." />
<ul id="suggestions"></ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>
<div id="songContainer">
<div id="exitButton">←</div>
<div id="topSongs" class="info">
<div class="header">
<h1><span id="countryName">Country</span></h1>
<!--<button id="closeTopSongs" class="exit-button">x</button> -->
</div>
<div class="custom-dropdown">
<div class="selected">Select Week</div>
<ul class="options">
<li data-value="2026-03-01">2026-03-01</li>
<li data-value="2026-03-08">2026-03-08</li>
<li data-value="2026-03-15">2026-03-15</li>
</ul>
</div>
<div id="loading" class="loading"></div>
<div id="songList" class="songList">
<ul>
<li>
<div class="song-number">1</div>
<img src="album1.jpg" alt="Album 1" onerror="this.onerror=null; this.src='/img/vinyl-icon.webp';">
<div class="song-info">
<span class="title">Song 1</span>
<span class="artist">Artist A</span>
<span class="album-name">Album A</span>
<span class="year">2024</span>
</div>
</li>
<li>
<div class="song-number">2</div>
<img src="album2.jpg" alt="Album 2" onerror="this.onerror=null; this.src='/img/vinyl-icon.webp';">
<div class="song-info">
<span class="title">Song 2</span>
<span class="artist">Artist B</span>
<span class="album-name">Album B</span>
<span class="year">2025</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="popUp" class ="popUpMsg"></div>
<div id="container">
<div id="globe"></div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>