SiamesMP3Player/index.html at main · PEPAXD/SiamesMP3Player · 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
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- DeVData-->
    <meta name="author" content="MauroPepa">
    <meta name="description" content="SIAMES.mp3">

    <!-- WebData -->
    <title>SIAMES.mp3</title>
    <link rel="icon" href="img/logoSiames.svg" type="image/svg+xml">

    <!-- CSS mainStyle -->
    <link rel="stylesheet" href="CSS/homeStyle/homeStyle.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
</head>

<body>
    <!-- HomeMenu -->
    <main>
        <div class="background">

            <!-- SpanBubbles -->
            <div class="bubbleFrames">
                <div class="bubbles"></div>
            </div>

            <!-- mp3UI -->
            <div class="coverPageUI">
                <div class="music-player">
                    <div class="container">

                        <!-- Img & Data -->
                        <figure id="artSong" class="album-art">
                            <div class="current-info">
                                <figcaption>
                                    <h2 class="song-title"><i class="fa-solid fa-music"></i><span id="songTitle">titulo de la cancion</span></h2>
                                    <h2 class="song-album"><i class="fa-solid fa-compact-disc"></i><span id="songAlbum">album</span></h2>
                                </figcaption>

                                <div class="menuSong">
                                </div>
                            </div>
                        </figure>

                        <!--mp3controls-->
                        <div class="controls">

                            <!-- Play/Pause/Prev/Next, Download, List -->
                            <div class="special-buttons">
                                <button id="downloadButton"><i class="fas fa-download"></i></button>

                                <div class="mainbuttons">
                                    <button id="prevButton" class="prev"><i class="fa-solid fa-backward-step"></i></button>
                                    <button id="playButton" class="play"><i class="far fa-play-circle"></i> </button>
                                    <button id="nextButton" class="next"><i class="fa-solid fa-forward-step"></i></button>
                                </div>

                                <button id="menuButton"><i id="menuButtonIcon" class="fas fa-bars"></i></button>
                            </div>

                            <!-- BarSongData -->
                            <div class="time">
                                <div class="data">
                                    <p id="songCount" class="songNumber">-/-</p>
                                    <p id="timeCount" class="currentTime"><span class="start">---</span> / <span class="end">---</span></p>
                                </div>

                                <div class="progress">
                                    <input type="range" class="progress-bar" min="0" max="100" step="0.1" value="0" id="progressBar">
                                </div>
                            </div>

                            <!-- Like/Repeat/Random, Volume Control -->
                            <div class="action-button">
                                <div>
                                    <button id="like"><i class="far fa-heart"></i></button>
                                    <button id="shuffle"><i class="fas fa-random"></i></button>
                                    <button id="repeat"><i class="fas fa-redo"></i> </button>
                                </div>
                                <div>
                                    <button class="volMin"><i class="fas fa-volume-high"></i></button>
                                    <input id="volumeControl" type="range" class="volume" min="0" max="1" step="0.01" value="0.5" data-css="0.5">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div>text</div>
                </div>

                <!-- WolfImg -->
                <aside class="wolf">
                    <img src="img/wolf.svg" alt="TheWolfWallpaper">
                </aside>
            </div>

            <!-- Music -->
            <audio id="mysong">
                <source src="" type="audio/mp3">
            </audio>
        </div>
    </main>

    <!-- Developer -->
    <footer>
        <p>&copy;siames.mp3 - developed by mauro pepa - follow me <a href="https://github.com/PEPAXD?tab=stars" target="_blank" title="Visitar-mi-GitHub">"github/pepaxd"</a></p>
    </footer>

    <!-- BubbleScript -->
    <script src="js/bubble.js"></script>

    <!-- mp3SongsList -->
    <script src="js/musicList.js"></script>

    <!-- mp3Controls -->
    <script src="js/controlmp3.js"></script>
</body>
</html>