HTML使用area标签实现点击图片不同位置播放不同音频-html教程-PHP中文网

area标签无法直接触发音频播放，需用javascript绑定click/touchstart事件控制audio元素；须确保img尺寸与coords匹配，避免缩放失准，并处理浏览器自动播放策略限制。

html使用area标签实现点击图片不同位置播放不同音频

area 标签本身不能直接触发音频播放

HTML 的 <area> 是 <map></map> 内部的纯声明式标签，只定义坐标区域，不支持 onclick、onmousedown 等事件监听（除非用 JS 绑定）。直接写 <area onclick="playSound('a.mp3')"> 在多数浏览器里不会生效——它被忽略或触发失败。

真正可行的做法是：用 <area> 定义热点区域 + JavaScript 捕获点击事件 + 手动控制 <audio></audio> 元素。关键在于把 <area> 当作“坐标说明书”，而不是“可交互按钮”。

必须配合 usemap 和 img 的 coords 属性对齐

常见错误是图片缩放后 <area> 坐标失效。浏览器按原始图片尺寸解析 coords，如果 <img> 用了 width/height 或 CSS 缩放，坐标就错位了。

确保 <img> 的 width 和 height 属性与原图像素尺寸一致（例如原图 800×600，就写 width="800" style="max-width:90%"）
避免用 style="width:100%" 或 max-width 等响应式缩放——否则需用 JS 动态换算坐标
<area shape="rect" coords="x1,y1,x2,y2"> 中的坐标是左上→右下，不是中心点；circle 是 cx,cy,r，别漏掉半径

给每个 area 绑定 audio 播放的 JS 写法

不能靠内联事件，得用 document.querySelector('map').addEventListener 或为每个 <area> 单独加 id 后绑定。推荐后者，清晰且易调试：

@@##@@
<map name="soundmap"><area id="region-a" shape="rect" coords="10,20,110,120" alt="区域A">
<area id="region-b" shape="circle" coords="300,200,50" alt="区域B"></map><p><audio id="audio-a" src="a.mp3" preload="metadata"></audio><audio id="audio-b" src="b.mp3" preload="metadata"></audio></p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
														src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
													<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

然后 JS：

document.getElementById('region-a').addEventListener('click', () => {
  document.getElementById('audio-a').currentTime = 0;
  document.getElementById('audio-a').play().catch(e => console.warn('播放被阻止:', e));
});
document.getElementById('region-b').addEventListener('click', () => {
  document.getElementById('audio-b').currentTime = 0;
  document.getElementById('audio-b').play().catch(e => console.warn('播放被阻止:', e));
});

注意：.play() 可能被浏览器静音策略拒绝（尤其无用户手势上下文时），所以务必包裹 catch；currentTime = 0 是为了重复点击时重播，不加的话第二次点可能没声音。

移动端 click 事件延迟和 touch 兼容问题

在 iOS Safari 或部分安卓浏览器上，click 有约 300ms 延迟，且 <area> 对 touchstart 默认不冒泡，导致点击无响应。

给 <img src="map.png" usemap="#soundmap" alt="交互地图"> 加 style="max-width:90%" 可减少延迟
更稳妥的是监听 touchstart 并阻止默认行为：el.addEventListener('touchstart', e => { e.preventDefault(); /* 播放逻辑 */ })
不要依赖 hover 效果——移动端没有 hover，<area> 也不支持 :hover 伪类

实际项目中，如果区域多、音频多、还要兼容老设备，不如直接用 Canvas + 坐标判断——area 标签的语义优势在音频场景里几乎为零，反而限制大。