🎙️ اسمع تجربة أحد زبائننا
تجربة حقيقية من أحد زبائننا
.custom-audio-box{
direction: rtl;
position: relative;
background: linear-gradient(
135deg,
#FFFDF7 0%,
#F8F3E6 55%,
#F2E8CE 100%
);
border: 2px solid #C99A28;
border-radius: 20px;
padding: 22px 20px 18px;
box-shadow:
0 10px 28px rgba(55,90,45,.10),
0 3px 8px rgba(0,0,0,.05);
overflow: hidden;
}
/* GOLD TOP LINE */
.custom-audio-box:before{
content:"";
position:absolute;
top:0;
right:0;
left:0;
height:5px;
background:linear-gradient(
90deg,
#A77712,
#E5B83F,
#A77712
);
}
/* TITLE */
.audio-title{
color:#255B32;
font-family:"Cairo", sans-serif;
font-size:22px;
font-weight:800;
text-align:center;
margin-bottom:16px;
}
/* PLAYER */
.audio-player{
display:flex;
align-items:center;
gap:14px;
background:#FFFFFF;
border:1px solid rgba(201,154,40,.35);
border-radius:15px;
padding:10px 14px;
box-shadow:
0 5px 16px rgba(37,91,50,.08);
}
/* PLAY BUTTON */
.play-btn{
width:46px;
height:46px;
min-width:46px;
border:none;
border-radius:50%;
background:linear-gradient(
135deg,
#2F713D,
#1E522A
);
color:white;
font-size:18px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.25s ease;
box-shadow:
0 4px 12px rgba(37,91,50,.25);
}
.play-btn:hover{
transform:scale(1.06);
}
/* CENTER */
.audio-center{
flex:1;
}
/* PROGRESS */
.progress{
width:100%;
height:6px;
appearance:none;
-webkit-appearance:none;
background:#E6DDC7;
border-radius:20px;
outline:none;
cursor:pointer;
}
/* TRACK - CHROME */
.progress::-webkit-slider-runnable-track{
height:6px;
border-radius:20px;
background:#E6DDC7;
}
/* THUMB - CHROME */
.progress::-webkit-slider-thumb{
-webkit-appearance:none;
width:16px;
height:16px;
margin-top:-5px;
background:#C99A28;
border:3px solid #FFF;
border-radius:50%;
box-shadow:
0 2px 5px rgba(0,0,0,.2);
}
/* FIREFOX */
.progress::-moz-range-track{
height:6px;
border-radius:20px;
background:#E6DDC7;
}
.progress::-moz-range-thumb{
width:16px;
height:16px;
background:#C99A28;
border:3px solid white;
border-radius:50%;
}
/* TIME */
.audio-times{
display:flex;
justify-content:space-between;
margin-top:6px;
color:#6E6250;
font-family:Arial, sans-serif;
font-size:12px;
}
/* VOLUME */
.volume-btn{
border:none;
background:transparent;
font-size:21px;
cursor:pointer;
padding:4px;
}
/* LABEL */
.audio-label{
width:fit-content;
margin:14px auto 0;
padding:7px 16px;
background:rgba(201,154,40,.12);
border:1px solid rgba(201,154,40,.35);
border-radius:50px;
color:#8B650F;
font-family:"Cairo", sans-serif;
font-size:13px;
font-weight:700;
}
/* MOBILE */
@media(max-width:767px){
.custom-audio-box{
padding:18px 14px 15px;
border-radius:16px;
}
.audio-title{
font-size:18px;
}
.audio-player{
gap:9px;
padding:9px 10px;
}
.play-btn{
width:40px;
height:40px;
min-width:40px;
}
.volume-btn{
font-size:18px;
}
.audio-label{
font-size:12px;
}
}
document.querySelectorAll('.custom-audio-box').forEach(function(box){
const audio = box.querySelector('.real-audio');
const playBtn = box.querySelector('.play-btn');
const volumeBtn = box.querySelector('.volume-btn');
const progress = box.querySelector('.progress');
const current = box.querySelector('.current-time');
const duration = box.querySelector('.duration');
function formatTime(seconds){
if(isNaN(seconds)) return '00:00';
const min = Math.floor(seconds / 60);
const sec = Math.floor(seconds % 60);
return String(min).padStart(2,'0') + ':' +
String(sec).padStart(2,'0');
}
audio.addEventListener('loadedmetadata', function(){
duration.textContent = formatTime(audio.duration);
});
playBtn.addEventListener('click', function(){
if(audio.paused){
audio.play();
playBtn.textContent = '❚❚';
}else{
audio.pause();
playBtn.textContent = '▶';
}
});
audio.addEventListener('timeupdate', function(){
if(audio.duration){
progress.value =
(audio.currentTime / audio.duration) * 100;
current.textContent =
formatTime(audio.currentTime);
}
});
progress.addEventListener('input', function(){
if(audio.duration){
audio.currentTime =
(progress.value / 100) * audio.duration;
}
});
volumeBtn.addEventListener('click', function(){
audio.muted = !audio.muted;
volumeBtn.textContent =
audio.muted ? '🔇' : '🔊';
});
audio.addEventListener('ended', function(){
playBtn.textContent = '▶';
progress.value = 0;
});
});
