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标签，因此它不支持旧版浏览器，因此确定在使用之前..

或者看看这个article

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的浏览器，方法是将上述代码放在音频代码中，并且只有在浏览器无法识别{{{ 1}}标签

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

如何在链接点击播放mp3

4 个答案: