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 / as the most appropriate in my case.

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.

• javascript
• jquery
• html

• The modern way would be to use the Audio API or to create a new <audio> tag via JavaScript. BTW this has nothing to do with Joomla or PHP. – ComFreek Commented Dec 13, 2012 at 18:13
• use a flash or java-based player, or HOPE that the user has an mp3 player/plugin that handles that mime type for you. – Marc B Commented Dec 13, 2012 at 18:14

4 Answers 4

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

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.

You have several options, you could use the html5 audio tag, which would create a small player that would allow you to play the audio:

<audio controls width="100" height="100">
    <source src="some.mp3" type="audio/mp3">
    <!-- Fallback for older browsers -->
    Your browser doesn't support html5 audio
</audio>

You could also use the embed html tag:

<embed src="some.mp3" autostart="false" id="somemp3" enablejavascript="yes">

Then run the following javascript upon clicking the link:

var snd = document.getElementById(somemp3);
snd.play();

Or you could use the embed method for browsers that don't support html5 audio, by putting the above code within the audio tags, and it will show up only if the browser doesn't recognize the audio tag

You could also use a flash audio player.

<a href="#">Play Audio</a>
<audio>
  <source src="demo.ogg" type="audio/ogg">
  <source src="demo.mp3" type="audio/mpeg">
  Your browser doesn't support the audio element.
</audio>

Using jQuery:

$("a").click(function() {
  $("audio").play();
});