Scribd
Upload
2 views

html player

This document is an HTML code for a music player interface, featuring a playlist, album cover display, and audio controls. It includes styling for a modern and elegant look, with functionalities to play, pause, change tracks, adjust volume, and share or download music. The player allows users to select from three songs and visually indicates the current track and playback progress.

Uploaded by

lojaheloisaimports
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

html player

This document is an HTML code for a music player interface, featuring a playlist, album cover display, and audio controls. It includes styling for a modern and elegant look, with functionalities to play, pause, change tracks, adjust volume, and share or download music. The player allows users to select from three songs and visually indicates the current track and playback progress.

Uploaded by

lojaheloisaimports
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

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="https://play-
lh.googleusercontent.com/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(this.value)">
<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(this.value)">
<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 = document.getElementById("audio");
var trackName = document.getElementById("trackName");
var albumCover = document.getElementById("albumCover");
var playPauseButton = document.querySelector(".play-pause");
var timeline = document.getElementById("timeline");
var playlist = [
{src: "musica1.mp3", name: "Música 1", cover: "cover1.jpg"},
{src: "musica2.mp3", name: "Música 2", cover: "cover2.jpg"},
{src: "musica3.mp3", name: "Música 3", cover: "cover3.jpg"}
];
var currentTrack = 0;

function togglePlayPause() {
if (audio.paused) {
audio.play();
playPauseButton.innerHTML = "⏸";
} else {
audio.pause();
playPauseButton.innerHTML = "▶";
}
}

function setVolume(value) {
audio.volume = value;
}

function changeTrack(index) {
currentTrack = index;
audio.src = playlist[index].src;
trackName.innerText = playlist[index].name;
albumCover.src = playlist[index].cover;
audio.play();
playPauseButton.innerHTML = "⏸";
}
function previousTrack() {
currentTrack = (currentTrack - 1 + playlist.length) % playlist.length;
changeTrack(currentTrack);
}

function nextTrack() {
currentTrack = (currentTrack + 1) % playlist.length;
changeTrack(currentTrack);
}

function updateTimeline() {
if (!audio.duration) return;
timeline.value = (audio.currentTime / audio.duration) * 100;
}

function seekAudio(value) {
audio.currentTime = (value / 100) * audio.duration;
}

function downloadMusic() {
var link = document.createElement('a');
link.href = audio.src;
link.download = trackName.innerText + ".mp3";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}

function shareMusic() {
var url = window.location.href;
navigator.clipboard.writeText("Estou ouvindo " + trackName.innerText +
" - " + url);
alert("Link da música copiado para a área de transferência!");
}
</script>
</body>
</html>

You might also like