Ian-dp1-diy-spotify/frontend/index.html at main · iankariuki26/Ian-dp1-diy-spotify · 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
<!DOCTYPE HTML>
<html lang="en" data-bs-theme="dark">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="http://nem2p-dp1-spotify.s3-website-us-east-1.amazonaws.com/favicon.ico" type="image/x-icon" />

    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

    <title>DS2022 Ian's Christmas Spotify</title>
</head>

<body>
<div class="container" style="margin-top:2em;">
  <!-- <input type="text" id="search" placeholder="Search ..." style="width:20%;padding:4px;font-size:110%;float:right;" /> -->
  <h2 style="color:#d70909;margin-bottom:2rem;">Ian's Christmas Spotify</h2>
    <script>

    $(document).ready(function() {
      url = "http://54.242.105.8/songs";


      // url = "https://bv1e9klemd.execute-api.us-east-1.amazonaws.com/api/songs";
      $.ajax({
        // update the URL below to your songs API
        url: url,
        method: "GET",
        dataType: "json",
        success: function(data) {
          for (var i = 0; i < data.length; i++) {
            $("#player").append("<img src='" + data[i].image + "' width='100' height='100' style='float:left;margin:10px;' />");
            $("#player").append("<h3>" + data[i].title + "</h3>");
            $("#player").append("<p>" + data[i].artist + " | <i>" + data[i].album + "</i> | " + data[i].year + " | " + data[i].genre + "</p>");
            $("#player").append("<audio controls><source src='" + data[i].file + "' type='audio/mpeg'></audio>");
            $("#player").append("<hr size=1 /><br>");
          }
          console.log(data);
          $("#api").attr("href", url);
        },
        error: function(error) {
          // Handle errors
          console.error("Error fetching data:", error);
        }
      });
    });
    </script>

    <div id="player"></div>
    <p>This sample application ingests and catalogs audio content hosted in Amazon S3. | <span id="api_span"><a id="api" href="">API</a></span><p>
</div>
</body>
</html>