electron+vite+vue3播放其他磁盘上的mp3音频
时间: 2023-09-02 14:15:49 浏览: 355
electron+vite+vue3+sqlite3基础框架
要播放其他磁盘上的 MP3 音频文件,你需要在 Electron 应用程序中使用 Node.js 的 fs 模块来读取该文件,然后使用 HTML5 的 Audio 对象来播放它。以下是一个使用 Vite 和 Vue 3 来实现的简单示例:
1. 安装依赖:
```
npm install --save electron
npm install --save-dev electron-builder
npm install --save-dev vite
npm install --save vue@next
npm install --save @vue/compiler-sfc
```
2. 创建 `index.html` 文件:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron Vite Vue3 MP3 Player</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/main.js"></script>
</body>
</html>
```
3. 创建 `main.js` 文件:
```javascript
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
```
4. 创建 `preload.js` 文件:
```javascript
const { ipcRenderer } = require('electron')
const fs = require('fs')
const path = require('path')
window.addEventListener('DOMContentLoaded', () => {
const audio = document.getElementById('audio')
ipcRenderer.on('play-audio', (event, filePath) => {
const file = path.join(filePath)
try {
if (fs.existsSync(file)) {
audio.src = file
audio.play()
}
} catch (err) {
console.error(err)
}
})
})
```
5. 创建 `App.vue` 文件:
```vue
<template>
<div>
<button @click="playAudio">Play Audio</button>
<audio id="audio"></audio>
</div>
</template>
<script>
import { ipcRenderer } from 'electron'
export default {
name: 'App',
methods: {
playAudio() {
ipcRenderer.send('play-audio', 'D:/music/song.mp3') // 要播放的 MP3 文件路径
}
}
}
</script>
```
6. 创建 `main.js` 文件:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
```
7. 在 package.json 文件中添加以下脚本:
```json
{
"scripts": {
"start": "vite",
"build": "vite build",
"electron": "electron .",
"package": "electron-builder"
}
}
```
现在你可以通过运行 `npm start` 来启动应用程序,或者运行 `npm run electron` 来启动 Electron 应用程序并打开窗口。当你点击 "Play Audio" 按钮时,应用程序将会尝试播放指定路径下的 MP3 文件。
阅读全文