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

horario de eventos

Un código de smartarray391

Un código de gherhz

HTML

CSS

JS

Recomendado

horario de eventos

Un código de smartarray391

Un código de gherhz

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS