JavaScript

function playAudio(url) {
  new Audio(url).play();
}

HTML

<img src="image.png" onclick="playAudio('mysound.mp3')">

Supported in most modern browsers and easy to embed into HTML elements.

Try this example, https://jsfiddle.net/nerdvoso/46f7rxbs/1/

Following code:

var playBtn = document.getElementById('play');
var stopBtn = document.getElementById('stop');

var playSound = function() {
    audio.play();
};

playBtn.addEventListener('click', playSound, false);
stopBtn.addEventListener('click', function(){audio.pause()}, false);

<audio id="audio" src="https://freewavesamples.com/files/Roland-JV-2080-101-Bass-C2.wav" preload="auto"></audio>
<button id="play">Play</button>
<button id="stop">Stop</button>

Update, https://jsfiddle.net/nerdvoso/46f7rxbs/33/

var playBtn = document.getElementById('play');
var stopBtn = document.getElementById('stop');
var nextBtn = document.getElementById('next');
var prevBtn = document.getElementById('prev');

var soundSelected = document.getElementById("audio1");

var playSound = function() {soundSelected.play();};

var stopSound = function() {soundSelected.pause();};

var nextSound = function() {
  if(soundSelected.nextElementSibling){
    soundSelected.pause();
    soundSelected.currentTime = 0;
    soundSelected = soundSelected.nextElementSibling;
  }
};


var prevSound = function() {
  if(soundSelected.previousElementSibling){
    soundSelected.pause();
    soundSelected.currentTime = 0;
    soundSelected = soundSelected.previousElementSibling;
  }
};

playBtn.addEventListener('click', playSound, false);
stopBtn.addEventListener('click', stopSound, false);
nextBtn.addEventListener('click', nextSound, false);
prevBtn.addEventListener('click', prevSound, false);

<div id="playList">
    <audio id="audio1" src="https://freewavesamples.com/files/Roland-JV-2080-101-Bass-C2.wav" preload="auto"></audio>
    <audio id="audio2" src="https://freewavesamples.com/files/Yamaha-V50-Metalimba-C2.wav" preload="auto"></audio>
</div>
<button id="prev">Prev</button>
<button id="play">Play</button>
<button id="stop">Stop</button>
<button id="next">Next</button>

Play sound by dedicated buttons, enter link description here

var playSoundBtn = document.getElementsByClassName("playSound");

var playSound = function() {
    var attribute = this.getAttribute("data-sound");
    var sounds = document.getElementsByTagName('audio');
    for(i=0; i<sounds.length; i++){
        sounds[i].pause();
        sounds[i].currentTime = 0;
    }
    document.getElementById(attribute).play();
};

for (var i = 0; i < playSoundBtn.length; i++) {
    playSoundBtn[i].addEventListener('click', playSound, false);
}

<audio id="audio1" src="https://freewavesamples.com/files/Roland-JV-2080-101-Bass-C2.wav" preload="auto"></audio>
<audio id="audio2" src="https://freewavesamples.com/files/Yamaha-V50-Metalimba-C2.wav" preload="auto"></audio>
<hr>
<button class="playSound" data-sound="audio1">Sound 1</button>
<button class="playSound" data-sound="audio2">Sound 2</button>

Regarding the HTML:

script element

For JavaScript, you can simply use <script> without the type attribute:

If the language is not that described by "text/javascript", then the type attribute must be present

The language attribute is obsolete:

Authors should not specify a language attribute on a script element.

a element

I'd say a real button should be used here, not a link:

• button element with button type: <button type="button" onclick="…">Click here to hear a sound</button>
• input element with button type: <input type="button" onclick="…" value="Click here to hear a sound" />

Keep it simple (until it works) and try this:

<audio id="bflat" src="bflat.mp3"></audio>
<button onclick="document.getElementById('bflat').play()">Play!</button>

Found it at MDN