flips/index.html at master · samrose512/flips · 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
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/css" href="gruvbox.css">
        <meta charset="UTF-8">
        <title>Flips Music Player</title>
    </head>
    <body>
        <div id="title">
            <h1>Flips Music Player</h1> <br/>
        </div>
        <div id="main">
            <code id="songTime">0:00 / 0:00</code> <br/>
            <progress id="songDuration" value="0" max="100"></progress><br/>
            <img src="./Images/play-circle.svg" class="button-icon" onclick="toggleSong()" id="playButton"/>
            <img src="./Images/stop-circle.svg" class="button-icon" onclick="stopSong()" />
            <img src="./Images/mute-placeholder.svg" class="button-icon" onclick="toggleMute()" />
            <img src="./Images/vol-up.svg" class="button-icon" onclick="volumeUp()" />
            <img src="./Images/vol-down.svg" class="button-icon" onclick="volumeDown()" />
        </div>
        <hr/>
        <label for="playlistFile" class="fileInputLabel"> Load playlist
            <input type="file" id="playlistFile" webkitdirectory directory multiple/>
        </label>
        <label for="songFile" class="fileInputLabel"> Load single song
            <input type="file" accept=".mp3,.ogg" id="songFile" />
        </label>
        <ol id="playlist">

        </ol>
        <script src="howler.js"></script>
    </body>
</html>