<!-- Подключаем библиотеки -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ion-rangeslider@2.3.1/css/ion.rangeSlider.min.css">
<script src="https://cdn.jsdelivr.net/npm/ion-rangeslider@2.3.1/js/ion.rangeSlider.min.js"></script>
<link rel="stylesheet" href="https://jordan.moy.su/css/playpink.css">
<script src="https://jordan.moy.su/musik/pink_player2.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.pink-player').forEach(el => {
const cover = el.dataset.cover;
const src = el.dataset.src;
const title = el.dataset.title;
const artist = el.dataset.artist;
// Вставляем HTML плеера с canvas и логотипом
el.innerHTML = `
<div class="pink-player-vertical-logo">
<div class="vertical-strip"></div>
<div class="vertical-text">AUDIO PLAYER </div>
</div>
<div class="pink-player-logo">
<div class="logo-strip"></div>
<div class="logo-text"> NeonWave</div>
</div>
<canvas class="visualizer"></canvas>
<div class="cover" style="background-image:url('${cover}')"></div>
<div class="info">
<div class="title">${title}</div>
<div class="artist">${artist}</div>
</div>
<div class="progress"><div class="progress-bar"></div></div>
<div class="controls">
<button class="btn play"><i class="fas fa-play"></i></button>
<button class="btn pause" style="display:none;"><i class="fas fa-pause"></i></button>
<button class="btn loop"><i class="fas fa-repeat"></i></button>
<button class="btn mute"><i class="fas fa-volume-mute"></i></button>
</div>
<div class="volume-wrapper">
<input type="text" class="volume-slider" value="" />
</div>
<audio src="${src}"></audio>
`;
const canvas = el.querySelector('.visualizer');
const ctx = canvas.getContext('2d');
canvas.width = el.clientWidth;
canvas.height = 150;
const audio = el.querySelector('audio');
const playBtn = el.querySelector('.play');
const pauseBtn = el.querySelector('.pause');
const loopBtn = el.querySelector('.loop');
const muteBtn = el.querySelector('.mute');
const progress = el.querySelector('.progress');
const bar = el.querySelector('.progress-bar');
// Ion.RangeSlider
$(el).find(".volume-slider").ionRangeSlider({
min: 0, max: 1, step: 0.01, from: 1, grid: false,
onChange: data => { audio.volume = data.from; }
});
let audioCtx, analyser, dataArray, sourceNode;
function initVisualizer() {
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
analyser = audioCtx.createAnalyser();
sourceNode = audioCtx.createMediaElementSource(audio);
sourceNode.connect(analyser);
analyser.connect(audioCtx.destination);
analyser.fftSize = 128;
dataArray = new Uint8Array(analyser.frequencyBinCount);
}
function draw() {
if(!audioCtx) return;
requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
ctx.clearRect(0, 0, canvas.width, canvas.height);
const barWidth = canvas.width / dataArray.length;
ctx.lineWidth = 2;
for(let i=0;i<dataArray.length;i++){
const barHeight = dataArray[i];
const x = i * barWidth;
const y = canvas.height - barHeight;
const hue = (i*5 + Date.now()/10) % 360;
ctx.strokeStyle = `hsl(${hue}, 100%, 60%)`;
ctx.shadowBlur = 15;
ctx.shadowColor = `hsl(${hue}, 100%, 60%)`;
ctx.beginPath();
ctx.moveTo(x, canvas.height);
ctx.lineTo(x, y);
ctx.stroke();
}
}
playBtn.onclick = () => {
if(!audioCtx) initVisualizer();
audioCtx.resume();
audio.play();
playBtn.style.display='none';
pauseBtn.style.display='inline-block';
draw();
};
pauseBtn.onclick = () => { audio.pause(); playBtn.style.display='inline-block'; pauseBtn.style.display='none'; };
loopBtn.onclick = () => { audio.loop = !audio.loop; loopBtn.style.opacity = audio.loop?1:0.5; };
muteBtn.onclick = () => { audio.muted = !audio.muted; muteBtn.style.opacity = audio.muted?0.5:1; };
audio.ontimeupdate = () => { bar.style.width = (audio.currentTime/audio.duration)*100 + '%'; };
progress.onclick = e => { audio.currentTime = (e.offsetX/progress.offsetWidth)*audio.duration; };
});
});
</script>
