devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用 Electron 构建跨平台的音乐播放器

作者：笔触狂放9 | 2024-08-18 19:46:45

赞

踩

使用 Electron 构建跨平台的音乐播放器

本文将介绍如何使用 Electron 实现音乐播放器的基本功能，包括音乐文件的加载、播放控制和界面展示等。

一、准备工作

首先确保你已经安装了 Node.js 和 npm。

1.1 创建项目目录

创建一个新的项目目录名为“music-player”

1.2 初始化项目

使用vscode打开项目（可以使用其他开发工具），在当前目录的终端命令行输入:

npm init -y

来进行项目的初始化。

1.3 安装Electron

通过以下命令安装 Electron：

npm install electron

如果上面命令不好使可以用这个:

cnpm instal electron

1.4 修改package.json文件

将package.json文件中修改两处。

首先是把main的值修改为main.js。

然后是在scripts里添加一个"start":"electron ." 用来启动项目。

二、编写加载音乐文件

2.1 创建主窗体

在根目录下创建一个main.js文件。

main.js整体代码 

  1. const { app, BrowserWindow, ipcMain } = require('electron');
  2. const path = require('path');
  3.  
  4. let mainWindow;
  5.  
  6. function createWindow() {
  7.   // 创建浏览器窗口
  8.   mainWindow = new BrowserWindow({
  9.     width: 800,
  10.     height: 600,
  11.     webPreferences: {
  12.       nodeIntegration: true, // 允许在渲染进程中使用 Node.js API
  13.       preload: path.join(__dirname, 'preload.js') // 使用 preload 脚本
  14.     },
  15.   });
  16.  
  17.   // 加载应用的 index.html 文件
  18.   mainWindow.loadFile('app/index.html');
  19.  
  20.   // 监听窗口关闭事件
  21.   mainWindow.on('closed', () => {
  22.     mainWindow = null;
  23.   });
  24. }
  25.  
  26. // 当 Electron 完成初始化并准备创建浏览器窗口时调用 createWindow 函数
  27. app.whenReady().then(createWindow);
  28.  
  29. // 监听所有窗口关闭事件
  30. app.on('window-all-closed', () => {
  31.   if (process.platform !== 'darwin') {
  32.     app.quit(); // 关闭应用
  33.   }
  34. });
  35.  
  36. // 在激活应用时创建一个新窗口
  37. app.on('activate', () => {
  38.   if (BrowserWindow.getAllWindows().length === 0) {
  39.     createWindow();
  40.   }
  41. });
  42.  
  43. // 监听渲染进程发送的消息
  44. ipcMain.on('selected-file', (event, filePath) => {
  45.   console.log('Selected file:', filePath);
  46. });

2.2 创建 preload脚本

因为无法再自定义js中使用require所以，通过使用 preload 脚本，可以在渲染进程中直接访问 Node.js 的模块和 Electron 的 API。

在根目录下创建一个名为 preload.js的脚本文件：

  1. const { contextBridge, ipcRenderer } = require('electron');
  2.  
  3. // 向渲染进程暴露的 API
  4. const api = {
  5.   sendSelectedFilePath: (filePath) => {
  6.     ipcRenderer.send('selected-file', filePath);
  7.   },
  8. };
  9.  
  10. // 将 API 注入到 window 对象中，使其在渲染进程中可用
  11. contextBridge.exposeInMainWorld('api', api);

 三、编写前端代码

3.1 创建index.html

在根目录下创建一个app目录，在目录中创建一个index.html文件

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>香菜的开发日记-播放器</title>
  6.     <style>
  7.       /* 样式表 */
  8.       body {
  9.         font-family: Arial, sans-serif;
  10.         background-color: #000000;
  11.         text-align: center;
  12.       }
  13.  
  14.       .player-container {
  15.         background-color: #1d1d1d;
  16.         border-radius: 8px;
  17.         padding: 20px;
  18.         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  19.         width: 400px;
  20.         margin: 0 auto;
  21.       }
  22.  
  23.       .nav-bar {
  24.         display: flex;
  25.         justify-content: space-between;
  26.       }
  27.  
  28.       #music-name {
  29.         color: #ffffff;
  30.         font-size: 24px;
  31.         text-align: left;
  32.       }
  33.  
  34.       label {
  35.         background-color: #848494;
  36.         color: #fff;
  37.         padding: 5px;
  38.         border-radius: 4px;
  39.         cursor: pointer;
  40.         display: inline-block;
  41.         margin-bottom: 20px;
  42.         transition: background-color 0.3s ease;
  43.       }
  44.  
  45.       label:hover {
  46.         background-color: #1565c0;
  47.       }
  48.  
  49.       /* 音乐开始时间和结束时间代码块 */
  50.       .time {
  51.         display: flex;
  52.         justify-content: space-between;
  53.         margin-top: 10px;
  54.       }
  55.  
  56.       .time span {
  57.         color: #8c8b9c;
  58.         font-size: 14px;
  59.       }
  60.  
  61.       .option span {
  62.         font-size: 35px;
  63.         margin-right: 15px;
  64.       }
  65.  
  66.       .option span:hover {
  67.         cursor: pointer;
  68.       }
  69.     
  70.       .audio-player {
  71.         width: 100%;
  72.         margin-top: 20px;
  73.         display: none; /* 初始不显示 */
  74.       }
  75.  
  76.       .progress-bar {
  77.         position: relative;
  78.         width: 100%;
  79.         height: 10px;
  80.         background-color: #4b4b5a;
  81.         border-radius: 5px;
  82.         margin-top: 20px;
  83.       }
  84.  
  85.       .progress-bar .progress {
  86.         position: absolute;
  87.         top: 0;
  88.         left: 0;
  89.         height: 100%;
  90.         background-color: #ffffff;
  91.         border-radius: 5px;
  92.       }
  93.       
  94.     </style>
  95.   </head>
  96.   <body>
  97.     <!-- 音乐播放器界面 -->
  98.     <div class="player-container">
  99.       <div class="nav-bar">
  100.         <div id="music-name"></div> <!-- 音乐名字 -->
  101.         <div class="music-option">
  102.           <label for="file-input">选择音乐</label> <!-- 文件选择器标签 -->
  103.           <input
  104.             type="file"
  105.             id="file-input"
  106.             accept=".mp3"
  107.             style="display: none" <!-- 不显示选择器 -->
  108.           />
  109.         </div>
  110.       </div>
  111.       <div class="progress-bar">
  112.         <div class="progress"></div>
  113.       </div>
  114.       <div class="time">
  115.         <span class="current-time">00:00</span> <!-- 当前时间 -->
  116.         <span class="duration">00:00</span> <!-- 总时长 -->
  117.       </div>
  118.       <div class="option">
  119.         <span id="play-button">▶️</span> <!-- 播放按钮 -->
  120.       </div>
  121.       <audio
  122.         id="audio-player"
  123.         class="audio-player"
  124.         preload="auto" 
  125.         controls
  126.       ></audio>
  127.     </div>
  128.  
  129.     <script src="render.js"></script> <!-- 引入渲染脚本 -->
  130.   </body>
  131. </html>

3.2 创建render.js

在app目录下创建一个render.js文件。

这js文件主要是对打开mp3音乐文件操作，播放、暂停按钮的时间监听功能。

  1. // 监听页面加载完成事件
  2. window.addEventListener("DOMContentLoaded", () => {
  3.   // 获取页面上的元素
  4.   const fileInput = document.getElementById("file-input"); // 文件选择器
  5.   const playButton = document.getElementById("play-button"); // 播放按钮
  6.   const audioPlayer = document.getElementById("audio-player"); // 音频播放器
  7.   const musicName = document.getElementById("music-name"); // 音乐名字元素
  8.   const currentTimeElement = document.querySelector(".current-time"); // 当前时间元素
  9.   const durationElement = document.querySelector(".duration"); // 总时长元素
  10.   const progressElement = document.querySelector(".progress"); // 进度条元素
  11.  
  12.   var play = false; // 播放状态，默认为暂停
  13.  
  14.   // 监听选择文件事件
  15.   fileInput.addEventListener("change", (event) => {
  16.     const file = event.target.files[0];
  17.     const filePath = URL.createObjectURL(file); // 获取文件路径
  18.     const fileName = file.name.split(".")[0]; // 获取文件名（不包含扩展名）
  19.  
  20.     musicName.innerText = fileName; // 设置音乐名字
  21.     audioPlayer.src = filePath; // 设置音频播放器的源
  22.     audioPlayer.load(); // 加载音频
  23.     play = true; // 设置播放状态为播放
  24.  
  25.     // 调用预加载脚本中的方法，发送文件路径给主进程
  26.     window.api.sendSelectedFilePath(filePath);
  27.   });
  28.  
  29.   // 监听播放按钮点击事件
  30.   playButton.addEventListener("click", () => {
  31.     if (play) {
  32.       audioPlayer.play(); // 播放音乐
  33.       playButton.innerText = "⏸"; // 修改播放按钮文本为暂停符号
  34.       play = false; // 设置播放状态为暂停
  35.     } else {
  36.       audioPlayer.pause(); // 暂停音乐
  37.       playButton.innerText = "▶️"; // 修改播放按钮文本为播放符号
  38.       play = true; // 设置播放状态为播放
  39.     }
  40.   });
  41.  
  42.   // 监听音频元数据加载完成事件
  43.   audioPlayer.addEventListener("loadedmetadata", () => {
  44.     const duration = formatTime(audioPlayer.duration); // 格式化总时长
  45.     durationElement.textContent = duration; // 更新总时长元素的文本
  46.   });
  47.   
  48.   // 监听音频播放时间更新事件
  49.   audioPlayer.addEventListener("timeupdate", () => {
  50.     const currentTime = formatTime(audioPlayer.currentTime); // 格式化当前时间
  51.     currentTimeElement.textContent = currentTime; // 更新当前时间元素的文本
  52.  
  53.     const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100; // 计算进度百分比
  54.     progressElement.style.width = `${progress}%`; // 更新进度条的宽度
  55.   });
  56. });
  57.  
  58. /**
  59.  * 格式化时间函数
  60.  * @param {number} time - 时间，以秒为单位
  61.  * @returns {string} 格式化后的时间，格式为：mm:ss
  62.  */
  63. function formatTime(time) {
  64.   const minutes = Math.floor(time / 60); // 分钟数
  65.   const seconds = Math.floor(time % 60); // 秒数
  66.   return `${padZero(minutes)}:${padZero(seconds)}`; // 返回格式化后的时间字符串
  67. }
  68.  
  69. /**
  70.  * 在数字前面补零函数
  71.  * @param {number} number - 数字
  72.  * @returns {string} 补零后的字符串
  73.  */
  74. function padZero(number) {
  75.   return number.toString().padStart(2, "0"); // 将数字转换为字符串，并在前面补零
  76. }

3.3 目录结构

具体的目录结构如下:

四、运行代码

4.1 运行代码

在终端命令行中输入

npm start 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/998947
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号