Воспроизведение аудио, соответствующего блоку
Здравствуйте!))
Пожалуйста, помогите с кодом для воспроизведением аудио при случайном появлении цветного блока после нажатия на кнопку 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> Благодарю за помощь! |
Борис К,
<!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> |
Огромная благодарность!
Огромная благодарность, профессор Рони!
|
Часовой пояс GMT +3, время: 04:28. |