很多朋友做网站时候想要实现点击a标签下载MP3文件，但是会遇到点击a标签就直接打开新的页面播放了，不是下载文件。今天就来说说如何处理这个问题。
网上看了很多帖子，总结了几个方法。
方法1. 把下载放到后端处理，前台html通过ajax请求后端，然后下载。
方法2. 通过a标签download属性下载。实验了几次这种方法。发现需要相对路径才可以，绝对路径会打开新页面播放。
因为是纯html+js来实现点击a标签下载，所以这里来说说方法2的具体实现步骤。
首先，说下遇到的情况。因为我这里为了方便后台使用，直接用的是百度ueditor编辑器插入音频Audio，实现音频播放的。接下来看具体的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯html+js来实现点击a标签下载</title>
<!-- 引入jQuery库 -->
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- 页面样式文件 -->
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 按钮文件区域 -->
<div id="anq">
<a href="#" onclick="control()">播放/暂停</a>
<a href="#" onclick="repeat()" >重新开始</a>
<a href="#" id="xz" download="{$title}">下载音频</a> <!-- {$title}是从后台传过的音频名称 -->
</div>
<!-- 后台编辑器发布内容区域开始 -->
<!-- 因为百度编辑器直接插入的audio标签，所以没有id选择器 -->
<p style="text-align: center;">
<audio class="audio-js" controls="" preload="none" src="http://www.12564.cn/ueditor/upload/1616382683569438.mp3" >
</audio>
</p>
<!-- 后台编辑器发布内容区域结束 -->
<!-- 给audio加入选择器 -->
<script>
var obj = document.getElementsByTagName("audio")[0]; //查询Adudio标签
obj.setAttribute("id","myaudio") //给Audio标签加上 id="myaudio"
var path = document.getElementById("myaudio").src=obj.src; //获取Adudio标签里MP3音乐文件路径
url = path.replace(/^http:\/\/[^/]+/, ""); //过滤掉MP3音乐文件路径里的网址
//alert(url);
document.getElementById("xz").href=url; //得到MP3音乐文件的相对路径，并把它赋值到下载音频按钮的 href=""里面，这样就完成点击下载了。
</script>
<!-- 判断页面是否含有audio标签，有就显示播放暂停和下载按钮，没有就隐藏 -->
<script>
if(document.getElementById("myaudio")){
} else {
document.getElementById("anq").style.display="none";//隐藏
}
</script>
<!-- 移动按钮位置 让播放暂停下载按钮始终在Aduio标签下面 -->
<script language="javascript">
$("#anq").insertAfter($("#myaudio"));
</script>
<!-- 播放暂停控制 -->
<script language="javascript" type="text/javascript">
function repeat() {
var audio = document.getElementById('myaudio');
audio.currentTime = 0; //重新播放
}
function control() {
var audio = document.getElementById('myaudio');
if (audio !== null) {
if (audio.paused) {
audio.play(); // 播放
} else {
audio.pause(); // 暂停
}
}
}
</script>
</body>
</html>最终效果如下：
通过以上代码就可以在html里面完成点击a标签直接下载音频了，如果你也有这个需求就去试试吧。
如果内容有帮助，就点个赞吧！