-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
59 lines (55 loc) · 6.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="player-container">
<div class="song-info-container">
<div class="song-info-text" id="now-playing"></div>
<div class="song-cover-container">
<div class="song-cover" id="track-cover">
<div class="song-cover-center-dot"></div>
</div>
</div>
<div class="song-info">
<div class="song-info-text" id="track-name">Track Name</div>
<div class="song-info-text" id="track-artist">Track Artist</div>
</div>
</div>
<div class="visualizer-container"></div>
<div class="time-slider-container">
<div class="slider-time" id="current-time">00:00</div>
<input type="range" min="1" max="100" value="0" class="seek-slider pointer" id="seek-slider" onchange="seekTo()">
<div class="slider-time" id="total-duration">00:00</div>
</div>
<div class="button-container">
<button class="side-button pointer" id="random-track" onclick="randomTrack()">
<svg class="button-svg" xmlns="http://www.w3.org/2000/svg" id="random-icon" viewBox="0 0 24 24" width="20" height="20"><path d="M18.414,7.9V9.586a1,1,0,0,0,1.707.707l3.586-3.586a1,1,0,0,0,0-1.414L20.121,1.707a1,1,0,0,0-1.707.707v2.4c-3.35.732-5.6,2.781-7.51,4.911C8.718,7.316,6.08,5.021,1.83,4.586c-.046-.01-.311-.039-.33-.039a1.5,1.5,0,0,0-.131,2.994h0c3.464.3,5.5,2.159,7.549,4.458-2.046,2.3-4.087,4.166-7.552,4.462h0A1.5,1.5,0,0,0,1.5,19.453c.038,0,.073,0,.111-.008h0C6.84,19,9.649,15.753,12.148,12.86,14.059,10.65,15.792,8.7,18.414,7.9Z"/><path d="M20.121,13.707a1,1,0,0,0-1.707.707v1.7a9.186,9.186,0,0,1-3.452-2,1.466,1.466,0,0,0-2.062.157l-.025.028a1.49,1.49,0,0,0,.165,2.111A11.977,11.977,0,0,0,18.414,19.2v2.391a1,1,0,0,0,1.707.707l3.586-3.586a1,1,0,0,0,0-1.414Z"/></svg>
</button>
<button class="side-button pointer" id="prev-track" onclick="prevTrack()">
<svg class="button-svg" xmlns="http://www.w3.org/2000/svg" id="rewind-svg" viewBox="0 0 24 24" width="20" height="20"><path d="M10.42,20.656a3.77,3.77,0,0,1-2.233-.735l-6.641-4.87a3.784,3.784,0,0,1,0-6.1l6.641-4.87A3.783,3.783,0,0,1,14.2,6.853l3.782-2.774A3.784,3.784,0,0,1,24,7.13v9.74a3.784,3.784,0,0,1-6.021,3.051L14.2,17.147a3.79,3.79,0,0,1-3.777,3.509Z"/></svg>
</button>
<button class="center-button pointer" id="play-pause-track" onclick="playPauseTrack()">
<svg class="button-svg" xmlns="http://www.w3.org/2000/svg" id="Filled" viewBox="0 0 24 24" width="20" height="20"><path d="M20.492,7.969,10.954.975A5,5,0,0,0,3,5.005V19a4.994,4.994,0,0,0,7.954,4.03l9.538-6.994a5,5,0,0,0,0-8.062Z"/></svg>
</button>
<button class="side-button pointer" id="next-track" onclick="nextTrack()">
<svg class="button-svg" xmlns="http://www.w3.org/2000/svg" id="forward-svg" viewBox="0 0 24 24" width="20" height="20"><path d="M3.787,20.656A3.789,3.789,0,0,1,0,16.87V7.13A3.783,3.783,0,0,1,6.021,4.079L9.8,6.853a3.783,3.783,0,0,1,6.01-2.774l6.641,4.87a3.784,3.784,0,0,1,0,6.1l-6.641,4.87A3.783,3.783,0,0,1,9.8,17.147L6.021,19.921A3.775,3.775,0,0,1,3.787,20.656Z"/></svg>
</button>
<button class="side-button pointer" id="repeat-track" onclick="repeatTrack()">
<svg class="button-svg" xmlns="http://www.w3.org/2000/svg" id="repeat-icon" data-name="Layer 1" viewBox="0 0 24 24" width="20" height="20"><path d="M0,11.5C0,6.813,3.813,3,8.5,3h10.5V1.337C19,.446,20.077,0,20.707,.63l3,3.163c.391,.391,.39,1.024,0,1.414l-3,3.163c-.63,.63-1.707,.184-1.707-.707v-1.663H8.5c-3.033,0-5.5,2.468-5.5,5.5,0,.828-.671,1.5-1.5,1.5s-1.5-.672-1.5-1.5Zm22.5-.5c-.829,0-1.5,.672-1.5,1.5,0,3.032-2.467,5.5-5.5,5.5H5v-1.663c0-.891-1.077-1.337-1.707-.707L.293,18.793c-.391,.391-.391,1.024,0,1.414l3,3.163c.63,.63,1.707,.184,1.707-.707v-1.663H15.5c4.687,0,8.5-3.813,8.5-8.5,0-.828-.671-1.5-1.5-1.5Z"/></svg>
</button>
</div>
<div class="volume-slider-container">
<svg class="volume-svg" xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="15" height="15"><path d="m15.004,20.004v2.812c0,.297-.132.579-.36.769-.181.151-.407.231-.64.231-.061,0-.121-.005-.181-.017-2.999-.551-5.752-2.299-7.554-4.794h-1.27C2.242,19.004-.002,16.761-.002,14.002v-4.001C-.002,8.885.359,7.828,1.043,6.944c.34-.437.966-.516,1.403-.179.437.338.517.966.179,1.403-.41.529-.627,1.163-.627,1.832v4.001c0,1.655,1.347,3.002,3.002,3.002h1.78c.321,0,.622.154.811.414l.3.415c1.263,1.749,3.083,3.057,5.113,3.703v-1.532c0-.552.447-1,1-1s1,.448,1,1Zm8.703,3.703c-.195.195-.451.293-.707.293s-.512-.098-.707-.293L.293,1.707C-.098,1.316-.098.684.293.293S1.316-.098,1.707.293l4.623,4.623C8.131,2.468,10.855.753,13.822.205c.293-.053.594.025.821.215.229.19.36.472.36.769v12.402l1.686,1.686c.846-.887,1.31-2.046,1.31-3.276,0-1.269-.494-2.461-1.392-3.359-.391-.39-.391-1.023,0-1.414s1.023-.391,1.414,0c1.275,1.275,1.978,2.97,1.978,4.773,0,1.764-.673,3.425-1.896,4.69l1.415,1.415c3.33-3.418,3.304-8.908-.081-12.292-.391-.391-.391-1.023,0-1.414.391-.391,1.023-.391,1.414,0,4.164,4.164,4.191,10.922.081,15.12l2.774,2.774c.391.391.391,1.023,0,1.414ZM7.762,6.348l5.242,5.242V2.468c-2.032.647-3.854,1.955-5.114,3.702l-.128.178Z"/></svg>
<input type="range" min="1" max="100" value="99" class="volume-slider pointer" id="volume-slider" onchange="setVolume()">
<svg class="volume-svg" xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="15" height="15"><path d="M20.807,4.29a1,1,0,0,0-1.415,1.415,8.913,8.913,0,0,1,0,12.59,1,1,0,0,0,1.415,1.415A10.916,10.916,0,0,0,20.807,4.29Z"/><path d="M18.1,7.291A1,1,0,0,0,16.68,8.706a4.662,4.662,0,0,1,0,6.588A1,1,0,0,0,18.1,16.709,6.666,6.666,0,0,0,18.1,7.291Z"/><path d="M13.82.2A12.054,12.054,0,0,0,6.266,5H5a5.008,5.008,0,0,0-5,5v4a5.008,5.008,0,0,0,5,5H6.266A12.059,12.059,0,0,0,13.82,23.8a.917.917,0,0,0,.181.017,1,1,0,0,0,1-1V1.186A1,1,0,0,0,13.82.2ZM13,21.535a10.083,10.083,0,0,1-5.371-4.08A1,1,0,0,0,6.792,17H5a3,3,0,0,1-3-3V10A3,3,0,0,1,5,7h1.8a1,1,0,0,0,.837-.453A10.079,10.079,0,0,1,13,2.465Z"/></svg>
</div>
</div>
</body>
</html>