Dantes (обсуждение | вклад) Нет описания правки Метка: ручная отмена |
Dantes (обсуждение | вклад) Нет описания правки Метка: ручная отмена |
||
| Строка 26: | Строка 26: | ||
time.className = 'custom-audio-time'; | time.className = 'custom-audio-time'; | ||
time.innerHTML = '0:00'; | time.innerHTML = '0:00'; | ||
wrapper.appendChild(playBtn); | wrapper.appendChild(playBtn); | ||
wrapper.appendChild(progress); | wrapper.appendChild(progress); | ||
wrapper.appendChild(time); | wrapper.appendChild(time); | ||
container.appendChild(wrapper); | container.appendChild(wrapper); | ||
| Строка 53: | Строка 42: | ||
}; | }; | ||
// Исправим ситуацию, если duration ещё не прогрузилась | |||
audio.addEventListener('loadedmetadata', function () { | audio.addEventListener('loadedmetadata', function () { | ||
progress.max = audio.duration; | progress.max = audio.duration; | ||
| Строка 63: | Строка 49: | ||
audio.addEventListener('timeupdate', function () { | audio.addEventListener('timeupdate', function () { | ||
progress.value = audio.currentTime; | progress.value = audio.currentTime; | ||
if (!isNaN(audio.duration)) { | |||
progress.max = audio.duration; | |||
} | |||
time.innerHTML = formatTime(audio.currentTime); | time.innerHTML = formatTime(audio.currentTime); | ||
}); | }); | ||
Версия от 20:33, 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 = '▶';
}
};
// Исправим ситуацию, если duration ещё не прогрузилась
audio.addEventListener('loadedmetadata', function () {
progress.max = audio.duration;
});
audio.addEventListener('timeupdate', function () {
progress.value = audio.currentTime;
if (!isNaN(audio.duration)) {
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]);
}
});