–player-primary: #1A237E; / رنگ اصلی (آبی نیلی) /

–player-secondary: #5C6BC0; / رنگ دوم (آبی ملایم) /

–player-accent: #FFB300; / رنگ تاکید (کهربایی) /

–player-bg: #ffffff; / پس‌زمینه کارت /

–player-bg-alt: #f5f5f5; / پس‌زمینه دکمه‌ها /

–player-text: #212121; / متن اصلی /

–player-text-light: #616161; / متن روشن‌تر /

–player-border: #E0E0E0; / رنگ حاشیه /

–player-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);

–player-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.1);

–player-font: ‘Vazirmatn’, sans-serif; / فونت وزیرمتن یا فونت دلخواه شما /font-family: var(–player-font);

direction: rtl;

background-color: var(–player-bg);

border-radius: 20px;

box-shadow: var(–player-shadow);

margin: 40px auto;

max-width: 800px;

overflow: hidden;

border: 1px solid var(–player-border);

transition: box-shadow 0.3s ease;

}

.khademi-audio-player:hover {

box-shadow: var(–player-shadow-hover);

}

.khademi-audio-player , .khademi-audio-player ::before, .khademi-audio-player *::after {

box-sizing: border-box;

}

.player-trigger {

display: flex;

align-items: center;

padding: 25px 30px;

cursor: pointer;

transition: background-color 0.3s ease;

}

.player-trigger:hover {

background-color: #fcfcfc;

}

.trigger-icon {

font-size: 2.5rem;

color: var(–player-primary);

margin-left: 20px;

transition: color 0.3s ease;

}

.player-trigger:hover .trigger-icon {

color: var(–player-accent);

}

.trigger-text h3 {

font-family: inherit;

font-size: 1.4rem;

font-weight: 700;

color: var(–player-text);

margin: 0;

line-height: 1.4;

}

.trigger-text p {

font-family: inherit;

font-size: 1rem;

color: var(–player-text-light);

margin: 0;

line-height: 1.5;

}

.player-content {

max-height: 0;

opacity: 0;

visibility: hidden;

transition: max-height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease, padding 0.5s ease;

padding: 0 30px;

border-top: 1px solid var(–player-border);

}

.khademi-audio-player.is-open .player-content {

max-height: 500px;

opacity: 1;

visibility: visible;

padding: 25px 30px;

}

.track-switcher {

display: flex;

background-color: var(–player-bg-alt);

border-radius: 12px;

padding: 5px;

margin-bottom: 25px;

}

.switch-btn {

flex: 1;

padding: 12px 10px;

border: none;

background: transparent;

color: var(–player-text-light);

border-radius: 8px;

cursor: pointer;

font-family: inherit;

font-size: 1rem;

font-weight: 600;

transition: all 0.3s ease;

}

.switch-btn.active {

background: var(–player-accent);

color: var(–player-text);

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

.progress-container {

width: 100%;

height: 7px;

background-color: var(–player-border);

border-radius: 5px;

cursor: pointer;

margin-bottom: 8px;

}

.progress-bar {

width: 0;

height: 100%;

background: linear-gradient(90deg, var(–player-secondary), var(–player-primary));

border-radius: 5px;

transition: width 0.1s linear;

}

.time-display {

display: flex;

justify-content: space-between;

font-size: 0.9rem;

font-weight: 500;

color: var(–player-text-light);

margin-bottom: 20px;

}

.main-controls {

display: flex;

justify-content: center;

align-items: center;

}

.play-pause-btn {

width: 60px;

height: 60px;

background: linear-gradient(135deg, var(–player-secondary), var(–player-primary));

border-radius: 50%;

border: none;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

box-shadow: 0 5px 20px -5px var(–player-primary);

transition: all 0.2s ease;

color: white;

}

.play-pause-btn:hover {

transform: scale(1.1);

box-shadow: 0 8px 25px -8px var(–player-primary);

}

.play-pause-btn i {

font-size: 26px;

}

.pause-icon, .loader { display: none; }

.is-playing .play-icon, .is-loading .play-icon, .is-loading .pause-icon { display: none; }

.is-playing .pause-icon, .is-loading .loader { display: block; }

.loader {

width: 28px; height: 28px;

border: 3px solid rgba(255, 255, 255, 0.3);

border-top-color: white;

border-radius: 50%;

animation: player-spin-animation 1s linear infinite;

}

@keyframes player-spin-animation { to { transform: rotate(360deg); } }

(function() {

// پیدا کردن خود پلیر برای اطمینان از عملکرد مستقل چندین پلیر در یک صفحه

const player = document.currentScript.closest(‘.khademi-audio-player’);

if (!player) return;

const playerTrigger = player.querySelector(‘.player-trigger’);

const playPauseBtn = player.querySelector(‘.play-pause-btn’);

const progressContainer = player.querySelector(‘.progress-container’);

const progressBar = player.querySelector(‘.progress-bar’);

const currentTimeEl = player.querySelector(‘.current-time’);

const totalTimeEl = player.querySelector(‘.total-time’);

const switchBtns = player.querySelectorAll(‘.switch-btn’);

const audioSources = {

summary: player.querySelector(‘audio[data-track-type=”summary”]’),

full: player.querySelector(‘audio[data-track-type=”full”]’)

};

let activeTrackType = ‘summary’;

let currentAudio = audioSources[activeTrackType];

let isFirstPlay = true;

function playAudio() {

document.querySelectorAll(‘audio’).forEach(audio => {

if (audio !== currentAudio) audio.pause();

});

player.classList.add(‘is-playing’);

player.classList.remove(‘is-loading’);

currentAudio.play();

}

function pauseAudio() {

player.classList.remove(‘is-playing’);

currentAudio.pause();

}

function switchTrack(trackType) {

if (!trackType || !audioSources[trackType] || trackType === activeTrackType) return;

const wasPlaying = player.classList.contains(‘is-playing’);

pauseAudio();

currentAudio.currentTime = 0;

activeTrackType = trackType;

currentAudio = audioSources[trackType];

switchBtns.forEach(btn => btn.classList.toggle(‘active’, btn.dataset.track === trackType));

const handleMetadata = () => {

updateTimeDisplay();

if (wasPlaying) playAudio();

};

if (isNaN(currentAudio.duration)) {

player.classList.add(‘is-loading’);

currentAudio.addEventListener(‘loadedmetadata’, handleMetadata, { once: true });

} else { handleMetadata(); }

}

function formatTime(seconds) {

const minutes = Math.floor(seconds / 60);

const secs = Math.floor(seconds % 60);

return `${minutes}:${secs 0) {

const progressPercent = (currentAudio.currentTime / currentAudio.duration) * 100;

progressBar.style.width = `${progressPercent}%`;

currentTimeEl.textContent = formatTime(currentAudio.currentTime);

}

}

function updateTimeDisplay() {

if (currentAudio && !isNaN(currentAudio.duration)) {

totalTimeEl.textContent = formatTime(currentAudio.duration);

} else { totalTimeEl.textContent = “0:00”; }

}

function setProgress(e) {

const width = this.clientWidth;

const clickX = e.offsetX;

if (currentAudio && !isNaN(currentAudio.duration)) {

currentAudio.currentTime = (clickX / width) * currentAudio.duration;

}

}

playerTrigger.addEventListener(‘click’, () => {

player.classList.toggle(‘is-open’);

if (isFirstPlay) {

playAudio();

isFirstPlay = false;

}

});

playPauseBtn.addEventListener(‘click’, () => {

const isPlaying = player.classList.contains(‘is-playing’);

isPlaying ? pauseAudio() : playAudio();

});

switchBtns.forEach(btn => {

btn.addEventListener(‘click’, (e) => {

e.stopPropagation();

switchTrack(btn.dataset.track);

});

});

progressContainer.addEventListener(‘click’, setProgress);

Object.values(audioSources).forEach(audio => {

if (!audio) return;

audio.addEventListener(‘ended’, pauseAudio);

audio.addEventListener(‘timeupdate’, () => { if (audio === currentAudio) updateProgress(); });

audio.addEventListener(‘loadedmetadata’, () => { if (audio === currentAudio) updateTimeDisplay(); player.classList.remove(‘is-loading’); });

audio.addEventListener(‘waiting’, () => { if (audio === currentAudio) player.classList.add(‘is-loading’); });

audio.addEventListener(‘canplay’, () => { if (audio === currentAudio) player.classList.remove(‘is-loading’); });

});

updateTimeDisplay();

})();

–player-primary: #1A237E; / رنگ اصلی (آبی نیلی) /

–player-secondary: #5C6BC0; / رنگ دوم (آبی ملایم) /

–player-accent: #FFB300; / رنگ تاکید (کهربایی) /

–player-bg: #ffffff; / پس‌زمینه کارت /

–player-bg-alt: #f5f5f5; / پس‌زمینه دکمه‌ها /

–player-text: #212121; / متن اصلی /

–player-text-light: #616161; / متن روشن‌تر /

–player-border: #E0E0E0; / رنگ حاشیه /

–player-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);

–player-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.1);

–player-font: ‘Vazirmatn’, sans-serif; / فونت وزیرمتن یا فونت دلخواه شما /font-family: var(–player-font);

direction: rtl;

background-color: var(–player-bg);

border-radius: 20px;

box-shadow: var(–player-shadow);

margin: 40px auto;

max-width: 800px;

overflow: hidden;

border: 1px solid var(–player-border);

transition: box-shadow 0.3s ease;

}

.khademi-audio-player:hover {

box-shadow: var(–player-shadow-hover);

}

.khademi-audio-player , .khademi-audio-player ::before, .khademi-audio-player *::after {

box-sizing: border-box;

}

.player-trigger {

display: flex;

align-items: center;

padding: 25px 30px;

cursor: pointer;

transition: background-color 0.3s ease;

}

.player-trigger:hover {

background-color: #fcfcfc;

}

.trigger-icon {

font-size: 2.5rem;

color: var(–player-primary);

margin-left: 20px;

transition: color 0.3s ease;

}

.player-trigger:hover .trigger-icon {

color: var(–player-accent);

}

.trigger-text h3 {

font-family: inherit;

font-size: 1.4rem;

font-weight: 700;

color: var(–player-text);

margin: 0;

line-height: 1.4;

}

.trigger-text p {

font-family: inherit;

font-size: 1rem;

color: var(–player-text-light);

margin: 0;

line-height: 1.5;

}

.player-content {

max-height: 0;

opacity: 0;

visibility: hidden;

transition: max-height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease, padding 0.5s ease;

padding: 0 30px;

border-top: 1px solid var(–player-border);

}

.khademi-audio-player.is-open .player-content {

max-height: 500px;

opacity: 1;

visibility: visible;

padding: 25px 30px;

}

.track-switcher {

display: flex;

background-color: var(–player-bg-alt);

border-radius: 12px;

padding: 5px;

margin-bottom: 25px;

}

.switch-btn {

flex: 1;

padding: 12px 10px;

border: none;

background: transparent;

color: var(–player-text-light);

border-radius: 8px;

cursor: pointer;

font-family: inherit;

font-size: 1rem;

font-weight: 600;

transition: all 0.3s ease;

}

.switch-btn.active {

background: var(–player-accent);

color: var(–player-text);

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

.progress-container {

width: 100%;

height: 7px;

background-color: var(–player-border);

border-radius: 5px;

cursor: pointer;

margin-bottom: 8px;

}

.progress-bar {

width: 0;

height: 100%;

background: linear-gradient(90deg, var(–player-secondary), var(–player-primary));

border-radius: 5px;

transition: width 0.1s linear;

}

.time-display {

display: flex;

justify-content: space-between;

font-size: 0.9rem;

font-weight: 500;

color: var(–player-text-light);

margin-bottom: 20px;

}

.main-controls {

display: flex;

justify-content: center;

align-items: center;

}

.play-pause-btn {

width: 60px;

height: 60px;

background: linear-gradient(135deg, var(–player-secondary), var(–player-primary));

border-radius: 50%;

border: none;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

box-shadow: 0 5px 20px -5px var(–player-primary);

transition: all 0.2s ease;

color: white;

}

.play-pause-btn:hover {

transform: scale(1.1);

box-shadow: 0 8px 25px -8px var(–player-primary);

}

.play-pause-btn i {

font-size: 26px;

}

.pause-icon, .loader { display: none; }

.is-playing .play-icon, .is-loading .play-icon, .is-loading .pause-icon { display: none; }

.is-playing .pause-icon, .is-loading .loader { display: block; }

.loader {

width: 28px; height: 28px;

border: 3px solid rgba(255, 255, 255, 0.3);

border-top-color: white;

border-radius: 50%;

animation: player-spin-animation 1s linear infinite;

}

@keyframes player-spin-animation { to { transform: rotate(360deg); } }