Dantes (обсуждение | вклад) Нет описания правки |
Dantes (обсуждение | вклад) Нет описания правки |
||
| Строка 2: | Строка 2: | ||
var players = document.getElementsByClassName('audio-player'); | var players = document.getElementsByClassName('audio-player'); | ||
for (var i = 0; i < players.length; i++) { | for (var i = 0; i < players.length; i++) { | ||
var src = | (function (container) { | ||
var src = container.getAttribute('data-src'); | |||
if (!src) return; | |||
var audio = document.createElement('audio'); | var audio = document.createElement('audio'); | ||
audio. | audio.src = src; | ||
var | var wrapper = document.createElement('div'); | ||
wrapper.className = 'custom-audio-wrapper'; | |||
var playBtn = document.createElement('button'); | |||
playBtn.className = 'custom-audio-play'; | |||
} | playBtn.innerHTML = '▶'; | ||
var progress = document.createElement('input'); | |||
progress.setAttribute('type', 'range'); | |||
progress.className = 'custom-audio-progress'; | |||
progress.setAttribute('min', 0); | |||
progress.value = 0; | |||
progress.step = 0.01; | |||
var time = document.createElement('span'); | |||
time.className = 'custom-audio-time'; | |||
time.innerHTML = '0:00'; | |||
wrapper.appendChild(playBtn); | |||
wrapper.appendChild(progress); | |||
wrapper.appendChild(time); | |||
container.appendChild(wrapper); | |||
playBtn.onclick = function () { | |||
if (audio.paused) { | |||
audio.play(); | |||
playBtn.innerHTML = '⏸'; | |||
} else { | |||
audio.pause(); | |||
playBtn.innerHTML = '▶'; | |||
} | |||
}; | |||
audio.addEventListener('timeupdate', function () { | |||
progress.value = audio.currentTime; | |||
progress.max = audio.duration; | |||
time.innerHTML = formatTime(audio.currentTime); | |||
}); | |||
progress.addEventListener('input', function () { | |||
audio.currentTime = parseFloat(progress.value); | |||
}); | |||
function formatTime(seconds) { | |||
var mins = Math.floor(seconds / 60); | |||
var secs = Math.floor(seconds % 60); | |||
if (secs < 10) secs = '0' + secs; | |||
return mins + ':' + secs; | |||
} | |||
})(players[i]); | |||
} | } | ||
}); | }); | ||
Версия от 20:06, 16 апреля 2025
$(function () {
var players = document.getElementsByClassName('audio-player');
for (var i = 0; i < players.length; i++) {
(function (container) {
var src = container.getAttribute('data-src');
if (!src) return;
var audio = document.createElement('audio');
audio.src = src;
var wrapper = document.createElement('div');
wrapper.className = 'custom-audio-wrapper';
var playBtn = document.createElement('button');
playBtn.className = 'custom-audio-play';
playBtn.innerHTML = '▶';
var progress = document.createElement('input');
progress.setAttribute('type', 'range');
progress.className = 'custom-audio-progress';
progress.setAttribute('min', 0);
progress.value = 0;
progress.step = 0.01;
var time = document.createElement('span');
time.className = 'custom-audio-time';
time.innerHTML = '0:00';
wrapper.appendChild(playBtn);
wrapper.appendChild(progress);
wrapper.appendChild(time);
container.appendChild(wrapper);
playBtn.onclick = function () {
if (audio.paused) {
audio.play();
playBtn.innerHTML = '⏸';
} else {
audio.pause();
playBtn.innerHTML = '▶';
}
};
audio.addEventListener('timeupdate', function () {
progress.value = audio.currentTime;
progress.max = audio.duration;
time.innerHTML = formatTime(audio.currentTime);
});
progress.addEventListener('input', function () {
audio.currentTime = parseFloat(progress.value);
});
function formatTime(seconds) {
var mins = Math.floor(seconds / 60);
var secs = Math.floor(seconds % 60);
if (secs < 10) secs = '0' + secs;
return mins + ':' + secs;
}
})(players[i]);
}
});