实现简略的音乐播放
找一个简略的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.jsconst 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.jsconst 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.jsconst 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.jsconst 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>成果
快点本人体验一下成果吧！你曾经制成了一个简陋的本地音乐播放器，接下来几篇文章咱们将会进行前端丑化和细节解决