Electron实现音乐播放器 - #2

实现简单的音乐播放

找一个简单的mp3文件作为示例：

可以简单的使用audio标签来播放mp3文件：

效果图：

自定义播放文件

我们不可能永远的只播放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：

效果

快点自己体验一下效果吧！你已经制成了一个简陋的本地音乐播放器，接下来几篇文章我们将会进行前端美化和细节处理