如何在 html 中为按钮提供两个单独的功能答案

【问题标题】：how can i give a button two seperate functions in html如何在 html 中为按钮提供两个单独的功能
【发布时间】：2022-01-30 18:04:19
【问题描述】：

所以我试图创建一个按钮，将您带到我网站的第二页以及播放声音文件。我遇到的问题是它没有播放声音就进入第二页。目前，我的代码如下所示：

<body>
    <audio id="sound1" src="sound.mp3" preload="auto"></audio>

    <button type="submit" onclick="document.getElementById('sound1').play(); 
    location.href='page2.html';">enter</button>
</body>

有谁知道为什么会这样，如果是，我该如何解决。

【问题讨论】：

您需要播放声音文件并在声音文件到达末尾时附加一个事件，并在它停止播放后重定向。 stackoverflow.com/questions/10421471/… 或者，您可以只播放声音文件并设置超时以在 X 秒后切换页面，具体取决于声音文件的长度。
当您退出页面时所有声音都会停止，因此在启动声音后立即退出页面意味着您永远不会听到它
如果其他页面也是您的，您可以在其他页面上启动声音。要让它知道应该这样做，请使用 URL 查询参数或 sessionStorage

标签： javascript html href html5-audio

【解决方案1】：

导航到新页面时，前一页面的生命周期结束，包括正在播放的媒体。考虑使用Single Page Application (SPA) 模式来更改 URL 和内容，同时保持播放音频。

【讨论】：