1つの画像をクリックするたび音声を変えるようにしたいです。

Question

前提・実現したいこと

1つの画像をクリックするたびに音声が変わるようにしたいです。JavaScriptで処理がしたいのでよろしくお願いします。

### <img src="hoge.jpg" alt="hoge">
<audio id="hoge" preload="auto>
    <source src="hoge1.mp3" type="audio/mp3">　//1回目のクリックの時の音
    <source src="hoge2.mp3" type="audio/mp3">　//2回目のクリックの時の音
    <source src="hoge3.mp3" type="audio/mp3">　//3回目のクリックの時の音
    <source src="hoge4.mp3" type="audio/mp3">　//4回目のクリックの時の音
 

```ここに言語名を入力
HTML JavaScript

補足情報（FW/ツールのバージョンなど）

JavaScript ES6

Answer 1

<source> 要素の解釈が間違っています（異なる音声/楽曲を切り替えるためのものではありません）。
乱暴な表現ですが、クロスブラウザ対策で同じ音声/楽曲をフォーマット（拡張子）の異なる複数ファイルを用意し、列挙するための要素になります。

MDN <audio>: 埋め込み音声要素 の 使用上のメモ を再確認してください。

<source> はブラウザがサポートする**コーデックの違い（ファイル形式に影響）**を吸収するため、複数のファイルを用意しておくと、ブラウザが最適なファイルを選んで再生します。

これらのファイルは、フォーマット（拡張子）こそ異なりますが、
スピーカーから出力される音声/楽曲は同じ内容を再生します。

---

1つの画像をクリックするたび音声を変えるようにしたい

JavaScript で制御する場合、audio#hoge の src 属性を切り替えます。
ただし、再生可能なファイル形式がありますので、様々な手順を踏む必要があります。
MDN Web Audio API を参考にしてください。