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.

This answer https://stackoverflow.com/a/7620930/1459653 by @klaustopher (https://stackoverflow.com/users/767272/klaustopher) helped me. He wrote:

HTML5 has the new <audio>-Tag that can be used to play sound. It even has a pretty simple JavaScript Interface:

<audio id="sound1" src="yoursound.mp3" preload="auto"></audio> <button onclick="document.getElementById('sound1').play();">Play it</button>

Here's how I implemented his advice so that clicking on the Font Awesome icon "fa-volume-up" (located on the Web page after "mule.") results in "donkey2.mp3" sound playing (note: mp3 doesn't play in all browsers).

<p>In short, you're treated like a whole person, instead of a rented mule. <audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio><a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a>

If you have the ID of your audio element, you can do this :

document.getElementById(theId).play();

The audio element could look like this :

<audio id="someId">
    <source src=sound/zbluejay.wav>
</audio>

And if you need it, you may add the audio element dynamically like this :

document.write("<audio id=someId><source src=yourURL</audio>");
document.getElementById('someId').play();​​​​

Fiddle here.

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" />

Interesting question.

Obviously, you should go for a JavaScript solution (like this post). To quote css-tricks.com:

Again unfortunately, we can't tell an <audio> element what to do through CSS, so we'll need JavaScript.

However you have set up quite a nice challenge.

The <audio> element has the ability to show controls. In most browsers, the play button would come first from left in the controls. Thus, if you wrap the appropriate <audio> element inside your letter element (<div>/<img>/ etc.), then, with a little absolute-positioning magic, and low opacity for the <audio>, you could put your letter "over the sound". So, when users click on the letter, they actually click on the play button.

If you use the browser's default controls, then you're browser dependent, as the controls dimensions do differ between browsers. However, you can create custom controls, or use players available in the market (like JPlayer), to have constant dimensions to fit to your letters.

Example and Demo:

The following code will make a click on the letter H play a sound of a horse, as long as you test it in a Chrome browser.

CSS:

div#lH {
  position: absolute;
  width: 30px;
  height: 30px;
  overflow: hidden;
  z-index: 1;
  font-size: 25px;
  text-align:center;
}
audio#aH {
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 2;
  opacity: 0.01;
}

HTML:

<div id="lH">
  <audio controls id="aH">
    <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
    <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
H
</div>

Here's a JSFiddle.