├── LICENSE
├── assets
    ├── UI.webp
    ├── css
    │   └── style.css
    ├── img
    │   └── image.jpg
    ├── js
    │   └── main.js
    └── songs
    │   ├── Alex Grohl - Stomping Rock.mp3
    │   ├── Coma Media - Jazzy Abstract Beat.mp3
    │   ├── Coma Media - Sexy Fashion Beats.mp3
    │   ├── FASSounds - Best Time.mp3
    │   └── Gvidon - Guitar Electro Sport Trailer.mp3
├── index.html
└── readme.md


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Alan Cruz
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/assets/UI.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanlucascruz/web-comp-audio-player/50aa00aab2e6a62feaebe1cdde1c0f824ab2ff70/assets/UI.webp


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::before,
  3 | *::after {
  4 |   box-sizing: border-box;
  5 | }
  6 | html,
  7 | body {
  8 |   height: 100%;
  9 | }
 10 | body {
 11 |   font-family: "Lato", system-ui, -apple-system, "Segoe UI";
 12 |   background-color: #eaeaea;
 13 |   color: #001f3f;
 14 |   margin: 0;
 15 |   overflow: hidden;
 16 | }
 17 | .container {
 18 |   display: flex;
 19 |   align-items: center;
 20 |   justify-content: center;
 21 |   height: 100%;
 22 |   overflow: hidden;
 23 | }
 24 | .player {
 25 |   width: 512px;
 26 |   padding: 48px 64px;
 27 |   border-radius: 36px;
 28 |   background: #eaeaea;
 29 |   box-shadow: 41px 41px 82px #bebebe, -41px -41px 82px #ffffff;
 30 | }
 31 | .song-name {
 32 |   margin: 0;
 33 |   margin-bottom: 8px;
 34 |   text-align: center;
 35 | }
 36 | .song-author {
 37 |   margin: 0;
 38 |   color: #a5aaaf;
 39 |   text-align: center;
 40 | }
 41 | .player-progress {
 42 |   margin-top: 36px;
 43 | }
 44 | .player-progress .progress-values {
 45 |   display: flex;
 46 |   justify-content: space-between;
 47 |   color: #a5aaaf;
 48 |   font-size: 14px;
 49 | }
 50 | /* .player-progress progress {
 51 |   width: 100%;
 52 |   height: 5px;
 53 |   -webkit-appearance: none;
 54 |   appearance: none;
 55 | }
 56 | .player-progress progress::-webkit-progress-bar {
 57 |   background-color: #c3c7cc;
 58 |   border-radius: 3px;
 59 | }
 60 | .player-progress progress::-webkit-progress-value {
 61 |   background: linear-gradient(to right, #5232c1, #12ccd0);
 62 |   border-radius: 3px;
 63 | } */
 64 | .player-progress input {
 65 |   -webkit-appearance: none;
 66 |   width: 100%;
 67 |   height: 6px;
 68 |   border-radius: 3px;
 69 |   background: #cdd2d7;
 70 |   outline: none;
 71 |   overflow: hidden;
 72 | }
 73 | .player-progress input::-webkit-slider-thumb {
 74 |   -webkit-appearance: none;
 75 |   appearance: none;
 76 |   width: 6px;
 77 |   height: 6px;
 78 |   border-radius: 50%;
 79 |   background: #f0f0f0;
 80 |   box-shadow: -303px 0 0 300px #9ea1a5;
 81 |   cursor: pointer;
 82 | }
 83 | .player-buttons {
 84 |   display: flex;
 85 |   align-items: center;
 86 |   justify-content: center;
 87 |   margin-top: 24px;
 88 |   gap: 24px;
 89 | }
 90 | .player-buttons .btn {
 91 |   font-size: 16px;
 92 |   width: 48px;
 93 |   height: 48px;
 94 |   color: #6f7275;
 95 |   background: linear-gradient(145deg, #cacaca, #f0f0f0);
 96 |   border: none;
 97 |   border-radius: 50px;
 98 |   box-shadow: 5px 5px 10px #aaaaaa, -5px -5px 10px #ffffff;
 99 |   cursor: pointer;
100 | }
101 | .player-buttons .btn-activated {
102 |   background: linear-gradient(145deg, #f0f0f0, #cacaca);
103 | }
104 | .player-buttons .btn-activated i {
105 |   background: linear-gradient(to right, #5232c1, #15f1f1);
106 |   -webkit-background-clip: text;
107 |   -webkit-text-fill-color: transparent;
108 | }
109 | .player-buttons .btn.btn-prev i {
110 |   display: inline-block;
111 |   margin-top: 2px;
112 |   margin-right: 2px;
113 | }
114 | .player-buttons .btn.btn-play {
115 |   font-size: 36px;
116 |   width: 76px;
117 |   height: 76px;
118 |   box-shadow: 6px 6px 13px #aaaaaa, -6px -6px 13px #ffffff;
119 | }
120 | .player-buttons .btn.btn-play i {
121 |   display: inline-block;
122 |   margin-top: 4px;
123 |   margin-left: 2px;
124 |   background: linear-gradient(to right, #5232c1, #15f1f1);
125 |   -webkit-background-clip: text;
126 |   -webkit-text-fill-color: transparent;
127 | }
128 | .player-buttons .btn.btn-next i {
129 |   display: inline-block;
130 |   margin-top: 2px;
131 |   margin-left: 2px;
132 | }
133 | .player-buttons .dropdown {
134 |   position: relative;
135 | }
136 | .player-buttons .dropdown-content {
137 |   display: none;
138 |   /* background-color: red; */
139 |   position: absolute;
140 |   left: 16px;
141 |   bottom: 5px;
142 |   padding: 16px;
143 |   width: 104px;
144 |   z-index: 1;
145 |   transform: rotate(270deg);
146 | }
147 | .player-buttons .dropdown-content input {
148 |   -webkit-appearance: none;
149 |   width: 100%;
150 |   height: 6px;
151 |   border-radius: 3px;
152 |   background: #cdd2d7;
153 |   outline: none;
154 |   overflow: hidden;
155 | }
156 | .player-buttons .dropdown-content input::-webkit-slider-thumb {
157 |   -webkit-appearance: none;
158 |   appearance: none;
159 |   width: 6px;
160 |   height: 6px;
161 |   border-radius: 50%;
162 |   background: #f0f0f0;
163 |   box-shadow: -303px 0 0 300px #9ea1a5;
164 |   cursor: pointer;
165 | }
166 | .player-buttons .dropdown:hover .dropdown-content {
167 |   display: block;
168 | }
169 | @media (max-width: 768px) {
170 |   .player {
171 |     width: 100%;
172 |     box-shadow: none;
173 |     padding: 24px;
174 |   }
175 |   .player-buttons .btn {
176 |     width: 42px;
177 |     height: 42px;
178 |   }
179 |   .player-buttons .btn.btn-play {
180 |     width: 56px;
181 |     height: 56px;
182 |   }
183 |   .player-buttons .dropdown-content {
184 |     left: 4px;
185 |   }
186 | }
187 | 


--------------------------------------------------------------------------------
/assets/img/image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanlucascruz/web-comp-audio-player/50aa00aab2e6a62feaebe1cdde1c0f824ab2ff70/assets/img/image.jpg


--------------------------------------------------------------------------------
/assets/js/main.js:
--------------------------------------------------------------------------------
  1 | const btnPlay = document.querySelector("#btn-play");
  2 | const btnPlayIcon = document.querySelector("#btn-play-icon");
  3 | const btnRepeat = document.querySelector("#btn-repeat");
  4 | const btnPrev = document.querySelector("#btn-prev");
  5 | const btnNext = document.querySelector("#btn-next");
  6 | const btnVolume = document.querySelector("#btn-volume");
  7 | const btnVolumeIcon = document.querySelector("#btn-volume i");
  8 | const playerVolume = document.querySelector("#player-volume");
  9 | const songName = document.querySelector("#song-name");
 10 | const songAuthor = document.querySelector("#song-author");
 11 | const playerCurrentTime = document.querySelector("#player-current-time");
 12 | const playerDuration = document.querySelector("#player-duration");
 13 | const playerProgress = document.querySelector("#player-progress");
 14 | const audioPlayer = document.querySelector("#audio-player");
 15 | 
 16 | let currentSong = 0;
 17 | let repeatSong = false;
 18 | 
 19 | const songs = [
 20 |   {
 21 |     name: "Stomping Rock",
 22 |     author: "Alex Grohl",
 23 |     path: "./assets/songs/Alex Grohl - Stomping Rock.mp3",
 24 |   },
 25 |   {
 26 |     name: "Jazzy Abstract Beat",
 27 |     author: "Coma Media",
 28 |     path: "./assets/songs/Coma Media - Jazzy Abstract Beat.mp3",
 29 |   },
 30 |   {
 31 |     name: "Sexy Fashion Beats",
 32 |     author: "Coma Media",
 33 |     path: "./assets/songs/Coma Media - Sexy Fashion Beats.mp3",
 34 |   },
 35 |   {
 36 |     name: "Best Time",
 37 |     author: "FASSounds",
 38 |     path: "./assets/songs/FASSounds - Best Time.mp3",
 39 |   },
 40 |   {
 41 |     name: "Guitar Electro Sport",
 42 |     author: "Gvidon",
 43 |     path: "./assets/songs/Gvidon - Guitar Electro Sport Trailer.mp3",
 44 |   },
 45 | ];
 46 | 
 47 | btnPlay.addEventListener("click", () => togglePlaySong());
 48 | btnPrev.addEventListener("click", () => changeSong(false));
 49 | btnNext.addEventListener("click", () => changeSong());
 50 | btnRepeat.addEventListener("click", () => toggleRepeatSong());
 51 | playerVolume.addEventListener("input", () => changeVolume());
 52 | playerProgress.addEventListener("input", () => changeTime());
 53 | audioPlayer.addEventListener("timeupdate", () => timeUpdate());
 54 | audioPlayer.addEventListener("ended", () => ended());
 55 | 
 56 | const togglePlaySong = () => {
 57 |   if (audioPlayer.paused) {
 58 |     audioPlayer.play();
 59 |     btnPlayIcon.classList.replace("bi-play-fill", "bi-pause-fill");
 60 |   } else {
 61 |     audioPlayer.pause();
 62 |     btnPlayIcon.classList.replace("bi-pause-fill", "bi-play-fill");
 63 |   }
 64 | };
 65 | 
 66 | const changeSong = (next = true) => {
 67 |   if (next && currentSong < songs.length - 1) {
 68 |     currentSong++;
 69 |   } else if (!next && currentSong > 0) {
 70 |     currentSong--;
 71 |   } else {
 72 |     return;
 73 |   }
 74 | 
 75 |   updatePlayer();
 76 |   togglePlaySong();
 77 | };
 78 | 
 79 | const updatePlayer = () => {
 80 |   const song = songs[currentSong];
 81 | 
 82 |   songName.innerHTML = song.name;
 83 |   songAuthor.innerHTML = song.author;
 84 |   audioPlayer.src = song.path;
 85 |   playerProgress.value = audioPlayer.currentTime;
 86 | };
 87 | 
 88 | const toggleRepeatSong = () => {
 89 |   repeatSong = !repeatSong;
 90 |   btnRepeat.classList.toggle("btn-activated");
 91 | };
 92 | 
 93 | const timeUpdate = () => {
 94 |   const { currentTime, duration } = audioPlayer;
 95 | 
 96 |   if (isNaN(duration)) return;
 97 | 
 98 |   playerDuration.innerHTML = formatSecondsToMinutes(duration);
 99 |   playerCurrentTime.innerHTML = formatSecondsToMinutes(currentTime);
100 |   playerProgress.max = duration;
101 |   playerProgress.value = currentTime;
102 | };
103 | 
104 | const changeVolume = () => {
105 |   const { value } = playerVolume;
106 | 
107 |   audioPlayer.volume = value;
108 | 
109 |   if (value == 0) {
110 |     btnVolumeIcon.classList.replace("bi-volume-up-fill", "bi-volume-mute-fill");
111 |   } else {
112 |     btnVolumeIcon.classList.replace("bi-volume-mute-fill", "bi-volume-up-fill");
113 |   }
114 | };
115 | 
116 | const changeTime = () => {
117 |   audioPlayer.currentTime = playerProgress.value;
118 | };
119 | 
120 | const formatSecondsToMinutes = (seconds) => {
121 |   return new Date(seconds * 1000).toISOString().slice(14, 19);
122 | };
123 | 
124 | const ended = () => {
125 |   repeatSong ? togglePlaySong() : changeSong(true);
126 | };
127 | 
128 | window.onload = () => {
129 |   updatePlayer();
130 | };
131 | 


--------------------------------------------------------------------------------
/assets/songs/Alex Grohl - Stomping Rock.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanlucascruz/web-comp-audio-player/50aa00aab2e6a62feaebe1cdde1c0f824ab2ff70/assets/songs/Alex Grohl - Stomping Rock.mp3


--------------------------------------------------------------------------------
/assets/songs/Coma Media - Jazzy Abstract Beat.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanlucascruz/web-comp-audio-player/50aa00aab2e6a62feaebe1cdde1c0f824ab2ff70/assets/songs/Coma Media - Jazzy Abstract Beat.mp3


--------------------------------------------------------------------------------
/assets/songs/Coma Media - Sexy Fashion Beats.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanlucascruz/web-comp-audio-player/50aa00aab2e6a62feaebe1cdde1c0f824ab2ff70/assets/songs/Coma Media - Sexy Fashion Beats.mp3


--------------------------------------------------------------------------------
/assets/songs/FASSounds - Best Time.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanlucascruz/web-comp-audio-player/50aa00aab2e6a62feaebe1cdde1c0f824ab2ff70/assets/songs/FASSounds - Best Time.mp3


--------------------------------------------------------------------------------
/assets/songs/Gvidon - Guitar Electro Sport Trailer.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alanlucascruz/web-comp-audio-player/50aa00aab2e6a62feaebe1cdde1c0f824ab2ff70/assets/songs/Gvidon - Guitar Electro Sport Trailer.mp3


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Avance Dev • Audio Player</title>
 8 | 
 9 |     <!-- Google Fonts -->
10 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
12 |     <link
13 |       href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
14 |       rel="stylesheet"
15 |     />
16 | 
17 |     <!-- Bootstrap Icons -->
18 |     <link
19 |       rel="stylesheet"
20 |       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
21 |     />
22 | 
23 |     <!-- Style CSS -->
24 |     <link rel="stylesheet" href="assets/css/style.css" />
25 |   </head>
26 |   <body>
27 |     <div class="container">
28 |       <div class="player">
29 |         <audio id="audio-player"></audio>
30 | 
31 |         <h2 id="song-name" class="song-name"></h2>
32 |         <p id="song-author" class="song-author"></p>
33 | 
34 |         <div class="player-progress">
35 |           <div class="progress-values">
36 |             <span id="player-current-time">--:--</span>
37 |             <span id="player-duration">--:--</span>
38 |           </div>
39 |           <!-- <progress id="player-progress"></progress> -->
40 |           <input type="range" id="player-progress" value="50" />
41 |         </div>
42 | 
43 |         <div class="player-buttons">
44 |           <button id="btn-repeat" class="btn btn-repeat">
45 |             <i class="bi bi-repeat"></i>
46 |           </button>
47 |           <button id="btn-prev" class="btn btn-prev">
48 |             <i class="bi bi-rewind-fill"></i>
49 |           </button>
50 |           <button id="btn-play" class="btn btn-play">
51 |             <i id="btn-play-icon" class="bi bi-play-fill"></i>
52 |           </button>
53 |           <button id="btn-next" class="btn btn-next">
54 |             <i class="bi bi-fast-forward-fill"></i>
55 |           </button>
56 | 
57 |           <div class="dropdown">
58 |             <button id="btn-volume" class="btn btn-volume">
59 |               <i class="bi bi-volume-up-fill"></i>
60 |             </button>
61 | 
62 |             <div class="dropdown-content">
63 |               <input
64 |                 type="range"
65 |                 id="player-volume"
66 |                 value="1"
67 |                 min="0"
68 |                 max="1"
69 |                 step="0.01"
70 |               />
71 |             </div>
72 |           </div>
73 |         </div>
74 |       </div>
75 |     </div>
76 | 
77 |     <script src="assets/js/main.js"></script>
78 |   </body>
79 | </html>
80 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Demonstração
2 | 
3 | [Clique aqui para ver uma demonstração](https://alanlucascruz.github.io/web-comp-audio-player/)
4 | 


--------------------------------------------------------------------------------