如何使用 java 脚本 Save/Download 一个 mp3 DataURL 对象？

Question

我允许用户从本地文件系统select一个mp3文件，然后允许下载相同的文件。学习用。

<script type="text/javascript">
            window.onload = function() {
                document.querySelector('#musicFile').addEventListener('change', function(e){
                            var file = e.target.files[0];
                            console.log(e, file);
                            if(file.type.match('audio.*')) { // if its an audio file
                                var fReader = new FileReader();

                                fReader.onload = function(ev) {  //onload event

                                    var dataUrl  = ev.target.result;


                                    var downloadCon = document.querySelector('#download') 
                                    downloadCon.href = dataUrl;
                                };

                                fReader.readAsDataURL(file);  //start reading the file 
                            }
                        });
            }
        </script>

HTML正文：

<body>
<div class="controls">  
                <input type="file" id="musicFile">
                <a id='download'href='#' download='music.mp3' class='downloadLink'>
                    Download File
                    </a>
            </div>
</body>

当我点击 Download File 时，没有任何反应。你能告诉我我做错了什么吗？

Answer 1

您不需要使用 FileReader 来执行此操作。简单地说，您需要创建一个 URLObject 并使 A 标记指向它。代码（在 Chrome 和 Firefox Linux 下测试）：

<script type="text/javascript">
    window.onload = function() {
        document.querySelector('#musicFile').addEventListener('change', function(e){
            var file = e.target.files[0];
            console.log(e, file);
            if(file.type.match('audio.*')) { // if its an audio file
                document.getElementById( 'download' ).href = URL.createObjectURL(file);
            }
         });
    }
</script>

更具体地说，我在您的代码中做了什么 - 我删除了所有 FileReader 代码并添加了

document.getElementById( 'download' ).href = URL.createObjectURL(file);

在原地。我没碰你的HTML.

希望对您有所帮助。

如何使用 java 脚本 Save/Download 一个 mp3 DataURL 对象？

How to Save/Download a mp3 DataURL object using java script?

html

javascript

html5-audio

html5-filesystem