Форум

Борис К · #1 (**permalink**) 11.06.2021, 13:31

Здравствуйте!))
Пожалуйста, помогите с кодом для воспроизведением аудио при случайном появлении цветного блока после нажатия на кнопку Click: например, при появлении синего блока должно звучать аудио <audio id="blue" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mp3"></audio>, а при появлении зелёного <audio id="green" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mp3"></audio>

<!DOCTYPE html>
<html>
<head>
<style>
p{
    color: red;
    font-family: arial;
}
#show{
 
    padding: 3px;
    float: left;
    margin-right:10px;
}
.Div{
    float: left;
    padding: 5px;
    text-align:center;
    width: 100px;
}
#blue{background-color:blue;}
#green{background-color:green;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
</head>
<body>
<button id="show"><p>Click</p></button>
<div id="blue" class="Div"><p>Blue</p></div>
<div id="green" class="Div"><p>Green</p></div>

    <script type="text/javascript">
$('.Div').hide()
$('#show').click(function(){
    var random = Math.floor(Math.random() * $('.Div').length);
    $('.Div').hide().eq(random).show();
});
    </script>
</body>
</html>

Благодарю за помощь!

рони · #2 (**permalink**) 11.06.2021, 14:30

Борис К,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: red;
            font-family: arial;
        }
        #show {
            padding: 3px;
            float: left;
            margin-right: 10px;
        }
        .Div {
            float: left;
            padding: 5px;
            text-align: center;
            width: 100px;
        }
        #blue {
            background-color: blue;
        }
        #green {
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
    <button id="show">
        <p>Click</p>
    </button>
    <div id="blue" class="Div">
        <p>Blue</p>
    </div>
    <div id="green" class="Div">
        <p>Green</p>
    </div>
    <script type="text/javascript">
        var audio = new Audio();
        var src = ['https://s3.amazonaws.com/freecodecamp/simonSound1.mp3', 'https://s3.amazonaws.com/freecodecamp/simonSound2.mp3'];
        $('.Div').hide();
        $('#show').click(function() {
            var random = Math.floor(Math.random() * $('.Div').length);
            $('.Div').hide().eq(random).show();
            audio.pause();
            audio.src = src[random];
            audio.play();
        });
    </script>
</body>
</html>

Борис К · #3 (**permalink**) 11.06.2021, 15:39

Огромная благодарность, профессор Рони!

Форум

Справочник

Discord чат

Курсы javascript