Playlist/index.html at main · anstjsdk/Playlist · GitHub

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
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>suna's playlist</title>
  </head>
  <body>
    <div class="container">
      <h1 class="h1">Playlist:&#41;</h1>
      <div class="title">천년지애</div>
      <div class="music-cover">
        <img class="music-cover-img" src="./cover/1000.jpg" alt="music-cover" />
      </div>
      <input type="range" id="progressBar" min="0" value="0" step="0.01" />
      <div class="controls">
        <button class="button prev-btn" title="Prev">
          <svg width="32" height="28" viewBox="0 0 32 28">
            <g transform="scale(-1,1) translate(-32,0)">
              <path
                d="M18.14 20.68c.365 0 .672-.107 1.038-.323l8.508-4.997c.623-.365.938-.814.938-1.37 0-.564-.307-.988-.938-1.361l-8.508-4.997c-.366-.216-.68-.324-1.046-.324-.73 0-1.337.556-1.337 1.569v4.773c-.108-.399-.406-.73-.904-1.021L7.382 7.632c-.357-.216-.672-.324-1.037-.324-.73 0-1.345.556-1.345 1.569v10.235c0 1.013.614 1.569 1.345 1.569.365 0 .68-.108 1.037-.324l8.509-4.997c.49-.29.796-.631.904-1.038v4.79c0 1.013.615 1.569 1.345 1.569z"
                fill="#222"
                fill-rule="nonzero"
              ></path>
            </g>
          </svg>
        </button>
        <button class="button pause-btn" title="Play/Pause">
          <svg width="32" height="28" viewBox="0 0 32 28">
            <path
              d="M10.345 23.287c.415 0 .763-.15 1.22-.407l12.742-7.404c.838-.481 1.178-.855 1.178-1.46 0-.599-.34-.972-1.178-1.462L11.565 5.158c-.457-.265-.805-.407-1.22-.407-.789 0-1.345.606-1.345 1.57V21.71c0 .971.556 1.577 1.345 1.577z"
              fill="#222"
              fill-rule="nonzero"
            ></path>
          </svg>
        </button>
        <button class="kitty-btn hidden" title="Pause">
          <svg width="32" height="28" viewBox="0 0 32 28">
            <path
              d="M13.293 22.772c.955 0 1.436-.481 1.436-1.436V6.677c0-.98-.481-1.427-1.436-1.427h-2.457c-.954 0-1.436.473-1.436 1.427v14.66c-.008.954.473 1.435 1.436 1.435h2.457zm7.87 0c.954 0 1.427-.481 1.427-1.436V6.677c0-.98-.473-1.427-1.428-1.427h-2.465c-.955 0-1.428.473-1.428 1.427v14.66c0 .954.473 1.435 1.428 1.435h2.465z"
              fill="#c0392b"
              fill-rule="nonzero"
            ></path>
          </svg>
        </button>
        <button class="button next-btn" title="Next">
          <svg width="32" height="28" viewBox="0 0 32 28">
            <path
              d="M18.14 20.68c.365 0 .672-.107 1.038-.323l8.508-4.997c.623-.365.938-.814.938-1.37 0-.564-.307-.988-.938-1.361l-8.508-4.997c-.366-.216-.68-.324-1.046-.324-.73 0-1.337.556-1.337 1.569v4.773c-.108-.399-.406-.73-.904-1.021L7.382 7.632c-.357-.216-.672-.324-1.037-.324-.73 0-1.345.556-1.345 1.569v10.235c0 1.013.614 1.569 1.345 1.569.365 0 .68-.108 1.037-.324l8.509-4.997c.49-.29.796-.631.904-1.038v4.79c0 1.013.615 1.569 1.345 1.569z"
              fill="#222"
              fill-rule="nonzero"
            ></path>
          </svg>
        </button>
      </div>
      <audio id="audio" src="./music/in.mp3"></audio>
    </div>
    <script src="./main.js"></script>
  </body>
</html>