如何使用HTML图片映射播放音频且不跳转至新页面

嘿，我懂你现在的困扰——用图片映射做了游戏音效按钮，结果一点击就跳转到播放音频的页面，完全不是想要的「点击即播」的本地效果对吧？别慌，咱们只需要给代码加一点JavaScript逻辑，就能拦截默认的跳转行为，直接在当前页面播放音频。

问题根源 #

你原来的代码里，<area>标签的href直接指向了音频文件，浏览器的默认行为就是导航到这个资源地址，所以才会跳走。咱们要做的就是阻止这个默认行为，改用JS来触发音频播放。

修改后的完整代码 #

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jukebox Web Site</title>
</head>
<body>
    <center>
        <map name="image-map">
            <img src="jukebox.png" usemap="#image-map" alt="游戏音效点唱机">
            <!-- 把href改成#，添加data-sound属性存储音频路径 -->
            <area target="" alt="1up" title="1up" href="#" data-sound="1up.mp3" coords="169,197,192,219" shape="rect">
            <area target="" alt="Brick" title="Brick" href="#" data-sound="brick.mp3" coords="199,199,222,221" shape="rect">
            <area target="" alt="Coin" title="Coin" href="#" data-sound="coin.mp3" coords="229,198,253,220" shape="rect">
            <area target="" alt="flagpole" title="flagpole" href="#" data-sound="flagpole.mp3" coords="259,197,283,220" shape="rect">
            <area target="" alt="gameover" title="gameover" href="#" data-sound="gameover.mp3" coords="290,197,313,218" shape="rect">
            <area target="" alt="kick" title="kick" href="#" data-sound="kick.mp3" coords="320,197,344,219" shape="rect">
        </map>
    </center>

    <script>
        // 1. 获取所有图片映射的area元素
        const soundAreas = document.querySelectorAll('map[name="image-map"] area');
        
        // 2. 给每个area绑定点击事件
        soundAreas.forEach(area => {
            area.addEventListener('click', function(event) {
                // 关键：阻止浏览器默认的跳转行为
                event.preventDefault();
                
                // 3. 获取当前area对应的音频路径
                const soundPath = this.getAttribute('data-sound');
                
                // 4. 创建Audio对象并播放音频
                const audio = new Audio(soundPath);
                audio.play().catch(err => {
                    // 处理播放失败的情况（比如浏览器自动播放限制）
                    console.error('音频播放失败:', err);
                });
            });
        });
    </script>
</body>
</html>

核心修改点解析 #

• 替换href并添加data-sound：把原来指向音频的href改成#（避免空href的默认行为），新增data-sound自定义属性来存储音频文件路径——这样既保留了语义，又能让JS轻松拿到要播放的资源。
• 拦截默认行为：event.preventDefault()是关键！它告诉浏览器「不要执行你原本要做的跳转操作」。
• 用JS播放音频：通过new Audio(soundPath)创建音频对象，调用play()方法直接在当前页面播放。

额外优化建议（可选） #

如果想让体验更流畅，还可以做这些小改进：

• 复用音频对象：可以提前把所有音频对象创建好，点击时直接调用play()，避免每次点击都新建对象，比如：

  // 提前缓存所有音频对象
  const soundCache = {};
  soundAreas.forEach(area => {
      const soundPath = area.getAttribute('data-sound');
      soundCache[soundPath] = new Audio(soundPath);
  });
  
  // 点击时直接播放缓存的音频
  area.addEventListener('click', function(event) {
      event.preventDefault();
      const soundPath = this.getAttribute('data-sound');
      soundCache[soundPath].currentTime = 0; // 重置播放进度，支持连续点击重复播放
      soundCache[soundPath].play().catch(err => console.error(err));
  });
  

• 处理浏览器自动播放限制：现在很多浏览器要求用户和页面有交互后才能播放音频，咱们的代码已经是点击触发，所以大部分情况没问题，但如果遇到播放失败，可以加个提示给用户。

备注：内容来源于stack exchange，提问作者elfuegoeggo