न्यूमॉर्फिक आईपॉड प्लेयर HTML संरचना

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

1 March 2025

सोशल मीडिया लिंक कार्ड HTML

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);

न्यूमॉर्फिक आईपॉड प्लेयर HTML संरचना

अनुशंसित

HTML CSS आधुनिक नेवबार

HTML लॉगिन पृष्ठ टेम्पलेट

सोशल मीडिया लिंक कार्ड HTML

HTML

CSS

JS

अनुशंसित

HTML CSS आधुनिक नेवबार

HTML लॉगिन पृष्ठ टेम्पलेट

सोशल मीडिया लिंक कार्ड HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS