HTML 播放音频警告弹出框

Question

有没有办法将 html 中的<audio controls>和 js 中的alert("")或 js 中的constant song = new audio()结合起来，这样当我按下<button>时，会弹出一个带有播放器的警告页面我从中播放音频文件？

Answer 1

我想这就是你要找的。 但是您不能使用 alert 来实现此目的。

 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">&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>