Electron实现音乐播放器 - #2

实现简单的音乐播放

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

Electron实现音乐播放器 - #2_第1张图片

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





    
    
    Document


    

效果图:

Electron实现音乐播放器 - #2_第2张图片

自定义播放文件

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

效果图:

Electron实现音乐播放器 - #2_第3张图片

获取文件函数

我们可以通过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的进程,而渲染进程就是我们所创建的窗口等等一系列其他的进程

进程间的通信主要使用IPCBrowserWindow所带的webContents

方法 用途
ipcMain.on(event,function) 主进程接收信息
ipcRenderer.on(event,function) 渲染进程接收信息
mainWindow.webContents.send(event) 主进程发送信息
ipcRenderer.send(event) 渲染进程发送信息

我们可以先通过主进程获取需要打开的文件的路径,然后发送到渲染进程,渲染进程通过DOM来修改audiosrc属性

打开文件函数(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



    
    


效果

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

你可能感兴趣的:(node.js,electron)