如何播放隐藏的音频文件（大概是通过页面元素点击上的 AMP-Audio (
<amp-audio></amp-audio>AMP-HTML页面上的 AMP 图像 (
<amp-img></amp-img>) 点击？
具体来说，我最终想做的是复制此页面上我的名字旁边的扬声器图像的功能：https://m.jamesandersonjr.com，在此页面上：https://amp.jamesandersonjr .com，但页面必须遵循所有已知的 AMP 规则验证。
请告知这个问题是否重复，但我在 S.O. 上找不到类似的合适解决方案
此外，A.I.搞错了！这是巴德的回应：
<!DOCTYPE html>
<html amp>
<head>
<title>How to Play a Hidden Audio File on Click</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>How to Play a Hidden Audio File on Click</h1>
<amp-audio id="myaudio" hidden controls>
<source src="/media/epic.mp3" type="audio/mpeg">
<source src="/media/epic.wav" type="audio/wav">
</amp-audio>
<button onclick="playAudio()">Play Audio</button>
<script>
function playAudio() {
var audio = document.getElementById("myaudio");
audio.play();
}
</script>
</body>
</html>
正如您可能已经注意到的，它甚至不包括，
<script async src="https://cdn.ampproject.org/v0.js"></script><script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>这是 Chat GPT 在被问到同样问题时的回应：
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<title>Hidden Audio Example</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
/* Add any custom styles here */
</style>
</head>
<body>
<!-- Add the element that will be clicked to play the audio -->
<p on="tap:audioPlayer.toggleVisibility">Click here to play audio</p>
<!-- Add the amp-audio component -->
<amp-audio id="audioPlayer" layout="nodisplay">
<!-- Replace 'path-to-your-audio-file.mp3' with the actual URL of your audio file -->
<source src="path-to-your-audio-file.mp3" type="audio/mpeg">
</amp-audio>
</body>
</html>
所以，不，A.I.世界统治尚未完全降临到我们身上。 ;-) 无论如何，我期待着熟练且富有创意的人类回应。
我解决了这个问题。这是一个示例解决方案，供有需要的人使用。
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>AMP Validated Demo: Play Audio File on AMP Image Click</title>
<link rel="canonical" href="https://www.example.com">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style amp-boilerplate>
body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
</style>
</noscript>
<style amp-custom>
h1{font-family:Arial, Helvetica, sans-serif;color:#006EDB;font-size:188%;font-weight:600;}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
</head>
<body>
<h1>How to Play a Hidden Audio File on Click</h1>
<amp-img width="32" height="32" alt="🔊 Hear Audio Track." title="🔊 Hear Audio Track." role="button" tabindex="1" on="tap:nm_pron.play" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLQpUaGlzIFNWRyBpbWFnZSBmaWxlIGlzIHRoZSBzb2xlIHByb3BlcnR5IG9mIEphbWVzIEFuZGVyc29uIEpyLiB8IFdlYjogWyBodHRwczovL3d3dy5qYW1lc2FuZGVyc29uanIuY29tIF0uIApJZiB5b3UgZmluZCB0aGlzIFNWRyBpbWFnZSBmaWxlIGRpc3BsYXllZCBvbiBhbnkgb3RoZXIgd2Vic2l0ZSBvbiB0aGUgd2ViLCBiZXNpZGVzIHRoZSBvbmVzIGZvdW5kIGluIHRoaXMgCmxpc3QgWyBodHRwczovL3d3dy5qYW1lc2FuZGVyc29uanIuY29tL3dlYnNpdGVzLnBocCBdLCB0aGVuIGl0IGNvdWxkIGJlIHByZXN1bWVkIHRoYXQgaXQgd2FzIGxpa2VseSBzdG9sZW4uIApQbGVhc2UgcmVwb3J0IGFueSBhbmQgYWxsIGFzc2V0IHRoZWZ0cyB0byBtZSwgaGVyZSBbIGh0dHBzOi8vd3d3LmphbWVzYW5kZXJzb25qci5jb20vY29udGFjdC1qYW1lcy5waHAgXS4KVGhhbmsgeW91IGluIGFkdmFuY2UgZm9yIHlvdXIgaGVscCBpbiBjb21iYXRpbmcgb25saW5lIGNvbnRlbnQgdGhlZnQuIAoKUmVnYXJkcywKSmFtZXMgQW5kZXJzb24gSnIuCi0tPgo8c3ZnIHZpZXdCb3g9IjAgMCA0OCA0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGQ9Ik0xNCwzMkg3Yy0xLjEsMC0yLTAuOS0yLTJWMThjMC0xLjEsMC45LTIsMi0yaDdWMzJ6IiBmaWxsPSIjNTQ2RTdBIi8+Cgk8cGF0aCBkPSJtMjYgNDItMTItMTB2LTE2bDEyLTEweiIgZmlsbD0iIzc4OTA5QyIvPgoJPHBhdGggZD0ibTI4IDE3LjN2Mi4xYzEuOCAwLjggMyAyLjUgMyA0LjYgMCAyLTEuMiAzLjgtMyA0LjZ2Mi4xYzIuOS0wLjkgNS0zLjUgNS02LjdzLTIuMS01LjgtNS02Ljd6IiBmaWxsPSIjMDNBOUY0Ii8+Cgk8cGF0aCBkPSJtMjggMTIuMnYyYzQuNiAwLjkgOCA1IDggOS44cy0zLjQgOC45LTggOS44djJjNS43LTEgMTAtNS45IDEwLTExLjhzLTQuMy0xMC45LTEwLTExLjh6IiBmaWxsPSIjNEZDM0Y3Ii8+Cjwvc3ZnPg==">
<amp-audio id="nm_pron" layout="nodisplay" src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3"></amp-audio>
</amp-img>
</body>
</html>