HTML-Music-Player-SoundCloud-API/index.html at master · alexookah/HTML-Music-Player-SoundCloud-API · 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
<!DOCTYPE html>

<head>

    <script type="text/javascript"  src="https://code.jquery.com/jquery-3.2.0.min.js" type="text/javascript"></script>

    <!--SOUNDCLOUD API -->
    <script type="text/javascript" src="https://w.soundcloud.com/player/api.js"></script>

    <!--- Sliders -->
    <script type="text/javascript"  src="js/jquery.nouislider.min.js"></script>
    <script type="text/javascript"  src="js/jquery.nouislider.min2.js"></script>
    <link rel="stylesheet" href="css/nouislider.css" />

    <!-- PLAYER JAVASCRIPT -->
    <script type="text/javascript" src="js/player.js"></script>

    <!--- CSS FILE PLAYER -->
    <link rel="stylesheet" try href="css/player.css" type="text/css" media="screen" />

</head>
<body style=" background-color: grey;">
    <div id="player-bottom-wrapper">
        <div id="middle">
            <div id="current_playlist">
                <div id="current_playlist_header">
                    <div id="current_playlist_close"></div>
                    <div class="current_playlist_header_item"></div>
                </div>
                <iframe id="so" width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F1711002&amp;show_artwork=true&amp;color=000000&amp;auto_play=false"></iframe>
            </div>
            <div id="bottom">
                <div id="bottom_controls">
                    <div id="prev_button" class="controls_button"></div>
                    <div id="playpause">
                        <div id="play_button" button class="play_button controls_button" style="display:block" ></div>
                        <div id="pause_button" button class="play_button controls_button" style="display:none" ></div>
                    </div>
                    <div id="next_button" class="controls_button"></div>
                </div>
                <div id="volume">
                    <div id="volume_speaker" class="volume_on"></div>
                    <div id="volume_back"></div>
                </div>
                <div id="display">
                    <div class="display_song_container">
                        <div id="display_coverart"></div>
                        <div id="display_text">
                            <a id="display_song"></a>
                        </div>
                        <div id="display_time">
                            <div id="display_time_count">0:00</div>
                            <div id="display_progress"><div id="display_progress_loading"></div></div>
                            <div id="display_time_total"></div>
                        </div>
                    </div>
                </div>
                <div id="playlist_button"></div>
                <div id="top_button">
                    <div id="top_text">TOP</div>
                </div>
            </div>
        </div>
    </div>
</body>