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 vocabu

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