-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (130 loc) · 4.67 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
130
131
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Rezanin Music : Home</title>
<meta name="description" content="Music releases for music producer Rezanin" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="img/rezanin_logo.png" alt="Rezanin" />
</div>
</div>
<div id="imagebar">
<img src="img/imagebar_art1.png" alt="Abstract Soundwaves" />
</div>
<div id="content">
<div id="mediabar">
<audio id="mediaplayer" src="#" controls>
<p>Your browser does not support the audio element </p>
</audio>
</div>
<h2>Music Releases</h2>
<div class="releases">
<div class="release">
<h3>#Creature From The Black Country</h3>
<a href="//www.dropbox.com/s/dzkssryw4ln6lpo/Rezanin_-_Creature_From_The_Black_Country.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#Nite Of The Living Mares</h3>
<a href="//www.dropbox.com/s/ahgip8010zb8poz/Rezanin_-_Nite_Of_The_Living_Mares.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#Sparkplugged</h3>
<a href="//www.dropbox.com/s/nicjd9ezygnkpqz/Rezanin_-_Sparkplugged.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#Magnetic Matador</h3>
<a href="//www.dropbox.com/s/zhlccf3ya10e61x/Rezanin_-_Magnetic_Matador.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#Post Pincode</h3>
<a href="//www.dropbox.com/s/ru2txtiwqinc0r0/Rezanin_-_Post_Pincode.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#Reset Everything To Zero</h3>
<a href="//www.dropbox.com/s/oajne69iop2ioc1/Rezanin_-_Reset_Everything_To_Zero.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#Point Zero</h3>
<a href="//www.dropbox.com/s/zmuohqmbc3puwmk/Rezanin_-_Point_Zero.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#Alchemy Aria</h3>
<a href="//www.dropbox.com/s/gd0llw9lhuwhm7o/Rezanin_-_Alchemy_Aria.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#Alchemy Aria (Reprise)</h3>
<a href="//www.dropbox.com/s/cq394ozrxmm46ey/Rezanin_-_Alchemy_Aria_%28Reprise%29.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#More Film Theory</h3>
<a href="//www.dropbox.com/s/qts090rvtofyama/Rezanin_-_More_Film_Theory.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#Come Between</h3>
<a href="//www.dropbox.com/s/st6sszdyah96cmu/Rezanin_-_Come_Between.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#Cutting Edge (Remix)</h3>
<a href="//www.dropbox.com/s/5fvglqee2c3hesx/Rezanin_-_Cutting_Edge_%28Diesel_Dose_Remix%29.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#Fractal</h3>
<a href="//www.dropbox.com/s/9p0y0qny3cmjbvx/Rezanin_-_Fractal.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#Up the Getup</h3>
<a href="//www.dropbox.com/s/p31pqvciap3ini4/Rezanin_-_Up_The_Getup.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#Pins And Needles</h3>
<a href="//www.dropbox.com/s/8tu7bpvv0ar57wm/Rezanin_-_Pins_And_Needles.mp3?dl=1">Play</a>
</div>
<div class="release">
<h3>#Music Box</h3>
<a href="//www.dropbox.com/s/z74rwo9qwzvnw1b/Rezanin_-_Music_Box.mp3?dl=1">Play</a>
</div>
</div>
<div id="license-info">
<!-- Creative Commons License -->
<br/>
<a rel="license" href="//creativecommons.org/licenses/by-nc-sa/3.0/">
<img alt="Creative Commons License" style="border-width:0" src="//i.creativecommons.org/l/by-nc-sa/3.0/80x15.png" />
</a>
<br/>
All work is licensed under a
<a rel="license" href="//creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>
</div>
<div id="footer">
<div id="copyright">
<p>© Copyright Rezanin. All rights reserved.</p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const player = document.getElementById('mediaplayer');
const releases = document.querySelector('.releases');
function playAudio(event) {
let target = event.target.closest('a');
if (target) {
document.querySelectorAll('.release').forEach(el => el.classList.remove('playing'));
target.parentNode.classList.add('playing');
player.src = target.getAttribute('href');
player.play();
event.preventDefault();
}
}
releases.addEventListener('click', playAudio);
releases.addEventListener('touchend', playAudio);
});
</script>
</body>
</html>