How to play multiple sound files on one Web Page? (on click best practice)

Question

I have a page where there is a list of vocabularies. I have a TTS for each vocabulary. The current approach that I am using is to include an mp3 flash player for each vocabulary. This creates delay to load all the flash because there can be more than 10 vocabularies in one page.

another problem is that the mp3 of the tts file has to be created on the page load, this also gives delay to the loading time.

Some alternative approach in my mind is to:

• include only one flash player.
• load and play the file on click to reduce page load for tts file creation.

So my question is,

Is there any javascript or jquery plugin that can do either of the 2 other approaches?

thank you

Answer 1

You can use the <audio> tag (HTML5) and you can control it when to load the files.
It is supported in most of the browsers like Google Chrome, Firefox, Opera...

It has two ways to set the link:

Way 1

<audio src="YOUR FILE LINK HERE">
    <embed> <!--FALLBACK HERE (FLASH PLAYER FOR IE)--> </embed>
</audio>

Way 2

<audio>
    <source src="YOUR FILE LINK HERE (MP3)" type="audio/ogg" />
    <source src="YOUR OTHER FILE LINK HERE (OGG)" type="audio/mp3" />
    <embed> <!--FALLBACK HERE (FLASH PLAYER FOR IE)--> </embed>
</audio>

---

Attributes

• Put controls="controls" if you want it to display the audio player.
• Put loop="loop" if you want it to loop the audio.
• Put autoplay="autoplay" if you want it to play the audio by itself.
• Put preload="preload" if you want it to preload it.

---

JavaScript Controlling

You can also control it using JavaScript.

To play it: document.getElementById("YOUR AUDIO TAG").play()
To pause it: document.getElementById("YOUR AUDIO TAG").pause()

---

Read more

• http://w3schools.com/html5/tag_audio.asp