-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsong.html
134 lines (111 loc) · 5.21 KB
/
song.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
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Nathaniel D'Rozario Music</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora">
<link rel="stylesheet" href="assets/css/styles.min.css">
<link rel="stylesheet" href="css/song.css" />
</head>
<body style="background-color: rgb(31,31,31);">
<!-- Start: Navigation Clean -->
<div id="navbar-insert">
</div>
<script src="include/navbar.js"></script>
<!-- End: Navigation Clean -->
<div>
<div class="jumbotron text-left" style="height: 700px;">
<h1 class="text-left" id="song-title">Song Title</h1>
<img src="" id="cover-art" width="200px" height="200px"/><br/>
<audio id="music" controls loop>
<source id="audio-src" src="" type="audio/wav" />
Your browser unfortunately doesn't support the HTML5 audio tag. Please upgrade your browser.
</audio>
<p id="song-desc">Song Description</p>
<p id="license-text"></p>
<p>
<a class="btn btn-primary" id='song-download'>Download</a>
</p>
<p class='license-warning' href='' download>
Warning: Do NOT sample (i.e. remix snippets of) these recordings. No derivative works are allowed, but any other use
that is permitted by the license above is allowed.
</p>
</div>
</div>
<div style="background-color: #1f1f1f;">
<footer style="color: rgb(255,255,255);background-color: #1f1f1f;">
<div class="container">
<div class="row">
<!-- Start: Services -->
<div class="col-sm-6 col-md-3 item">
<h3>Contact</h3>
<ul>
<li>Email: nsdrozario@gmail.com</li>
</ul>
</div>
<!-- End: Services -->
<!-- Start: About -->
<div class="col-sm-6 col-md-3 item">
<h3>Information</h3>
<ul>
<li><a class='nav-item' href='about.html'>About Me</a></li>
<li><a class='nav-item' href='legal.html'>Legal</a></li>
</ul>
</div>
<!-- End: About -->
<!-- Start: Footer Text -->
<div class="col-md-6 item text">
<h3>Nathaniel D'Rozario</h3>
<p>Musician and programmer.</p>
</div>
<!-- End: Footer Text -->
</div>
<!-- Start: Copyright -->
<p class="text-center copyright">Nathaniel D'Rozario © 2020</p>
<!-- End: Copyright -->
</div>
</footer>
</div>
<script>
//song loader
let get_data = new URLSearchParams(location.search);
let album_id = get_data.get("a");
let song_id = get_data.get("s");
let xhttpreq = new XMLHttpRequest();
let song_title_elem = document.getElementById("song-title");
let audio_elem = document.getElementById("music");
let audio_src = document.getElementById("audio-src");
let license_elem = document.getElementById("license-text");
let song_description = document.getElementById("song-desc");
let download_link = document.getElementById("song-download");
var song_data;
function get_song_json() {
if (this.readyState == 4 && this.status == 200) {
song_data = JSON.parse(this.responseText);
let album = song_data.albums[album_id];
let song = song_data.albums[album_id].tracks[song_id];
song_title_elem.innerHTML = song.name;
document.title = song.name;
song_description.innerHTML = "Made by Nathaniel D'Rozario <br/> From <span style='font-style: italic;'>" + album.name + "</span> <br/>" + song.notes;
license_elem.innerHTML = song.recording_license;
if (album.cover_art) {
document.getElementById("cover-art").src = album.cover_art;
}
download_link.setAttribute("href", song.file);
audio_src.setAttribute("src", song.file);
audio_elem.load();
} else {
}
}
xhttpreq.onreadystatechange = get_song_json;
xhttpreq.open("GET", "json/songs.json", true);
xhttpreq.send();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/script.min.js"></script>
</body>
</html>