Блог

Главная - Вопросы по программированию - Всплывающее окно HTML Воспроизведение звука при оповещении

Всплывающее окно HTML Воспроизведение звука при оповещении

#javascript #html

Вопрос:

есть ли способ объединить <audio controls> в html и alert("") в js или constant song = new audio() в js , чтобы при нажатии кнопки a <button> появлялась страница с предупреждением и плеером для воспроизведения аудиофайла с нее ?

Комментарии:

1. оповещения в js не предназначены для этого. Вы можете использовать модалы. Попробуйте загрузочные или материальные модалы пользовательского интерфейса и поместите в них аудиофайл. Нажав на кнопку, вы можете открыть модальный.

2. Пожалуйста, предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.

Ответ №1:

Я думаю, это то, что вы ищете. Но вы не можете использовать оповещение для достижения этой цели.

 window.addEventListener("load", function(){
    setTimeout(
        function open(event){
            document.querySelector(".popup").style.display = "block";
        },
        1000
    )
});


document.querySelector("#close").addEventListener("click", function(){
    document.querySelector(".popup").style.display = "none";
}); 
 *,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #581845;
}
.popup{
    background-color: #ffffff;
    width: 450px;
    padding: 30px 40px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 8px;
    font-family: "Poppins",sans-serif;
    display: none;
    text-align: center;
}
.popup button{
    display: block;
    margin:  0 0 20px auto;
    background-color: transparent;
    font-size: 30px;
    color: #c5c5c5;
    border: none;
    outline: none;
    cursor: pointer;
}
.popup p{
    font-size: 14px;
    text-align: justify;
    margin: 20px 0;
    line-height: 25px;
}
audio{
  margin:20px;
}
a{
    display: block;
    width: 150px;
    position: relative;
    margin: 10px auto;
    text-align: center;
    background-color: #0f72e5;
    color: #ffffff;
    text-decoration: none;
    padding: 5px 0;
} 
 <div class="popup">
        <button id="close">amp;times;</button>
        <h2>This Is The audio</h2>
       <audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>
        <a href="#">Let's Go</a>
    </div>
Метки: