在链接到下一页之前播放音频的 HTML 链接答案

【问题标题】：HTML link playing audio before linking to next page在链接到下一页之前播放音频的 HTML 链接
【发布时间】：2017-01-27 00:17:00
【问题描述】：

我正在为一个坐在轮椅上的朋友创建一个程序，他不能说话，只能稍微移动他的头。在传送到下一页之前，我需要一个链接来播放音频文件。

<head>
<script>
function play() {
document.getElementById('test').play();
}
</script>
</head>
<body>
<audio id='test' src='howdoyoufeel.wav'></audio>
<a href="activity.html">
<img src="smile.png" onClick='play()' />
</a>
</body>

您好，非常感谢，努力帮助他沟通！！

【问题讨论】：

欢迎您！请提供minimal reproducible example。

标签： javascript html audio

【解决方案1】：

执行此操作的最简单方法是首先稍微更改您的 HTML 为您的链接提供一个 ID，然后在 setTimeout 中使用 JavaScript 定位该 ID：

HTML

<a id="thelink" href="activity.html">

JavaScript：

function play() {
  document.getElementById('test').play();
  setTimeout(function(){ 
    document.getElementById('thelink').click();
  }, 3000); /* 3000 here is 3 seconds -- this should match the length of your audio */
}

希望这会有所帮助！

【讨论】：

感谢您的帮助。
没问题 :) 如果此答案为您解决了问题，请不要忘记将解决方案标记为正确 - 这会将其从“未回答的问题”队列中删除，并同时授予两者的声誉提问者和回答者。当然，这么说，您没有义务将我的答案（或任何其他答案）标记为正确，尽管这确实有助于保持事情顺利进行:)
积分不足使公众无法看到我的投票。再次感谢您。

【解决方案2】：

我还不能发表评论，但是要添加到 Obsidian 的答案中，您需要使用 play() 函数调用将 img 移动到锚标记之外...否则链接将立即被触发。

所以你的 HTML 应该是这样的：

<a id="thelink" href="activity.html"></a>
<img src="smile.png" onClick='play()' />

【讨论】：

感谢您的帮助！
欢迎您 :) 请务必支持 Obsidians 的回答，因为他回答了，我会简单地将我的消息添加为评论，但在我被允许这样做之前，我需要更多的声誉，并且觉得需要澄清这一点。