UserPlayIO-OpenSource-Music-Player/index.html at main · CreativeSpace-Development/UserPlayIO-OpenSource-Music-Player · 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
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>
  <head>
    <title>UserPlayio</title>
    <meta charset="UTF-8" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.2/css/all.css"
      integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="shortcut icon" type="image/png" href="pics/favi.png" />
  </head>

  <body>
    <center>
      <h1
        class="col-12 justify-content-center neon"
        style="font-family: 'Alfa Slab One', cursive;"
      >
        UserPlayio
      </h1>
      <div id="player_contain">
        <div class="card" id="player">
          <div class="card-body">
            <div id="audio_player">
              <div class="img-thumbnail track-art">
                <img id="trackimg" src="#" alt="" />
              </div>
              <div id="details">
                <h3 class="track-name">Music Title</h3>
                <h6 class="track-artist">Music Artist</h6>
              </div>
              <h6 class="current-time" style="float: left;">00:00</h6>
              <h6 class="total-duration" style="float: right;">00:00</h6>
              <input type="range" class="form-range seek_slider" value="0" />
              <div id="controls">
                <div class="main">
                  <i class="fas fa-step-backward prev-track"></i>
                  <i
                    id="control"
                    class="fas fa-play-circle playpause-track"
                  ></i>
                  <i class="fas fa-step-forward next-track"></i>
                </div>
                <div class="play_control">
                  <i class="fas fa-volume-mute"></i>
                  <i class="fas fa-sync disable"></i>
                </div>
              </div>
              <i class="fas fa-volume-off"></i>
              <input
                type="range"
                class="volume_slider"
                min="0"
                max="100"
                value="80"
              />
              <i class="fas fa-volume-up"></i>
            </div>
          </div>
        </div>

        <div class="card" id="playlist">
          <div class="card-body">
            <div class="song_list">
              <ul id="playlist_items" class="list-group"></ul>
            </div>
            <br />
            <br />
            <div id="container">
              <img id="logo" src="pics/logo.png" />
            </div>
          </div>
        </div>
      </div>
    </center>
    <!--Firebase-->
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.3.3/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/8.3.3/firebase-analytics.js"></script>

    <script>
      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      var firebaseConfig = {
        apiKey: "AIzaSyAKZdvdmP53o58lX_Fu-t1me8-iZoP3UZw",
        authDomain: "userplayer-58833.firebaseapp.com",
        projectId: "userplayer-58833",
        storageBucket: "userplayer-58833.appspot.com",
        messagingSenderId: "240440847506",
        appId: "1:240440847506:web:79cedc3821c9d8e6bf4a4b",
        measurementId: "G-73C7JTG5VQ"
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
      firebase.analytics();
    </script>

    <!--Dependancys-->
    <!--Jquery-->
    <script
      src="https://code.jquery.com/jquery-3.6.0.js"
      integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
      crossorigin="anonymous"
    ></script>
    <!--Bootstrap-->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
      crossorigin="anonymous"
    ></script>
    <script src="js/script.js"></script>
    <script src="js/player.js"></script>
  </body>
</html>