<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Song Snippet Player</title>
<style>
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.player-container {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
text-align: center;
max-width: 400px;
}
h1 {
margin: 0 0 10px 0;
color: #333;
font-size: 24px;
}
.subtitle {
color: #666;
margin-bottom: 30px;
font-size: 14px;
}
.play-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 50px;
padding: 20px 40px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.play-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}
.play-button:active {
transform: translateY(0);
}
.play-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.info {
margin-top: 25px;
padding: 15px;
background: #f5f5f5;
border-radius: 10px;
font-size: 14px;
color: #666;
}
.progress-bar {
width: 100%;
height: 6px;
background: #e0e0e0;
border-radius: 3px;
margin-top: 20px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
width: 0%;
transition: width 0.3s;
}
.time-display {
margin-top: 10px;
font-size: 12px;
color: #888;
}
</style>
</head>
<body>
<div class="player-container">
<h1>🎵 Song Snippet Player</h1>
<p class="subtitle">Play 10 seconds at a time</p>
<button id="playBtn" class="play-button">Play Next 10s</button>
<div class="progress-bar">
<div id="progressFill" class="progress-fill"></div>
</div>
<div class="time-display" id="timeDisplay">Ready to play</div>
<div class="info">
<strong>How it works:</strong><br>
Each click plays the next 10 seconds of your song. The player remembers where you left off!
</div>
</div>
<audio id="audio"></audio>
<script>
const audio = document.getElementById('audio');
const playBtn = document.getElementById('playBtn');
const progressFill = document.getElementById('progressFill');
const timeDisplay = document.getElementById('timeDisplay');
let currentPosition = 0;
let totalDuration = 0;
const snippetDuration = 10; // 10 seconds
// Set the audio source to your R2 bucket file
audio.src = 'https://pub-c322ad39655a4cd7883c56e82daa0eae.r2.dev/BOYSBOYSBOYS.mp3';
audio.addEventListener('loadedmetadata', () => {
totalDuration = audio.duration;
updateDisplay();
});
audio.addEventListener('error', (e) => {
const errorDetails = {
code: audio.error?.code,
message: audio.error?.message,
MEDIA_ERR_ABORTED: 1,
MEDIA_ERR_NETWORK: 2,
MEDIA_ERR_DECODE: 3,
MEDIA_ERR_SRC_NOT_SUPPORTED: 4
};
console.error('Audio error details:', errorDetails);
console.error('Error code:', audio.error?.code);
let errorMsg = 'Error loading audio. ';
if (audio.error?.code === 2) errorMsg += 'Network error - check CORS settings.';
else if (audio.error?.code === 4) errorMsg += 'Format not supported or file not found.';
else errorMsg += 'Check console for details.';
alert(errorMsg);
playBtn.disabled = false;
playBtn.textContent = 'Error Loading Audio';
});
audio.addEventListener('ended', () => {
playBtn.disabled = false;
playBtn.textContent = 'Play Next 10s';
});
playBtn.addEventListener('click', () => {
if (!audio.src) {
alert('Please set the audio source in the code (audio.src = "your-file.mp3")');
return;
}
// If we've reached the end, start over
if (currentPosition >= totalDuration) {
currentPosition = 0;
}
audio.currentTime = currentPosition;
audio.play();
playBtn.disabled = true;
playBtn.textContent = 'Playing...';
// Stop after 10 seconds
setTimeout(() => {
audio.pause();
currentPosition = audio.currentTime;
playBtn.disabled = false;
playBtn.textContent = 'Play Next 10s';
updateDisplay();
// Check if we've reached the end
if (currentPosition >= totalDuration - 0.5) {
currentPosition = 0;
timeDisplay.textContent = 'Song complete! Click to restart';
}
}, snippetDuration * 1000);
updateDisplay();
});
function updateDisplay() {
if (totalDuration > 0) {
const progress = (currentPosition / totalDuration) * 100;
progressFill.style.width = progress + '%';
const currentMin = Math.floor(currentPosition / 60);
const currentSec = Math.floor(currentPosition % 60);
const totalMin = Math.floor(totalDuration / 60);
const totalSec = Math.floor(totalDuration % 60);
timeDisplay.textContent = `${currentMin}:${currentSec.toString().padStart(2, '0')} / ${totalMin}:${totalSec.toString().padStart(2, '0')}`;
}
}
// Update progress bar while playing
audio.addEventListener('timeupdate', () => {
if (!audio.paused) {
const progress = (audio.currentTime / totalDuration) * 100;
progressFill.style.width = progress + '%';
}
});
</script>
</body>
</html>