画像クリックで音声再生

説明

右目、左目にクリッカブルマップで領域を設定し、音声再生。
試したブラウザは Firefox と Edge。IEは試していない。
先頭のdoctypeは必須。これでHTML5だとブラウザに宣言するから。
クリッカブルマップで指定した領域とaudioタグで指定した音声ファイルの再生を繋ぐものが無いので javascriptで仲介してます。
メソッドaddEventListener()はIEだとattachEvent()になるかも。
audioタグの位置はここでなくてもいい。例ではどのareaタグと結びつくか明示したかったからこの配置。
画像は民安ともえ(たみやすともえ)さんのツイッターのアイコン画像から。

‏

<!doctype html>
<html>
  <body>
    <img src="https://pbs.twimg.com/profile_images/914475634646171649/M-dN3YON_400x400.jpg" usemap="#tammy"/>
    <map name="tammy">
      <area shape="rect" coords="150,100,200,200" id="right_eye">
        <audio src="https://wiki.hgotoh.jp/_media/documents/web/right_eye.wav" preload="auto" id="sound1"/>
      </area>
      <area shape="rect" coords="200,200,250,250" id="left_eye">
        <audio src="https://wiki.hgotoh.jp/_media/documents/web/left_eye.wav" preload="auto" id="sound2"/>
      </area>
    </map>
    <script>
    document.getElementById('right_eye').addEventListener('click',function(e){ document.getElementById('sound1').play(); });
    document.getElementById('left_eye').addEventListener('click',function(e){  document.getElementById('sound2').play(); });
    </script>
  </body>
</html>

実行してみる

HTML5, クリッカブルマップ, Audioタグ