Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
<!DOCTYPE html> <html> <head> <title>Фразы</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="img/logo.jpeg" type="jpeg"> </head> <body> <div class="page"> <img src="img/1.jpg" class="logo-in"> </div> </body> <style> *{ margin: 0; padding: 0; } .page{ width: 100%; height: 100%; background-color: black; display: flex; z-index: 10000; position: fixed; justify-content: center; align-items: center; } .logo-in{ width: 100px; height: 100px; transition-duration: 1s; } .logo-in.bigger{ transform: scale(1.4); transition-duration: 1s; } </style> </html> <body style="background-image: url(img/1.jpg)"> </body> <body> <style> audio::-webkit-media-controls-play-button { transform: scale(2, 2); } </style> <div class="audio"> <p style="font-size: 25px;">1с</p> <audio controls style="width:500px;"> <source src = 'фразы/1.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/2.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/3.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/4.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/5.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/6.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/7.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/8.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/9.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/10.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/13.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/11.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/12.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/14.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/15.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/16.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/17.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/18.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/19.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/20.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/21.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/22.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/23.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/24.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/25.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/26.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/27.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/28.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/29.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/30.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">У</p> <audio controls style="width:500px;"> <source src = 'фразы/31.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> <div class="audio"> <p style="font-size: 25px;">1</p> <audio controls style="width:500px;"> <source src = 'фразы/32.mp3' controls audioplay> Ваш браузер не подходит юзайте Chrom или Opera </audio> </div> <script> $(document).ready(function () { $('.logo-in').addClass('bigger') setTimeout(() => { $('.page').fadeOut(200) }, 800); }); </script> <script> const aud = document.querySelectorAll('audio') Array.from(aud).map(el => el.addEventListener('play', () => { const played = document.querySelector('[data-play="true"]') if(played && played !== el) { played.pause() played.currentTime = 0 played.removeAttribute('data-play') } el.dataset.play = 'true' })) </script> </body> <style> *{ margin: 0; padding: 0; border: 0; } .audio{ text-align: center; } body { height: 100%; } </style> </html>
