Question

如何在不显示播放器的情况下创建指向mp3文件的文本超链接。例如，如果我在我的网站上有单词“play”并且单击它，则相关的mp3将在不离开页面且没有可见播放器的情况下播放。此外，右键单击时，此人可以选择保存/下载文件。我发现的最接近的例子只允许您复制链接位置而不下载/保存mp3文件。感谢。

    <!--[ In the head section of the HTML ]-->

<!--audio-->
<script type="text/javascript">
function play_single_sound() {
document.getElementById('audiotag').play();
}
</script>
<!--/audio-->

<!--[ In the body section of the HTML ]-->

<!--embedded audio-->
<div id="audio">
<audio id="audiotag" src="http://sample.mp3" autobuffer="autobuffer"></audio>
</div>
<!--/embedded audio-->

<!--button/link-->
<a href="javascript:play_single_sound();">play</a>
<!--/button/link-->

<!--[ Optional CSS ]-->
div#audio {
display: none;
overflow: hidden;
}

Answer 1

使<a>标记指向mp3文件。左键单击时，使用JavaScript进行播放。右键单击，您将获得带有“保存链接”选项的内置菜单。

<a href="http://sample.mp3" id="audiolink">play</a>

然后在您的JavaScript中，您可以阻止链接的默认操作：

<script type="text/javascript">
document.getElementById('audiolink').addEventListener('click', function(e){
    e.preventDefault();
    document.getElementById('audiotag').play();
});
</script>

Answer 2

最好的选择是使用SoundManager之类的东西。对于不支持html5音频标记的浏览器，它具有闪回后备功能。

正常mp3的演示拉开链接：play-mp3-links

将文本超链接到mp3而不显示播放器

2 个答案: