How to play mp3 on link click

Question

There is a simple link

<a href="some.mp3">01. The Name of Track</a>

How to play the mp3 file, when user clicks on link? Please help me to find some simple and effective solution. Thank you.

---

Thank you for help.

I choosed this solution http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/ as the most appropriate in my case.

Solution 1

Many browsers today (like Chrome and Firefox) will not play MP3 or MP4 files, due to IP restrictions. You can either transcode your files to compatible alternatives, like Ogg, or you'll have to rely on plugins to get universal browser support. One very good option is Soundmanager, which I'm using in a project where transcoding is not an option. It uses HTML 5 playback when it can, but falls back to an invisible Flash movie if the file type is not supported by the chosen browser. It's extremely flexible, but it has a bit of a learning curve. The demos are fantastic though, and provide several types of players that you can probably just drop in to whatever your interface is.

Solution 2

Use HTML5 <audio>

<audio controls id="linkAudio">
  <source src="demo.ogg" type="audio/ogg">
  <source src="demo.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<script>
  document.getElementById("link_id").addEventListener("click", function () {
    document.getElementById("linkAudio").play();
  });
</script>

Note: As audio is an HTML5 tag, it won't support old browsers, so be sure before you use it..

Or take a look at this article

Comments

[KFox]

Cross browser compatibility is important.

[Mr. Alien]

@KseniaMurach It is cross browser, but won't support the old 1s