var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
dialog.show();
};
document.querySelector('#close').onclick = function() {
dialog.close();
};
document.getElementById("show").onclick = function()
{
var myaudio = document.getElementById("myaudio");
if(myaudio.paused == true)
{
document.getElementById("myaudio").play();
this.style.backgroundColor = "Blue";
this.style.color = "White";
}
else if (myaudio.paused == false)
{
document.getElementById("myaudio").pause();
this.style.backgroundColor = "White";
this.style.color = "Black";
}
}
<dialog>
<p>Это всплывающее окно, которое сделано на html5 и javascript</p>
<button id="close">Закрыть</button>
</dialog>
<button id="show" type="button">Открыть всплывающее окно!</button>
<audio id="myaudio" src="мелодия.mp3">
</audio>
Помогите объединить всплывающее окно и звук при нажатии на кнопку. Без звука в хроме работает окно, но со звуком окно не разворачивается, включается музыка. В edge и firefox окно вообще не работает, но мелодия проигрывается. Как то можно их оптимизировать для этих браузеров? firefox скрывает содержимое, а edge просто вываливает... Вообще как я понял если запустить второй скрипт из первого, должно сработать? Но, как оформить и оптимизировать под все браузеры? Желательно не используя переменную, т.е. с привязкой по ид.