Electron实现音乐播放器-2

实现简略的音乐播放

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

成果

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

Electron实现音乐播放器-2

实现简略的音乐播放

自定义播放文件

自定义菜单栏

获取文件函数

关上文件&&过程通信

成果

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

Electron实现音乐播放器-2

实现简略的音乐播放

自定义播放文件

自定义菜单栏

获取文件函数

关上文件&&过程通信

成果

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复