Question

我正在尝试通过（input：file）Elem加载本地音频文件，当我将其作为对象传递给音频构造函数Audio（）时，它不会加载/播放。

文件对象参数和方法：

lastModified: 1586969070000
lastModifiedDate: Wed Apr 15 2020 18:44:30 GMT+0200 (Central European Summer Time) {}
name: "audio.mp3"
size: 15235482
type: "audio/mpeg"
webkitRelativePath: ""

我尝试仅给出名称，相对路径，但似乎无济于事。

Js代码

var track = new Audio(file Object);
track.play();

当我尝试进行故障排除时：

console.log(track);

<audio preload="auto" src="[object File]">
#shadow-root (user-agent)
</audio>

以及当play（）触发时：

GET http:// **Local IP** /[object%20File] 404 (Not Found)
index.html:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

尽管在开始该项目之前，我做了一些测试，但效果很好，但现在却没有... 任何帮助都将是惊人的感谢

Answer 1

这以另一种方式起作用。您必须添加文件，然后捕获其节点（输入），并从中创建一个URL。该URL的工作方式与普通URL相同，但是与您的本地文件相同。

很抱歉提供了错误的解释，在这里您可以阅读更多

https://javascript.info/file https://javascript.info/blob

我也创建了一个片段。选择本地文件->将SRC添加到“玩家”->单击播放btn。

const btn = document.querySelector("#btn");
const yourMusic = document.querySelector("#yourMusic");
btn.addEventListener("click", () => {
  let music = document.querySelector("#file").files[0];
  yourMusic.src = URL.createObjectURL(music);
});

<input id="file" type="file" />
    <button id="btn">Add to player</button>
    <audio controls id="yourMusic"></audio>

加载本地音频文件并使用Audio（）播放

1 个答案: