<!
DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Player de Música</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background: #2C3E50; /* Azul profundo, moderno e elegante */
color: #ffffff;
}
.player {
background: rgba(44, 62, 80, 0.85); /* Cor mais suave que combina com o
fundo */
padding: 25px;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
display: inline-block;
margin-top: 40px;
}
.album-cover {
width: 160px;
height: 160px;
border-radius: 10px;
margin-bottom: 15px;
transition: transform 0.3s ease;
}
.album-cover:hover {
transform: scale(1.05);
}
button {
margin: 8px;
padding: 12px 20px;
cursor: pointer;
border: none;
border-radius: 50px;
background: linear-gradient(145deg, #ff6f61, #e74c3c);
color: white;
font-size: 16px;
transition: all 0.3s ease;
}
button:hover {
background: linear-gradient(145deg, #e74c3c, #ff6f61);
transform: translateY(-2px);
}
.playlist {
margin-top: 20px;
text-align: left;
padding: 15px;
border-radius: 10px;
background: #34495E; /* Cor da playlist ajustada para o fundo mais
escuro */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}
.playlist-item {
cursor: pointer;
padding: 8px;
border-bottom: 1px solid #444;
transition: background-color 0.3s ease;
}
.playlist-item:hover {
background: #444444;
}
.controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
align-items: center;
}
.bottom-controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 25px;
}
.play-pause {
font-size: 24px;
width: 60px;
height: 60px;
border-radius: 50%;
background: #ff6f61;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.play-pause:hover {
background: #e74c3c;
transform: scale(1.1);
}
.timeline {
width: 100%;
margin-top: 15px;
background: #444444;
border-radius: 5px;
height: 5px;
-webkit-appearance: none;
}
.timeline::-webkit-slider-runnable-track {
background: #ff6f61;
}
.timeline::-webkit-slider-thumb {
background: #ffffff;
border-radius: 50%;
width: 15px;
height: 15px;
-webkit-appearance: none;
}
</style>
</head>
<body>
<div class="player">
<h2>Player de Música</h2>
<img id="albumCover" class="album-cover" src="[Link]
[Link]/YImtNmRtt854TWLJWGvUWn27oYeH_7DcI6VnAUsztof3xQ9v43bxft9rQF
ESuwMnY1sy" alt="Capa do Álbum">
<audio id="audio" src="" ontimeupdate="updateTimeline()"></audio>
<p id="trackName">Selecione uma música</p>
<input type="range" id="timeline" class="timeline" min="0" max="100"
value="0" step="1" onchange="seekAudio([Link])">
<div class="controls">
<button onclick="previousTrack()">⏮</button>
<button class="play-pause" onclick="togglePlayPause()">▶</button>
<button onclick="nextTrack()">⏭</button>
</div>
<input type="range" id="volume" min="0" max="1" step="0.1" value="1"
onchange="setVolume([Link])">
<div class="playlist">
<h3>Playlist</h3>
<div class="playlist-item" onclick="changeTrack(0)">Música 1</div>
<div class="playlist-item" onclick="changeTrack(1)">Música 2</div>
<div class="playlist-item" onclick="changeTrack(2)">Música 3</div>
</div>
<div class="bottom-controls">
<button onclick="downloadMusic()">⬇ Download</button>
<button onclick="shareMusic()">🔗 Compartilhar</button>
</div>
</div>
<script>
var audio = [Link]("audio");
var trackName = [Link]("trackName");
var albumCover = [Link]("albumCover");
var playPauseButton = [Link](".play-pause");
var timeline = [Link]("timeline");
var playlist = [
{src: "musica1.mp3", name: "Música 1", cover: "[Link]"},
{src: "musica2.mp3", name: "Música 2", cover: "[Link]"},
{src: "musica3.mp3", name: "Música 3", cover: "[Link]"}
];
var currentTrack = 0;
function togglePlayPause() {
if ([Link]) {
[Link]();
[Link] = "⏸";
} else {
[Link]();
[Link] = "▶";
}
}
function setVolume(value) {
[Link] = value;
}
function changeTrack(index) {
currentTrack = index;
[Link] = playlist[index].src;
[Link] = playlist[index].name;
[Link] = playlist[index].cover;
[Link]();
[Link] = "⏸";
}
function previousTrack() {
currentTrack = (currentTrack - 1 + [Link]) % [Link];
changeTrack(currentTrack);
}
function nextTrack() {
currentTrack = (currentTrack + 1) % [Link];
changeTrack(currentTrack);
}
function updateTimeline() {
if (![Link]) return;
[Link] = ([Link] / [Link]) * 100;
}
function seekAudio(value) {
[Link] = (value / 100) * [Link];
}
function downloadMusic() {
var link = [Link]('a');
[Link] = [Link];
[Link] = [Link] + ".mp3";
[Link](link);
[Link]();
[Link](link);
}
function shareMusic() {
var url = [Link];
[Link]("Estou ouvindo " + [Link] +
" - " + url);
alert("Link da música copiado para a área de transferência!");
}
</script>
</body>
</html>