如何使用java脚本保存/下载mp3 DataURL对象

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

本文关键字：下载 mp3 DataURL 对象 保存 何使用 java 脚本      更新时间：2023-09-26

允许用户从本地文件系统中选择一个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时，什么都没有发生。你能告诉我我做错了什么吗?

您不需要使用FileReader来完成此操作。简单地说，您需要创建一个URLObject并使a标记指向它。该代码(在Chrome和Firefox for 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。

希望对你有帮助。

相关文章：