Question

在Firefox中，我正在尝试从用户的文件系统加载音频文件我已经读过，我可以根据路径here创建一个File对象代码将在firefox插件中运行，因此可以访问特权代码。

为什么这会导致控制台出错并导致document.getElementById('player')元素消失？

http://jsfiddle.net/bobbyrne01/sp5qr7hh/

^小提琴仅用于演示目的，它最终将在firefox插件中运行。

html ..

<audio id="player" preload="auto" controls></audio>

js ..

var reader = new FileReader();
reader.onload = function(d) {
    console.log(d.target.result);
    document.getElementById('player').src = d.target.result;
};
reader.readAsDataURL(new File([""], "file:///home/rob/audio.mp3"));

控制台输出..

"data:application/octet-stream;base64," _display:24
HTTP "Content-Type" of "application/octet-stream" is not supported. Load of media resource data:application/octet-stream;base64, failed.

filesystem ..

rob@work:~$ pwd
/home/rob
rob@work:~$ ls audio.mp3 
audio.mp3

Answer 1

您是否对<audio>标记使用推荐的HTML5 DOM结构，它应该有效：

var sourceElem = document.createElement('source');
sourceElem.setAttribute('src', "file:///home/rob/audio.mp3");
document.getElementById('player').appendChild(sourceElem);

我让jsfiddle给我一个安全错误，说它不应该加载本地资源。

Answer 2

通过远程网站加载本地文件是一个安全问题。您还必须检测用户正在使用的系统才能获得正确的文件结构。大多数浏览器都会阻止这种行为，因为您不应该读取用户计算机上的任何随机文件，除非他们将其放在上传表单中。

您的用户基本上必须从本地副本运行您的网站（类似于iOS上的本地网络应用程序）

动态设置音频src使用本地文件

2 个答案: