Xenforo audio player;
Responsive (pc ve mobil) uyumluluk, Başlat, beklet, durdur butonları, Ses seviyesi ayarlama (sadece pc) İlerleme çubuğu, İstediğiniz sayıda parça ekleme ve seçim yapma, Parçaları sunucunuzda ya da github gibi platformlara yükleme, Tüm alanlar ve renkler admin panelden özelleştirilebilir.Bir html widget oluşturun aşağıdaki şablonu ekleyip kaydedin;
Görüntüleme alanı olarak forumların üstü ya da altı gibi bir alan seçin,
Gelişmiş mod alanına tik koyun.
HTML:
<style>
.mp3-player {
width: 100%;
background-color: #76a87a;
color: #e4e9f0;
font-weight: bold;
padding: 10px;
border-radius: 8px;
box-shadow: 2px 4px 4px #cccaca;
box-sizing: border-box;
margin-bottom: 15px;
}
.player-row {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.controls-wrapper {
border: 2px solid #95bf96;
border-radius: 6px;
padding: 6.3px;
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
flex-shrink: 0;
background-color: #7bad7f;
box-sizing: border-box;
}
.progress-border {
border: 2px solid #95bf96;
border-radius: 6px;
padding: 6.3px;
display: flex;
align-items: center;
gap: 10px;
flex-grow: 1;
min-width: 200px;
background-color: #7bad7f;
box-sizing: border-box;
}
.time {
font-size: 15px;
min-width: 40px;
text-align: center;
}
.progress-container {
flex-grow: 1;
background-color: #a1c2a3;
border-radius: 6px;
height: 10px;
cursor: pointer;
position: relative;
}
.progress {
background-color: #a1c2a3;
border-right: 3px solid white;
height: 100%;
width: 0%;
border-radius: 1px;
transition: width 0.2s;
}
.controls {
display: flex;
align-items: center;
gap: 15px;
}
.controls button {
background-color: transparent;
border: none;
color: #e4e9f0;
font-size: 15px;
cursor: pointer;
transition: color 0.3s;
}
.controls button:hover {
color: #97bdb5;
}
.volume-slider {
display: flex;
align-items: center;
gap: 5px;
}
.volume-slider input[type="range"] {
width: 100px;
}
.track-selector {
padding: 7.2px;
font-size: 14px;
border-radius: 6px;
border: 2px solid #95bf96;
background-color: #7bad7f;
color: #e4e9f0;
flex: 1;
min-width: 250px;
box-sizing: border-box;
}
.track-selector option {
background-color: #7bad7f;
color: #e4e9f0;
}
.title-border {
border: 2px solid #95bf96;
background-color: #7bad7f;
padding: 6.3px;
border-radius: 6px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
min-width: 250px;
height: 38px;
box-sizing: border-box;
}
.rainbowText {
font-family: arial black;
font-size: 15px;
color: #e4e9f0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: move 600s linear infinite;
}
.brandText {font-size:15px;}
@keyframes move {
to {
background-position: 4500vh;
}
}
.select-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-top: 10px;
flex-wrap: wrap;
}
#pauseBtn {
display: none;
}
@media (max-width: 768px) {
.player-row {flex-direction: column;}
.title-border {display:none}
.select-row {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.track-selector,
.title-border {
min-width: unset;
width: 100%;
box-sizing: border-box;
}
}
</style>
<div class="mp3-player">
<div class="player-row">
<div class="controls-wrapper">
<div class="controls">
<button id="playBtn"><i class="fa fa-play"></i></button>
<button id="pauseBtn"><i class="fa fa-pause"></i></button>
<button id="stopBtn"><i class="fa fa-stop"></i></button>
</div>
<div class="volume-slider">
<i class="fa fa-volume-up"></i>
<input type="range" id="volumeControl" min="0" max="1" step="0.01" value="1">
</div>
</div>
<div class="progress-border">
<div class="time" id="timeElapsed">0:00</div>
<div class="progress-container" id="progressContainer">
<div class="progress" id="progressBar"></div>
</div>
<div class="time" id="timeRemaining">--:--</div>
</div>
</div>
<audio id="audio" src=""></audio>
<div class="select-row">
<select id="trackSelector" class="track-selector">
<option value="" disabled selected>Bir parça seçin</option>
<option data-title="Berlin - Take My Breath Away" value="https://github.com/xenconsept/Depo/raw/refs/heads/main/Berlin - Take My Breath Away.mp3">Berlin - Take My Breath Away</option>
<option data-title="Celine Dion -My Heart Will Go On" value="https://github.com/xenconsept/Depo/raw/refs/heads/main/Celine Dion -My Heart Will Go On.mp3">Celine Dion -My Heart Will Go On</option>
<option data-title="Yanni - Nostalgia" value="https://github.com/xenconsept/Depo/raw/refs/heads/main/Yanni - Nostalgia - Live at Royal Albert Hall.mp3">Yanni - Nostalgia</option>
<option data-title="Vanessa Mae - Red Violin" value="https://github.com/xenconsept/Depo/raw/refs/heads/main/Vanessa Mae Red Violin.mp3">Vanessa Mae - Red Violin</option>
<option data-title="Rajkapoor - Avaramu" value="https://github.com/xenconsept/Depo/raw/refs/heads/main/Raj Kapoor - Avaramu.mp3">Rajkapoor - Avaramu</option>
<option data-title="Lara Fabian - Adagio" value="https://github.com/xenconsept/Depo/raw/refs/heads/main/Lara Fabian - Adagio.mp3">Lara Fabian - Adagio</option>
<option data-title="Whitney Houston - I Will Always Love You" value="https://github.com/xenconsept/Depo/raw/refs/heads/main/Whitney Houston - I Will Always Love You.mp3">Whitney Houston - I Will Always Love You</option>
<option data-title="Yanni - One Man's Dream" value="https://github.com/xenconsept/Depo/raw/11c41fc179c5b3342cae8d883378511d14607e06/One Man's Dream - Yanni.mp3">Yanni - One Man's Dream</option>
</select>
<div class="title-border">
<h1 class="brandText">XenConsept Audio Player v1.0.2</h1>
</div>
</div>
</div>
<script>
const audio = document.getElementById('audio');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const stopBtn = document.getElementById('stopBtn');
const progressBar = document.getElementById('progressBar');
const progressContainer = document.getElementById('progressContainer');
const timeElapsed = document.getElementById('timeElapsed');
const timeRemaining = document.getElementById('timeRemaining');
const volumeControl = document.getElementById('volumeControl');
const trackSelector = document.getElementById('trackSelector');
playBtn.addEventListener('click', () => audio.play());
pauseBtn.addEventListener('click', () => audio.pause());
stopBtn.addEventListener('click', () => {
audio.pause();
audio.currentTime = 0;
updatePlayPauseButtons();
});
audio.addEventListener('timeupdate', () => {
const current = audio.currentTime;
const duration = audio.duration || 0;
const remaining = duration - current;
progressBar.style.width = (current / duration) * 100 + '%';
timeElapsed.textContent = formatTime(current);
timeRemaining.textContent = formatTime(remaining);
});
progressContainer.addEventListener('click', (e) => {
const width = progressContainer.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
});
volumeControl.addEventListener('input', () => {
audio.volume = volumeControl.value;
});
trackSelector.addEventListener('change', function () {
const selectedOption = this.options[this.selectedIndex];
const selectedSrc = selectedOption.value;
if (selectedSrc) {
audio.src = selectedSrc;
audio.play();
}
});
function formatTime(seconds) {
if (isNaN(seconds)) return '--:--';
const minutes = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${minutes}:${secs.toString().padStart(2, '0')}`;
}
function updatePlayPauseButtons() {
if (audio.paused || audio.ended) {
playBtn.style.display = 'inline-block';
pauseBtn.style.display = 'none';
} else {
playBtn.style.display = 'none';
pauseBtn.style.display = 'inline-block';
}
}
audio.addEventListener('play', updatePlayPauseButtons);
audio.addEventListener('pause', updatePlayPauseButtons);
audio.addEventListener('ended', updatePlayPauseButtons);
updatePlayPauseButtons();
</script>
