JavaScript FileReader使用了大量内存

Question

我的小项目有问题.每当音乐播放器将新歌曲加载到播放列表中,或者您正在按下列表中的一首歌曲来播放它时,它会占用大量内存,并且在您将其关闭之前一直保持高位.我认为每次我使用文件读取器API它都使用内存,但我也在使用jDataView.js脚本加载ID3信息,我也认为它占用了大量内存.

你们有没有任何建议,加载,存储和播放歌曲FileReader,而不占用内存？我试过看看是否可以在使用后清除fileReader,但我找不到任何东西.我只在Chrome中测试过.

更新:我已经测试了我的项目,并发现,当我试图加载数据串时它占用了内存.

reader.onloadend = function(evt) {
    if(typeof(e) != "undefined"){
        e.pause();
    }
    e = new Audio();
    e.src = evt.target.result; // evt.target.result call takes the memory
    e.setAttribute("type", songs[index]["file"].type);
    e.play();
    e.addEventListener("ended", function() { LoadAudioFile(index + 1) }, false);
};

是否有另一种方法将数据加载到音频元素？

Answer 1

这不是因为FileReader你将srcaudio元素的属性设为1.33*mp3filesize字符串.因此,不是src属性是一个指向mp3资源的漂亮的短网址,而是base64编码的整个mp3文件.这是一个奇迹,你的浏览器没有崩溃.

您根本不应该读取该文件FileReader,而是从该文件创建一个blob URL并将其用作src.

var url = window.URL || window.webkitURL;

//Src will be like "blob:http%3A//stackoverflow.com/d13eb575-4863-4f86-8727-6400119f4afc"
//A very short string that is pointing to the original resource in hard drive

var src = url.createObjectURL( mp3filereference );

audioElement.src = src;