如何在链接点击播放mp3

Question

有一个简单的链接

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

当用户点击链接时如何播放mp3文件？ 请帮我找一些简单有效的解决方案。 谢谢。

---

谢谢你的帮助。

在我的案例中，我选择了这个解决方案http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/作为最合适的解决方案。

Answer 1

使用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>

注意：由于音频是HTML5标签，因此它不支持旧版浏览器，因此请务必使用它。

或者看看这篇文章

Answer 2

由于IP限制，今天的许多浏览器（如Chrome和Firefox）都不会播放MP3或MP4文件。 您可以将文件转码为兼容的替代品，如Ogg，或者您必须依靠插件才能获得通用浏览器支持。 一个非常好的选择是Soundmanager ，我在一个不能选择转码的项目中使用它。 它尽可能使用HTML 5播放，但如果所选浏览器不支持文件类型，则会回退到不可见的Flash影片。 它非常灵活，但它有一点学习曲线。 这些演示虽然很棒，但提供了几种类型的播放器，您可以直接使用它们接口。

Answer 3

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

使用jQuery：

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

Answer 4

你有几个选项，你可以使用html5音频标签，这将创建一个允许你播放音频的小型播放器：

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

您还可以使用embed html标记：

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

然后点击链接运行以下javascript：

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

或者您可以将嵌入方法用于不支持html5 audio浏览器，方法是将上述代码放在音频标签中，并且只有在浏览器无法识别audio标签时才会显示

您也可以使用闪存音频播放器。