Webleb - fragmentos de código - Estructura HTML del reproductor de iPod neumórfico

HTML

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #e0e0e0;
  font-family: Arial, sans-serif;
}

.ipod-container {
  width: 300px;
  height: 500px;
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow: 20px 20px 60px #bebebe,
              -20px -20px 60px #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.screen {
  width: 250px;
  height: 300px;
  background: #e0e0e0;
  border-radius: 20px;
  box-shadow: inset 10px 10px 30px #bebebe,
              inset -10px -10px 30px #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.song-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.artist, .track {
  color: #333;
  text-align: center;
}

.progress-bar {
  width: 200px;
  height: 10px;
  background: #bebebe;
  border-radius: 5px;
  overflow: hidden;
}

.progress {
  width: 0;
  height: 100%;
  background: #4CAF50;
}

.click-wheel {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: #e0e0e0;
  box-shadow: 10px 10px 30px #bebebe,
              -10px -10px 30px #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-button {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e0e0e0;
  box-shadow: inset 5px 5px 15px #bebebe,
              inset -5px -5px 15px #ffffff;
  position: absolute;
  z-index: 10;
}

.menu-button, .prev-button, .next-button, .play-pause-button {
  position: absolute;
  background: #e0e0e0;
  border-radius: 10px;
  padding: 5px 10px;
  box-shadow: 3px 3px 6px #bebebe,
              -3px -3px 6px #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.menu-button {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.prev-button {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

.next-button {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.play-pause-button {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.menu-button:active, .prev-button:active, 
.next-button:active, .play-pause-button:active {
  box-shadow: inset 3px 3px 6px #bebebe,
              inset -3px -3px 6px #ffffff;
}

JS

// Sample playlist (replace with your own tracks)
const playlist = [
  {
    artist: 'Artist 1',
    track: 'Song Title 1',
    src: 'path/to/song1.mp3'
  },
  {
    artist: 'Artist 2',
    track: 'Song Title 2',
    src: 'path/to/song2.mp3'
  }
];

let currentTrackIndex = 0;
const audioPlayer = document.getElementById('audio-player');
const artistElement = document.querySelector('.artist');
const trackElement = document.querySelector('.track');
const progressBar = document.querySelector('.progress');

const menuButton = document.querySelector('.menu-button');
const prevButton = document.querySelector('.prev-button');
const nextButton = document.querySelector('.next-button');
const playPauseButton = document.querySelector('.play-pause-button');

function loadTrack(index) {
  const track = playlist[index];
  audioPlayer.src = track.src;
  artistElement.textContent = track.artist;
  trackElement.textContent = track.track;
}

function updateProgressBar() {
  const percentage = (audioPlayer.currentTime / audioPlayer.duration) * 100;
  progressBar.style.width = `${percentage}%`;
}

menuButton.addEventListener('click', () => {
  // Implement menu functionality
  console.log('Menu clicked');
});

prevButton.addEventListener('click', () => {
  currentTrackIndex = (currentTrackIndex - 1 + playlist.length) % playlist.length;
  loadTrack(currentTrackIndex);
  audioPlayer.play();
});

nextButton.addEventListener('click', () => {
  currentTrackIndex = (currentTrackIndex + 1) % playlist.length;
  loadTrack(currentTrackIndex);
  audioPlayer.play();
});

playPauseButton.addEventListener('click', () => {
  if (audioPlayer.paused) {
    audioPlayer.play();
  } else {
    audioPlayer.pause();
  }
});

audioPlayer.addEventListener('timeupdate', updateProgressBar);

// Initialize the first track
loadTrack(currentTrackIndex);

Estructura HTML del reproductor de iPod neumórfico

Recomendado

Formulario HTML de transferencia de monedas con selección de pago

Plantilla HTML para sitio web de películas

Un código de logicalcode2

HTML

CSS

JS

Recomendado

Formulario HTML de transferencia de monedas con selección de pago

Plantilla HTML para sitio web de películas

Un código de logicalcode2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS