如何在AMP-HTML页面点击AMP-Image播放隐藏AMP-Audio（需AMP验证）

问题是否重复？ #

这个问题不属于重复提问。由于AMP对组件交互和JavaScript使用有严格限制，针对「通过amp-image触发隐藏amp-audio播放且页面完全符合AMP验证规则」的特定场景，目前Stack Overflow上没有完全匹配的已解决方案。

合规实现方案 #

以下是符合AMP所有规则的实现代码，可直接用于复刻目标功能：

<!DOCTYPE html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>AMP Audio Play Demo</title>
  <link rel="canonical" href="amp.jamesandersonjr.com">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <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>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- 引入AMP音频组件 -->
  <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
  <!-- 引入AMP状态绑定组件（可选，用于扩展暂停等逻辑） -->
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <style amp-custom>
    /* 隐藏音频组件，避免影响页面布局 */
    .hidden-audio {
      visibility: hidden;
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
    /* 扬声器图片样式，添加点击光标提示 */
    .speaker-trigger {
      cursor: pointer;
      width: 32px;
      height: 32px;
      margin-left: 8px;
    }
  </style>
</head>
<body>
  <!-- 隐藏的音频播放器，指定ID用于触发播放 -->
  <amp-audio id="name-pronunciation" class="hidden-audio" src="your-audio-file.mp3">
    <div fallback>当前浏览器不支持音频播放</div>
  </amp-audio>

  <!-- 可点击的扬声器图片，绑定点击事件触发音频播放 -->
  <amp-image 
    class="speaker-trigger"
    src="speaker-icon.png"
    width="32"
    height="32"
    layout="fixed"
    role="button"
    tabindex="0"
    on="tap:name-pronunciation.play()"
    alt="播放姓名发音"
  ></amp-image>
</body>
</html>

关键注意事项（确保通过AMP验证） #

• 组件引入：必须提前声明amp-audio和amp-bind组件脚本，AMP要求所有自定义组件需在页面头部加载对应官方脚本。
• 隐藏音频组件：使用visibility: hidden结合绝对定位隐藏，禁止用display: none——AMP会对display: none的媒体组件进行资源懒加载，可能导致音频无法正常触发播放。
• 可访问性：给amp-image添加role="button"和tabindex="0"，保证键盘可交互，符合AMP无障碍规范。
• 事件绑定：通过AMP原生的on属性绑定tap事件，直接调用音频组件的play()方法，避免使用自定义JavaScript（AMP不允许非组件内联的自定义JS）。
• 验证方法：在页面URL后添加#development=1后缀，打开浏览器控制台查看AMP验证提示，确保无错误信息。

内容的提问来源于stack exchange，提问作者James Anderson Jr.