实现简单的音乐播放
找一个简单的mp3文件作为示例：
可以简单的使用audio标签来播放mp3文件：
Document
效果图：
自定义播放文件
我们不可能永远的只播放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：
打开文件函数(index.html)：
菜单项被点击时执行打开文件函数：
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：
Document
效果
快点自己体验一下效果吧！你已经制成了一个简陋的本地音乐播放器，接下来几篇文章我们将会进行前端美化和细节处理