共计 4303 个字符，预计需要花费 11 分钟才能阅读完成。
实现简略的音乐播放
找一个简略的 mp3 文件作为示例：
能够简略的应用 audio 标签来播放 mp3 文件：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
</audio>
</body>
</html>效果图：
自定义播放文件
咱们不可能永远的只播放 horse.mp3 这个示例，咱们心愿用户可能通过会话窗口来关上想要关上的音乐文件，实现音乐播放器的核心内容
自定义菜单栏
咱们想要实现自定义播放内容，首先须要一个咱们本人的菜单栏，来给用户一个关上文件的入口
首先引入 Menu 模块：
// main.js
const electron = require('electron') // 引入 electron 模块
const {
app,
BrowserWindow,
Menu
} = electron // 从 electron 中引入咱们须要的模块
let mainWindow; // 申明一个变量，作为主窗口
app.on('ready', function () { // 当 app 筹备好时执行
mainWindow = new BrowserWindow({ // 将 mainWindow 定义为一个新的浏览器窗口
// 这一部分先空着，前面会向窗口增加参数
})
mainWindow.loadFile("index.html");
})而后构建咱们的菜单：
// main.js
const electron = require('electron') // 引入 electron 模块
const {
app,
BrowserWindow,
Menu
} = electron // 从 electron 中引入咱们须要的模块
let mainWindow; // 申明一个变量，作为主窗口
app.on('ready', function () { // 当 app 筹备好时执行
mainWindow = new BrowserWindow({ // 将 mainWindow 定义为一个新的浏览器窗口
// 这一部分先空着，前面会向窗口增加参数
})
mainWindow.loadFile("index.html");
mainMenu = Menu.buildFromTemplate(MenuTemplate)// 应用 Menu 模块的内置函数将 json 格局的菜单模板转换为 electron 的菜单格局
mainWindow.setMenu(mainMenu)// 把菜单插入窗口
})
const MenuTemplate = [{// 菜单模板,json 格局
label: "File",
submenu: [{// 菜单项的子菜单, 同 json 格局
label: "Open File"
}]
}]效果图：
获取文件函数
咱们能够通过 dialog 模块关上一个文件抉择框，用户实现抉择后他会返还一个文件的门路path
首先引入 dialog 模块：
// main.js
const electron = require('electron') // 引入 electron 模块
const {
app,
BrowserWindow,
Menu,
dialog
} = electron // 从 electron 中引入咱们须要的模块
let mainWindow; // 申明一个变量，作为主窗口
app.on('ready', function () { // 当 app 筹备好时执行
mainWindow = new BrowserWindow({ // 将 mainWindow 定义为一个新的浏览器窗口
// 这一部分先空着，前面会向窗口增加参数
})
mainWindow.loadFile("index.html");
mainMenu = Menu.buildFromTemplate(MenuTemplate)// 应用 Menu 模块的内置函数将 json 格局的菜单模板转换为 electron 的菜单格局
mainWindow.setMenu(mainMenu)// 把菜单插入窗口
})
const MenuTemplate = [{// 菜单模板,json 格局
label: "File",
submenu: [{// 菜单项的子菜单, 同 json 格局
label: "Open File"
}]
}]而后写一个获取文件门路的函数，它会返还文件的门路path：
function getPath() { // 获取门路
path = dialog.showOpenDialog({ // 创立一个文件抉择框
properties: ['openFile', 'openFile', 'multiSelections']
});
if (path) {return path; // 如果抉择了文件则返还门路}
}关上文件 && 过程通信
首先来理解一下过程通信
electron有两种过程，主过程 和渲染过程 ， 主过程 就是咱们的 main.js 的过程，而 渲染过程 就是咱们所创立的窗口等等一系列其余的过程
过程间的通信次要应用 IPC 和BrowserWindow所带的webContents
| 办法 | 用处 |
|---|---|
ipcMain.on(event,function) |
主过程接管信息 |
ipcRenderer.on(event,function) |
渲染过程接管信息 |
mainWindow.webContents.send(event) |
主过程发送信息 |
ipcRenderer.send(event) |
渲染过程发送信息 |
咱们能够先通过主过程获取须要关上的文件的门路，而后发送到渲染过程，渲染过程通过 DOM 来批改 audio 的src属性
关上文件函数(main.js)：
function openFile() {path = getPath();
if (path) {mainWindow.webContents.send("open-file", path); //open-file 为事件名，可自定义
}
}给 video 标签加一个id：
<audio controls id="audio">
<source src=""type="audio/mpeg">
</audio>关上文件函数(index.html)：
<script>
const electron = require('electron') // 引入 electron 模块
const {ipcRenderer} = electron; // 引入 ipcRenderer 模块
ipcRenderer.on("open-file", function (event, path) {// 当接到 open-file 信息时执行
audio = document.getElementById("audio");
audio.src = path;
});
</script>菜单项被点击时执行关上文件函数：
const MenuTemplate = [{ // 菜单模板,json 格局
label: "File",
submenu: [{ // 菜单项的子菜单, 同 json 格局
label: "Open File",
click() {openFile();
}
}]
}]main.js：
// main.js
const electron = require('electron') // 引入 electron 模块
const {
app,
BrowserWindow,
Menu,
dialog
} = electron // 从 electron 中引入咱们须要的模块
let mainWindow; // 申明一个变量，作为主窗口
app.on('ready', function () { // 当 app 筹备好时执行
mainWindow = new BrowserWindow({ // 将 mainWindow 定义为一个新的浏览器窗口
// 这一部分先空着，前面会向窗口增加参数
})
mainWindow.loadFile("index.html");
mainMenu = Menu.buildFromTemplate(MenuTemplate) // 应用 Menu 模块的内置函数将 json 格局的菜单模板转换为 electron 的菜单格局
mainWindow.setMenu(mainMenu) // 把菜单插入窗口
})
function getPath() { // 获取门路
path = dialog.showOpenDialog({ // 创立一个文件抉择框
properties: ['openFile', 'openFile', 'multiSelections']
});
if (path) {return path; // 如果抉择了文件则返还门路}
}
function openFile() {path = getPath();
if (path) {mainWindow.webContents.send("open-file", path); //open-file 为事件名，可自定义
}
}
const MenuTemplate = [{ // 菜单模板,json 格局
label: "File",
submenu: [{ // 菜单项的子菜单, 同 json 格局
label: "Open File",
click() {openFile();
}
}]
}]index.html：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio controls id="audio">
<source src=""type="audio/mpeg">
</audio>
<script>
const electron = require('electron') // 引入 electron 模块
const {ipcRenderer} = electron; // 引入 ipcRenderer 模块
ipcRenderer.on("open-file", function (event, path) {// 当接到 open-file 信息时执行
audio = document.getElementById("audio");
audio.src = path;
});
</script>
</body>
</html>成果
快点本人体验一下成果吧！你曾经制成了一个简陋的本地音乐播放器，接下来几篇文章咱们将会进行前端丑化和细节解决
正文完
