Закрытая страница
Эта страница сайта закрыта для анонимного просмотра. Если вы считаете, что вам нужен доступ, пожалуйста, свяжитесь с администраторами сайта.
Если у вас уже есть учетная запись, пожалуйста войдите.
Сообщество
Аномальные организации
Информационный стол
Данные Нексуса
Сообщество
Информация о Библиотеке
Знающие правду
Руководство для стражей
[[div style="margin-top:15px;"]]
[[html]]
<head>
<style>
button{
appearance: auto;
-webkit-writing-mode: horizontal-tb !important;
font-style: ;
font-variant-ligatures: ;
font-variant-caps: ;
font-variant-numeric: ;
font-variant-east-asian: ;
font-weight: ;
font-stretch: ;
font-size: ;
font-family: ;
text-rendering: auto;
color: #cfe2f3;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: center;
align-items: flex-start;
cursor: pointer;
box-sizing: border-box;
background-color: #dfe4e9;
margin: 0em;
padding: 1px 6px;
border-width: 2px;
border-style: outset;
border-color: #cfe2f3;
border-image: initial;
border-radius: 50%;
}
button:hover{
contrast: 120%;
}
.audio-track{
width: 150px;
height: 3px;
background-color: #dfe4e9;
margin-bottom: 20px;
}
.time{
width: 0px;
height: 3px;
background-color: #188bff;
}
</style>
</head>
<body>
<audio id="audio" loop>
<source src="" type="audio/mp3">
</audio>
<div id="controls" style="margin:auto; width:190px;border-bottom: #010a13 1px solid; border-radius: 5px; background-color:#010a13;padding:10px;box-shadow: 0 0 10px 0 #000;">
<p style="text-align: center; text-transform: uppercase; font-size: 14px; font-style: normal; font-weight: 700;color: #f0e6d2;font-family: verdana,arial,helvetica,sans-serif;border-bottom: dashed 1px #f0e6d2;padding-bottom:10px;">Плеер</p>
<p class="treck-name" style="text-align: center; font-size: 10px; font-style: normal; font-weight: 700;color: #f0e6d2;font-family: verdana,arial,helvetica,sans-serif;padding-bottom:10px;overflow: hide;">Название трека</p>
<div style="width: 150px; margin: auto;"><div class="audio-track"><div class="time"></div></div></div>
<div style="width:180px; margin:auto;">
<button class="play" style="width:40px; height:40px;"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>Play</title><path d="M60.54,512c-17.06,0-30.43-13.86-30.43-31.56V31.55C30.12,13.86,43.48,0,60.55,0A32.94,32.94,0,0,1,77,4.52L465.7,229c10.13,5.85,16.18,16,16.18,27s-6,21.2-16.18,27L77,507.48A32.92,32.92,0,0,1,60.55,512Z" fill="#434040"/></svg></button>
<button class="pause" style="width:40px; height:40px;"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>Pause</title><path d="M395,512a73.14,73.14,0,0,1-73.14-73.14V73.14a73.14,73.14,0,1,1,146.29,0V438.86A73.14,73.14,0,0,1,395,512Z" fill="#434040"/><path d="M117,512a73.14,73.14,0,0,1-73.14-73.14V73.14a73.14,73.14,0,1,1,146.29,0V438.86A73.14,73.14,0,0,1,117,512Z" fill="#434040"/></svg></button>
<button class="prev" style="width:40px; height:40px;"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title><prev</title><path d="M481.76,510.43c17,0,30.24-13.78,30.24-31.36V32.93c0-17.58-13.28-31.36-30.25-31.36a32.73,32.73,0,0,0-16.3,4.49L128.61,229.12C118.54,234.93,112.53,245,112.53,256s6,21.07,16.08,26.87L465.45,505.94a32.72,32.72,0,0,0,16.3,4.49Z" fill="#434040"/><path d="M61.94,499.51a61.94,61.94,0,0,0,61.94-61.93V74.42A61.94,61.94,0,0,0,0,74.42V437.58A61.94,61.94,0,0,0,61.94,499.51Z" fill="#434040"/></svg></button>
<button class="next" style="width:40px; height:40px;"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>next></title><path d="M30.24,510.43c-17,0-30.24-13.78-30.24-31.36V32.93C0,15.35,13.28,1.57,30.25,1.57a32.73,32.73,0,0,1,16.3,4.49L383.39,229.12c10.07,5.81,16.08,15.86,16.08,26.88s-6,21.07-16.08,26.87L46.55,505.94a32.72,32.72,0,0,1-16.3,4.49Z" fill="#434040"/><path d="M450.06,499.51a61.94,61.94,0,0,1-61.94-61.93V74.42a61.94,61.94,0,0,1,123.88,0V437.58A61.94,61.94,0,0,1,450.06,499.51Z" fill="#434040"/></svg></button>
</div>
</div>
<script>
let audio = document.getElementById("audio"); // Берём элемент audio
let time = document.querySelector(".time"); // Берём аудио дорожку
let btnPlay = document.querySelector(".play"); // Берём кнопку проигрывания
let btnPause = document.querySelector(".pause"); // Берём кнопку паузы
let btnPrev = document.querySelector(".prev"); // Берём кнопку переключения предыдущего трека
let btnNext = document.querySelector(".next"); // Берём кнопку переключение следующего трека
// Массив с названиями песен
let playlist = [
'http://hard-rp-funclub.wdfiles.com/local--files/draft%3Amain/extract-of-aurora.mp3',
'https://cdn.discordapp.com/attachments/931508390490959932/931513113788973056/XCOM_Enemy_Unknown_Soundtrack_-_HQ_Act_2_Extended___Michael_McCann.mp3',
'https://cdn.discordapp.com/attachments/931508390490959932/931513114220978176/XCOM_Enemy_Unknown_Soundtrack_-_HQ_Act_3_Extended___Michael_McCann.mp3',
'https://cdn.discordapp.com/attachments/931508390490959932/931513115508613150/Lazarus.mp3',
'https://cdn.discordapp.com/attachments/931508390490959932/931513116175523870/448060__cybermad__mystery.wav',
];
let treck_name_array = [
"Extract of Aurora",
"Xcom EU - HQ Act 2",
"Xcom EU - HQ Act 3",
"Lazarus",
"Cybermad mystery",
]
let treck; // Переменная с индексом трека
// Событие перед загрузкой страницы
window.onload = function() {
treck = 99;
audio.currentTime = 0;
}
window.load = function(){
audio.play();
}
function switchTreck (numTreck) {
audio.src = playlist[numTreck];
audio.currentTime = 0;
// Включаем песню
audio.play();
document.querySelector(".treck-name").innerHTML = treck_name_array[numTreck];
}
btnPlay.addEventListener("click", function() {
if (treck== 99) {
treck = 0;
switchTreck(treck);
}
else {audio.play();
audioPlay = setInterval(function() {
let audioTime = Math.round(audio.currentTime);
let audioLength = Math.round(audio.duration)
time.style.width = (audioTime * 100) / audioLength + '%';
if (audioTime == audioLength && treck < 4) {
treck++;
switchTreck(treck);
} else if (audioTime == audioLength && treck >= 4) {
treck = 0;
switchTreck(treck);
}
}, 10)}
});
btnPause.addEventListener("click", function() {
audio.pause();
clearInterval(audioPlay)
});
btnPrev.addEventListener("click", function() {
if (treck > 0) {
treck--;
switchTreck(treck);
} else { // Иначе
treck = 4;
switchTreck(treck);
}
});
btnNext.addEventListener("click", function() {
if (treck < 4) {
treck++;
switchTreck(treck);
} else {
treck = 0;
switchTreck(treck);
}
});
</script>
</body>
[[/html]]
[[/div]]
Новости
02 Apr 2022 11:48 | Открыть источник |
Эта страница сайта закрыта для анонимного просмотра. Если вы считаете, что вам нужен доступ, пожалуйста, свяжитесь с администраторами сайта.
Если у вас уже есть учетная запись, пожалуйста войдите.