Javascript：表单输入音频到音频下载链接？
Posted
技术标签:
【中文标题】Javascript：表单输入音频到音频下载链接？【英文标题】：Javascript: Form input audio to audio download link? 【发布时间】：2018-03-11 07:32:11 【问题描述】：这是一个奇怪的问题，但它让我困惑了一段时间。
我有这个音频输入：
<input required type="file" id="inputAudio" accept="audio/*" onchange="downloadLink(this);">
当你提交一些音频时，我想在这个元素上添加一个下载链接：
<a id="blah">Download Audio</a>
我试过做一些奇怪的事情，比如：
function downloadLink(element)
var file = element.files[0];
var reader = new FileReader();
reader.onload = function(e)
var data = file.type + ";charset=utf-8," + encodeURIComponent(e.target.result);
var link = document.getElementById("blah");
link.href = "data:" + data;
link.download = "someName." + file.name.split(".").pop();
;
reader.readAsDataURL(file);
但是，上述情况会导致 Chrome 中的下载错误。
这是一个用于测试目的的 html 文件：
<!DOCTYPE html>
<html>
<head>
<title>Weird Problem</title>
<script>
function downloadLink(element)
var file = element.files[0];
var reader = new FileReader();
reader.onload = function(e)
var data = file.type + ";charset=utf-8," + encodeURIComponent(e.target.result);
var link = document.getElementById("blah");
link.href = "data:" + data;
link.download = "someName." + file.name.split(".").pop();
;
reader.readAsDataURL(file);
</script>
</head>
<body>
<input required type="file" id="inputAudio" accept="audio/*" onchange="downloadLink(this);">
<a id="blah">Download Audio</a>
</body>
</html>
编辑：我刚刚注意到您可以嵌入 HTML 文件：
function downloadLink(element)
var file = element.files[0];
var reader = new FileReader();
reader.onload = function(e)
var data = file.type + ";charset=utf-8," + encodeURIComponent(e.target.result);
var link = document.getElementById("blah");
link.href = "data:" + data;
link.download = "someName." + file.name.split(".").pop();
;
reader.readAsDataURL(file);
<!DOCTYPE html>
<html>
<head>
<title>Weird Problem</title>
</head>
<body>
<input required type="file" id="inputAudio" accept="audio/*" onchange="downloadLink(this);">
<a id="blah">Download Audio</a>
</body>
</html>任何帮助都会很棒！
【问题讨论】：
你不需要再编码了，阅读器已经给你base64的数据了 还有github.com/eligrey/FileSaver.js @nullqube 即使不使用 encodeURIComponent 也会出现同样的错误，下载失败。我真的不想为此使用任何外部库。 【参考方案1】：诀窍是你应该把它变成一个 ObjectURL 然后顾名思义你可以将它用作href 的网址，
所以现在已经在 safari、Chrome、FireFox 上进行了测试：
var file = element.files[0];
var link = document.getElementById("blah");
link.href = window.URL.createObjectURL(file);
link.download = "someName." + file.name.split(".").pop();
它在PlayCode.io工作
【讨论】：
此版本适用于 MP3 文件，但似乎不适用于 WAV 文件 我只是用来自music.helsinki.fi/tmt/opetus/uusmedia/esim/index-e.html 的.wav 文件对其进行了测试，效果很好。 您使用的是什么浏览器？我使用的是 Chrome，每次都出现下载错误 Safari。是的，你是对的它在 chrome 上失败了。所以让我检查一下以上是关于Javascript：表单输入音频到音频下载链接？的主要内容，如果未能解决你的问题，请参考以下文章