Albums Casey McCreary
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SOUL'D OUT Full-Width MP3 Players</title>
<style>
body {
font-family: 'Poppins', sans-serif;
background: #ececed;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
overflow-x: hidden;
}
.grid-container {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
@media (min-width: 1024px) {
.grid-container {
flex-direction: row;
justify-content: space-between;
}
}
.embed-container {
background: #ffffff;
border-radius: 21px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
width: 100%;
max-width: 1200px;
transition: all 0.3s ease;
text-align: center;
cursor: pointer;
}
.embed-container img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.text-container {
padding: 20px;
background: #f9f9f9;
}
.text-container h1 {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
color: #333;
transition: all 0.3s ease;
}
.text-container:hover h1 {
background: linear-gradient(90deg, #007BFF, #66CCFF);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-container p {
font-size: 14px;
font-weight: 400;
color: #555;
transition: color 0.3s ease;
}
.text-container:hover p {
color: #007BFF;
}
.mp3-player {
display: none;
position: relative;
width: 100%;
background: linear-gradient(135deg, #004085, #007BFF, #4a00e0);
border-radius: 21px;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
overflow: hidden;
text-align: center;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mp3-player.active {
display: flex;
}
.mp3-thumbnail {
width: 100px;
height: 100px;
border-radius: 50%;
background: #ffffff;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.mp3-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.controls {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-top: 15px;
}
.play-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffffff;
color: #007BFF;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
.volume-control {
width: 100px;
}
.timeline {
width: 80%;
height: 4px;
background: #ffffff;
margin: 15px 0;
position: relative;
}
.timeline-progress {
width: 0;
height: 100%;
background: #007BFF;
}
</style>
</head>
<body>
<div class="grid-container">
<!-- Container 1 -->
<div class="embed-container" onclick="togglePlayer(this, 'https://example.com/song1.mp3', 'https://via.placeholder.com/150')">
<img src="https://via.placeholder.com/800x450" alt="Embed 1">
<div class="text-container">
<h1>Dance • Party • Feel Good</h1>
<p>We Are SOUL'D OUT</p>
</div>
</div>
<!-- Container 2 -->
<div class="embed-container" onclick="togglePlayer(this, 'https://example.com/song2.mp3', 'https://via.placeholder.com/150')">
<img src="https://via.placeholder.com/800x450" alt="Embed 2">
<div class="text-container">
<h1>Feel The Vibe</h1>
<p>Dance the night away with SOUL'D OUT</p>
</div>
</div>
<!-- Container 3 -->
<div class="embed-container" onclick="togglePlayer(this, 'https://example.com/song3.mp3', 'https://via.placeholder.com/150')">
<img src="https://via.placeholder.com/800x450" alt="Embed 3">
<div class="text-container">
<h1>MUSTA THE ALBUM VOL 1</h1>
<p>Featuring hits like "IceBarrow" and "Temperatures"</p>
</div>
</div>
</div>
<!-- MP3 Player -->
<div class="mp3-player">
<div class="mp3-thumbnail">
<img src="" alt="Thumbnail">
</div>
<div class="controls">
<div class="play-btn" onclick="togglePlay()">▶</div>
<input type="range" class="volume-control" min="0" max="100" step="1" onchange="setVolume(this)">
</div>
<div class="timeline">
<div class="timeline-progress"></div>
</div>
</div>
<script>
let currentAudio = null;
function togglePlayer(container, audioUrl, thumbnailUrl) {
const player = document.querySelector('.mp3-player');
const thumbnail = player.querySelector('.mp3-thumbnail img');
const playBtn = player.querySelector('.play-btn');
if (currentAudio) {
currentAudio.pause();
currentAudio = null;
playBtn.textContent = '▶';
}
currentAudio = new Audio(audioUrl);
currentAudio.play();
thumbnail.src = thumbnailUrl;
player.classList.add('active');
}
function togglePlay() {
if (currentAudio.paused) {
currentAudio.play();
document.querySelector('.play-btn').textContent = '⏸';
} else {
currentAudio.pause();
document.querySelector('.play-btn').textContent = '▶';
}
}
function setVolume(range) {
if (currentAudio) {
currentAudio.volume = range.value / 100;
}
}
</script>
</body>
</html>