在我的应用程序中播放本地音频文件而不使用输入类型文件

Posted 2023-02-25

【中文标题】在我的应用程序中播放本地音频文件而不使用输入类型文件

【英文标题】：Play local audio files in My app without using the input type file

【发布时间】：2019-08-16 02:06:41

【问题描述】：

我正在创建一个电子应用程序，并且想在不使用输入类型文件的情况下播放本地音频文件（来自计算机而不是我的项目目录）。

我已经尝试过创建新音频实例并为其提供 mp3 文件的绝对路径的传统方式

在 createAudio() 中

const player = new Audio('/Absolute/path/to/music.mp3');
player.play();

我希望它能够播放音频文件，但无论出于何种原因它都会抛出“Uncaught (in promise) DOMException”

【问题讨论】：

你不能这样做，任何浏览器都会阻止一个试图从网页读取本地文件的请求（就像你隐含地用new Audio(...)做的那个）。

我正在为电子创建网页，这样它仍然可以正常工作吗？我在其他电子应用程序的控制台中尝试过，它似乎工作正常

哦，对不起，你是对的。也许这是你的问题？ github.com/electron/electron/issues/13525 查看问题，然后在底部寻找解决方案。不幸的是，我对 Electron 了解不多。

我认为这不是问题，因为 'autoplayPolicy: "no-user-gesture-required"' 是最新电子版本的默认设置。当我在创建 BrowserWindow 时将 webSecurity 设置为 false 时，它​​似乎工作正常

异常的字符串是什么？ player.play().catch(e => console.error(e))?

【参考方案1】：

在 javascript 或 html 中，以 / 开头的路径是 URL 架构、主机名和端口 E.G http://localhost、http://localhost:8080 的绝对路径

所以在 localhost 上运行的 /Absolute/path/to/music.mp3 的 URL 现在将变为 http://localhost/Absolute/path/to/music.mp3，虽然这对您来说可能不是问题，但在访问文件系统时应该始终使用绝对文件系统路径。例如 const player = new Audio('file:///Absolute/path/to/music.mp3'); 这将指向本地文件。

但是，如果您需要在其使用的浏览器上禁用 CORS，您可能会遇到 CORS 问题，在这种情况下，您需要在 Electron (chromium) disable web security 上回答问题

如果这不起作用，我们需要查看未被捕获的异常，

player.play().catch(e => console.error("audio play failed with: "+e)) 如果您显示了控制台输出，或者player.play().catch(e => alert("audio play failed with: "+e))

【讨论】：

我禁用了网络安全并且工作正常。但是有没有办法解决这个问题，因为我不想让自己变得脆弱。此外，异常是“未能加载，因为找不到源”。

我认为没有可行的方法。

【参考方案2】：

您需要更改自动播放政策。在electron的主进程中加入下面这行代码试试。

app.commandLine.appendSwitch('autoplay-policy', 'no-user-gesture-required');

【讨论】：

这是最新选举版本中的默认设置。请阅读我在问题部分的最后评论