Музыка в zero block
Модификатор позволит внедрить музыкальный плеер на сайт с вашей любимой музыкой.
Описание
Шаг 1
В Zero блоке создаём HTML блок и помещаем в него код( за пределами блока)
<audio id="myAudio">
<source src="ссылка на аудио файл" type="audio/mp3">
</audio>
Шаг 2
Откройте и загрузите свой файл в приложении LF CLOUD и появится ссылка , скопируй и вставь ссылку в первый код
Шаг 3
После того, как вы добавили в зеро блок свой аудио файл, создаем кнопки для управления плеером ( элементы могут быть любые )
1. Для кнопки «Play» правой кнопкой мыши выберите «Add CSS Class Name»
В появившемся поле введите «playButton»
2. Для кнопки «Pause» введите класс «pauseButton»
3. Для кнопки «Stop» введите класс «stopButton»
1. Для кнопки «Play» правой кнопкой мыши выберите «Add CSS Class Name»
В появившемся поле введите «playButton»
2. Для кнопки «Pause» введите класс «pauseButton»
3. Для кнопки «Stop» введите класс «stopButton»
Шаг 4
Ниже создаем HTML блок и добавляем прогрессбар с таймером
<style>
#progressBar {
width: 100%;
height: 10px; /* Высота прогресс бара*/
border: 1px solid #ccc; /* Цвет и размер границ прогресс бара*/
border-radius: 5px; /* Округление границ прогресс бара*/
overflow: hidden;
cursor: pointer;
}
#progressBar::-webkit-progress-bar {
background-color: grey; /* Цвет прогресс бара*/
}
#progressBar::-webkit-progress-value {
background-color: black; /* Цвет наполнения прогресс бара*/
}
#progressBar::-moz-progress-bar {
background-color: grey; /* Цвет прогресс бара*/
}
#progressBar::-ms-fill {
background-color: black; /* Цвет наполнения прогресс бара*/
}
#currentTime {
color: black; /* Цвет таймера длиельности аудиофайла*/
/*Можно добавить любые свои стили*/
}
</style>
<progress id="progressBar" value="0" max="100"></progress>
<span id="currentTime" style='margin-left: 10px;'>0:00</span>
Шаг 5
Ниже создаем HTML блок и добавляем ползунок громкости
<style>
#volumeControl {
width: 100%; /* Установите желаемую ширину */
appearance: none; /* Убираем стандартные стили браузера */
height: 10px; /* Высота полосы громкости */
background: black; /* Цвет фона */
border-radius: 5px; /* Закругление углов */
outline: none; /* Убираем рамку фокуса */
margin: 0; /* Убираем внешние отступы */
}
#volumeControl::-webkit-slider-thumb {
appearance: none; /* Убираем стандартные стили браузера */
width: 20px; /* Ширина ползунка */
height: 20px; /* Высота ползунка */
background: black; /* Цвет ползунка */
border-radius: 50%; /* Закругление углов */
cursor: pointer; /* Изменяем курсор при наведении */
}
#volumeControl::-moz-range-thumb {
appearance: none; /* Убираем стандартные стили браузера */
width: 20px; /* Ширина ползунка */
height: 20px; /* Высота ползунка */
background: black; /* Цвет ползунка */
border-radius: 50%; /* Закругление углов */
cursor: pointer; /* Изменяем курсор при наведении */
}
</style>
<input type="range" id="volumeControl" value="100">в
Шаг 6
Ниже под блоком создаем новый блок Т123 и вставляем в него последний код
<style>
.playButton, .pauseButton, .stopButton {
cursor: pointer;
user-select: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var audio = document.getElementById('myAudio');
var playButton = document.querySelector('.playButton');
var pauseButton = document.querySelector('.pauseButton');
var stopButton = document.querySelector('.stopButton');
var volumeControl = document.getElementById('volumeControl');
var progressBar = document.getElementById('progressBar');
var currentTimeDisplay = document.getElementById('currentTime');
var isDragging = false;
playButton.addEventListener('click', function () {
audio.play();
});
pauseButton.addEventListener('click', function () {
audio.pause();
});
stopButton.addEventListener('click', function () {
audio.pause();
audio.currentTime = 0;
});
volumeControl.addEventListener('input', function () {
audio.volume = volumeControl.value / 100;
});
progressBar.addEventListener('input', function () {
var seekTime = (audio.duration * (progressBar.value / 100));
audio.currentTime = seekTime;
});
progressBar.addEventListener('mousedown', function (e) {
isDragging = true;
updateProgressBar(e);
});
document.addEventListener('mousemove', function (e) {
if (isDragging) {
updateProgressBar(e);
}
});
document.addEventListener('mouseup', function () {
isDragging = false;
});
function updateProgressBar(e) {
var rect = progressBar.getBoundingClientRect();
var x = e.clientX - rect.left;
var percentage = (x / rect.width) * 100;
progressBar.value = percentage;
var seekTime = (audio.duration * (percentage / 100));
audio.currentTime = seekTime;
}
audio.addEventListener('timeupdate', function () {
var currentTime = audio.currentTime;
var duration = audio.duration;
// Обновляем шкалу времени
progressBar.value = (currentTime / duration) * 100;
// Обновляем отображение текущего времени воспроизведения
var minutes = Math.floor(currentTime / 60);
var seconds = Math.floor(currentTime % 60);
currentTimeDisplay.textContent = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
});
});
</script>
Данная платфора обсолютно бесплатна и спокойно можно пользоваться данными модификациями. Данная система даната поможет развитию новых проектов и покажет, что я не зря стараюсь.
Поддержать автора
