-
Notifications
You must be signed in to change notification settings - Fork 0
/
player.html
169 lines (131 loc) · 7.49 KB
/
player.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
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
<!DOCTYPE html>
<html>
<head>
<title>X Music Player by Gaurav Singh</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="shortcut icon" href="buttons/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto:100" rel="stylesheet">
<script type="text/javascript">
// locate your element and add the Click Event Listener
/*listSongs.addEventListener("click",function(e) {
// e.target is our targetted element.
// try doing console.log(e.target.nodeName), it will result LI
if(e.target && e.target.nodeName == "LI") {
console.log(e.target.id + " was clicked");
}
});*/
</script>
</head>
<body"><center>
<div class="container-all-divs">
<div style="float: left; width: 835px; display: inline-block;"><!--Player aur theme wala div-->
<div style="float: right;">
<div id="audioPlayer" class="audio-player">
<div class="top-bar">
<img src="buttons/add.png" style="margin-right: 20px; margin-left: -150px; margin-bottom: 15px; margin-top: 20px;" width="30px" onclick="hideShowThemePanel();" />
<img src="buttons/help.png" style="margin-right: 20px; margin-bottom: 15px; margin-top: 20px;" width="30px" onclick="aboutPopup();" />
<img src="buttons/delete.png" style="margin-right: 20px; margin-bottom: 15px; margin-top: 20px;" width="30px" onclick="deleteAllData();">
</div>
<div id="logo" class="logo"><!--album art wala div-->
<img class="album_art" id="album_art" src="buttons/art.png">
</div>
<div class="player">
<div id="songTitle" class="song-title">
Select. Upload. Listen.
</div>
<div id="nextSongTitle" class="next-song-title"><b>Next Song:</b></div>
<div>
<div id="currentTime" class="current-time">00:00</div>
<div id="duration" class="duration">00:00</div>
</div>
<input id="songSlider" class="song-slider" type="range" min="0" step="1" onchange="seekSong()" /><!--songseek bar-->
<div class="controllers"><!--play pause forward etc wala div-->
<img src="buttons/info.png" style="margin-right: 20px; margin-bottom: 15px;" width="15px" onclick="showInfo();" />
<img src="buttons/back.png" style="margin-right: 20px; margin-bottom: 15px;" width="15px" onclick="previous();" />
<img src="buttons/rewind.png" style="margin-right: 20px; margin-bottom: 12px;" width="20px" onclick="decreaseSpeed();" / />
<img src="buttons/play.png" id="playPause" width="50px" onclick="playOrPauseSong(this);" />
<img src="buttons/forward.png" style="margin-left: 20px; margin-bottom: 12px;" width="20px" onclick="increaseSpeed();" />
<img src="buttons/next.png" style="margin-left: 20px; margin-bottom: 15px;" width="15px" onclick="next();" />
<img src="buttons/stop.png" style="margin-left: 20px; margin-bottom: 15px;" width="13px" onclick="stop();" />
</div>
<div class="volume-controller"><!--volume wala div-->
<img src="buttons/volume.png" width="20px" id="muteButton" onclick="muteSound();" />
<input id="volumeSlider" class="volume-slider" type="range" min="0" max="1" step="0.01" onchange="adjustVolume();" />
<!--<img src="buttons/volume.png" width="20px" />-->
</div>
</div>
</div>
<div style="height: 110px;"><!--Themes wala div-->
<div id="visual" class="visual">
<span style="color: white; font-family: 'Roboto', sans-serif; font-size: 15px;"> select theme :</span>
<img src="buttons/blur.jpg" width="23px" height="23px" style="margin-top: 10px;" onclick="setTheme0();" />
<img src="buttons/blur1.jpg" width="23px" height="23px" style="margin-top: 10px;" onclick="setTheme1();" />
<img src="buttons/blur2.jpg" width="23px" height="23px" style="margin-top: 10px;" onclick="setTheme2();" />
<img src="buttons/blur3.jpg" width="23px" height="23px" style="margin-top: 10px;" onclick="setTheme3();" />
<img src="buttons/blur4.jpg" width="23px" height="23px" style="margin-top: 10px;" onclick="setTheme4();" />
<img src="buttons/blur5.jpg" width="23px" height="23px" style="margin-top: 10px;" onclick="setTheme5();" />
<img src="buttons/blur6.jpg" width="23px" height="23px" style="margin-top: 10px;" onclick="setTheme6();" />
<img src="buttons/blur7.jpg" width="23px" height="23px" style="margin-top: 10px;" onclick="setTheme7();" />
<img src="buttons/blur8.jpg" width="23px" height="23px" style="margin-top: 10px;" onclick="setTheme8();" />
</div>
</div>
</div>
</div>
<div style="float: right; width: 835px; display: inline-block;"><!--Playlist wala div-->
<div style="float: left;" >
<div class="playlist" id="playlist">
<form action="http://localhost:8080/xmusic/MusicUpload" method="post" enctype="multipart/form-data"><!--Result.jsp ko top pe dalna hai as lightbox after loading -->
<label for="file" class="customFileUploadLabel">
1. Select
<input id="file" class="upload-music" type="file" accept="audio/*" name="upload-music" action="songs/" multiple />
</label>
<!--<input type="file" accept="audio/*" name="file" action="songs/" name="upload-music" id="file" class="upload-music" multiple />-->
<input type="submit" value="2. Upload" class="upload-button" />
<input type="button" class="playlist-loader-button" value="3. Fetch" onclick="uploadMusic();">
</form>
<!--<input type="file" accept="audio/*" action="songs/" name="upload-music" id="file" class="upload-music" onchange="uploadMusic(); playlistFetch();" multiple />
<label for="upload-music">Add music</label>-->
<div class="tab">
<button class="tablinks" id="defaultOpen" onclick="tabController(event, 'Tracks')">Tracks</button>
<button class="tablinks" onclick="tabController(event, 'Albums')">Albums</button>
<button class="tablinks" onclick="tabController(event, 'Artists')">Artists</button>
<button class="tablinks" onclick="tabController(event, 'Search')">Search</button>
</div>
<div id="Tracks" class="tabcontent"><!--tab 1-->
<div id="song-list" class="song-list">
<!--Here appears the playlist fetched from songs array using fuction playlistFetchg();-->
</div>
</div>
<div id="Albums" class="tabcontent"><!--tab 2-->
<div id="album-list" class="song-list">
<!--Here appears the playlist fetched from albums array using fuction albumFetchg();-->
</div>
</div>
<div id="Artists" class="tabcontent"><!--tab 3-->
<div id="artist-list" class="song-list">
<!--Here appears the playlist fetched from artists array using fuction artistFetchg();-->
</div>
</div>
<div id="Search" class="tabcontent"><!--tab 1-->
<div id="search-list" class="song-list">
<!--Here appears the search-->
<img src="buttons/back-nav.png" class="go-back-button-search" id="go-back-button" onclick="goBackInSearch();">
<h3 id="titleDiv">Song Title</h3>
<br><h3 id="albumDiv">Albums</h3><br>
<h3 id="artistDiv">Artists</h3><br>
<input type="text" name="fname" class="search-input-box" id="searchInput" placeholder="Enter album/artist name"><br>
<input type="submit" value="Search by Album" class="search-button" id="searchByAlbumButton" onclick="searchByAlbum();"><br>
<input type="submit" value="Search by Artist" class="search-button" id="searchByArtistButton" onclick="searchByArtist();">
</div>
</div>
</div>
<div class="equaliser">
<img src="buttons/eq_paused.PNG" id="equaliser" class="equaliser_img">
</div>
</div>
</div>
</div>
</center>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>