在我的应用中播放本地音频文件，无需使用输入类型文件

Question

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

我尝试了传统的方法来创建一个新的 Audio 实例并为其提供 mp3 文件的绝对路径

在 createAudio() 内部

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

我希望它能够播放音频文件，但无论出于何种原因，它都会抛出“未捕获（承诺）DOMException”

Answer 1

在 Javascript 或 HTML 中，以 / 开头的路径是 URL 架构、主机名和端口 E.G 的绝对路径

http://localhost

、

http://localhost:8080

所以在本地主机上运行的

/Absolute/path/to/music.mp3

的URL现在将变成

http://localhost/Absolute/path/to/music.mp3

，虽然这对您来说可能不是问题，但在访问文件系统时您应该始终使用绝对文件系统路径。 E.G

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

这将指向本地文件。

但是，如果您需要在所使用的浏览器上禁用 CORS，您可能会遇到 CORS 问题，在这种情况下，您需要 Electron (chromium) 禁用 Web 安全性

上的答案

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

player.play().catch(e => console.error("audio play failed with: "+e))

（如果显示控制台输出），或者

player.play().catch(e => alert("audio play failed with: "+e))

Answer 2

您需要更改自动播放政策。在电子主进程中添加以下行并尝试。

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

Answer 3

对于渲染器进程，您可以使用带有 Base64 数据的 html5 音频而不是声音文件 url：

import soundBase64Data from '../path/to/sound.wav'

new Audio(soundBase64Data).play()