我如何在项目的根源播放外部歌曲

时间:2019-12-25 02:53:38

标签: reactjs electron

我正在用Electron和React开发一个应用程序,它是一种mp3播放器。问题是我想播放项目文件夹中没有的音频。如何从硬盘上载这些文件?

string

3 个答案:

答案 0 :(得分:5)

当然,Electron可以与项目根目录之外的文件对话。如果做不到,那么对于制作桌面应用程序将没有任何好处。

Electron中有几种方法可以做到这一点。

dialog API使您可以从用户的操作系统向用户显示标准的“文件打开”对话框。

通过File Object API,您可以直接与文件系统上的文件对话。

通过shell API,您可以运行本机命令,例如启动本机MP3播放器。

更新:我忘了提及您将要与项目根目录之外的文件进行对话的主要方式之一:这是通过node.js本身进行的。

答案 1 :(得分:2)

下面是您可以在应用程序中尝试的示例

//audioFile: path of your audio file
export const playAudio = (audioFile) => {
  if (!audioFile) return;

  if (process.platform === 'darwin') {
    let command = `afplay ${audioFile}.aiff`;
    exec(command, (error, _, stderr) => {
      if (error) {
        stderr: ${stderr}`);
      }
    });
  } else {
    // Try an mp3 file format
    var audio = new Audio(audioFile);
    audio.play();
  }
};

答案 2 :(得分:1)

简单地说,URL应该像这样E:\folder\musique.mp3(在Windows上)

我想您允许用户选择要播放的音频文件。所以首先您将在主要过程中执行类似的操作

ipcMain.handle('get-audio', async () => {
    let files = []
    try {
      files = (await dialog.showOpenDialog({
        properties: ['openFile', 'multiSelections']
      })).filePaths
    } catch (error) {
      console.error(error);
    }
    return files
});

在渲染器进程中添加一个按钮或类似事件

const files = await ipcRenderer.invoke('get-audio') 
// update the stats here

然后在BrowserWindow中禁用Web安全首选项

new BrowserWindow({
    webPreferences: {
      webSecurity: false, // very important 
    }
  });