乐趣区

Electron实现音乐播放器-2

jiezi

实现简略的音乐播放

找一个简略的 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>

成果

快点本人体验一下成果吧！你曾经制成了一个简陋的本地音乐播放器，接下来几篇文章咱们将会进行前端丑化和细节解决

退出移动版