electron-vue-music
基于 electron-vue 开发的音乐播放器,界面模仿QQ音乐,技术栈electron-vue+vue+vuex+vue-router+element- UI。欢迎star
Top Related Projects
高颜值的第三方网易云播放器,支持 Windows / macOS / Linux :electron:
网易云音乐 Node.js API service
一个基于 electron 的音乐软件
音乐搜索器 - 多站合一音乐搜索解决方案
🌈谷粒-Chrome插件英雄榜, 为优秀的Chrome插件写一本中文说明书, 让Chrome插件英雄们造福人类~ ChromePluginHeroes, Write a Chinese manual for the excellent Chrome plugin, let the Chrome plugin heroes benefit the human~ 公众号「0加1」同步更新
Wiki.js | A modern and powerful wiki app built on Node.js
Quick Overview
Electron-vue-music is a desktop music player application built using Electron and Vue.js. It aims to provide a cross-platform, modern music listening experience with a sleek user interface and integration with popular music streaming services.
Pros
- Cross-platform compatibility (Windows, macOS, Linux)
- Modern and responsive user interface built with Vue.js
- Integration with multiple music streaming services
- Customizable themes and layouts
Cons
- Limited documentation and community support
- Potential performance issues on lower-end hardware
- Dependency on third-party APIs for music streaming services
- May lack some advanced features found in more established music players
Getting Started
To get started with electron-vue-music, follow these steps:
-
Clone the repository:
git clone https://github.com/SmallRuralDog/electron-vue-music.git
-
Install dependencies:
cd electron-vue-music npm install
-
Run the development server:
npm run dev
-
Build the application for your platform:
npm run build
The built application will be available in the dist
folder.
Competitor Comparisons
高颜值的第三方网易云播放器,支持 Windows / macOS / Linux :electron:
Pros of YesPlayMusic
- More active development with frequent updates and bug fixes
- Cleaner and more modern user interface design
- Better cross-platform support, including web and mobile versions
Cons of YesPlayMusic
- Larger codebase, potentially more complex to maintain
- Heavier resource usage due to additional features and animations
- Steeper learning curve for contributors due to more advanced technologies used
Code Comparison
YesPlayMusic uses Vue 3 with Composition API:
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
return { count, doubleCount };
}
};
electron-vue-music uses Vue 2 with Options API:
export default {
data() {
return {
count: 0
};
},
computed: {
doubleCount() {
return this.count * 2;
}
}
};
YesPlayMusic leverages more modern Vue features, while electron-vue-music uses a more traditional approach. This difference in Vue versions and API styles can impact development experience and performance.
网易云音乐 Node.js API service
Pros of NeteaseCloudMusicApi
- More comprehensive API coverage for NetEase Cloud Music
- Higher star count and more active community support
- Regularly updated with new features and bug fixes
Cons of NeteaseCloudMusicApi
- Lacks a user interface, requiring additional frontend development
- Focused solely on API functionality, not providing a complete music player solution
- May require more setup and integration work for a full application
Code Comparison
electron-vue-music:
import { app, BrowserWindow } from 'electron'
import '../renderer/store'
let mainWindow
function createWindow() {
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000
})
// ... more code
}
NeteaseCloudMusicApi:
const express = require('express')
const apicache = require('apicache')
const path = require('path')
const fs = require('fs')
const app = express()
// ... more code
The electron-vue-music project focuses on creating an Electron-based desktop application with Vue.js, while NeteaseCloudMusicApi is a server-side Express.js application providing API endpoints. The code snippets highlight these fundamental differences in their architecture and purpose.
一个基于 electron 的音乐软件
Pros of lx-music-desktop
- More active development with frequent updates and bug fixes
- Larger community and user base, resulting in more feedback and contributions
- Supports multiple music sources and platforms
Cons of lx-music-desktop
- More complex codebase due to additional features
- Potentially higher resource usage due to broader functionality
- Steeper learning curve for new contributors
Code Comparison
electron-vue-music:
import { app, BrowserWindow } from 'electron'
import '../renderer/store'
let mainWindow
lx-music-desktop:
const { app, BrowserWindow, shell } = require('electron')
const { join } = require('path')
const { initSetting, getSetting } = require('./utils/setting')
The code comparison shows that lx-music-desktop uses CommonJS modules, while electron-vue-music uses ES6 imports. lx-music-desktop also includes additional imports for file system operations and custom utility functions, indicating a more complex structure.
Both projects utilize Electron for creating desktop applications, but lx-music-desktop appears to have a more comprehensive setup with additional utilities and configurations. This aligns with its broader feature set and more active development.
音乐搜索器 - 多站合一音乐搜索解决方案
Pros of music
- Lightweight and simple web-based implementation
- Supports multiple music sources (QQ, Netease, Xiami, etc.)
- Easy to deploy and use without installation
Cons of music
- Limited features compared to a full desktop application
- May have potential issues with API stability due to reliance on third-party sources
- Less polished user interface
Code comparison
music:
$music_api = [
'qq' => 'https://c.y.qq.com',
'kugou' => 'http://m.kugou.com',
'kuwo' => 'http://kuwo.cn',
'xiami' => 'http://www.xiami.com',
'baidu' => 'http://music.baidu.com',
'netease' => 'http://music.163.com'
];
electron-vue-music:
const apiConfig = {
baseURL: 'https://netease-cloud-music-api-rust-delta.vercel.app',
timeout: 5000
}
export const request = axios.create(apiConfig)
Summary
music is a web-based solution that offers multi-source support and easy deployment, while electron-vue-music is a more feature-rich desktop application built with Electron and Vue.js. The code comparison shows that music uses a PHP array to define multiple API endpoints, whereas electron-vue-music uses a single API endpoint with Axios for requests. Choose music for simplicity and web accessibility, or electron-vue-music for a more robust desktop experience.
🌈谷粒-Chrome插件英雄榜, 为优秀的Chrome插件写一本中文说明书, 让Chrome插件英雄们造福人类~ ChromePluginHeroes, Write a Chinese manual for the excellent Chrome plugin, let the Chrome plugin heroes benefit the human~ 公众号「0加1」同步更新
Pros of ChromeAppHeroes
- Extensive collection of Chrome extension recommendations and guides
- Regular updates with new content and extensions
- Multilingual support (Chinese and English)
Cons of ChromeAppHeroes
- Not a functional application, primarily a documentation repository
- Limited code examples or implementation details
- Focused solely on Chrome extensions, lacking cross-platform support
Code Comparison
ChromeAppHeroes is primarily a documentation repository, so there isn't much code to compare. However, here's a small example of how the content is structured in ChromeAppHeroes:
# 062《彩云小译》一键实现网页中英文对照的翻译工具
...
In contrast, electron-vue-music is a functional application with Vue.js and Electron code:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Summary
ChromeAppHeroes is a comprehensive guide for Chrome extensions, offering valuable insights and recommendations. It's regularly updated and supports multiple languages. However, it lacks the functionality of a standalone application like electron-vue-music, which is a full-fledged Electron-based music player. ChromeAppHeroes is more suitable for users looking to enhance their Chrome browsing experience, while electron-vue-music caters to those seeking a desktop music application.
Wiki.js | A modern and powerful wiki app built on Node.js
Pros of Wiki
- More comprehensive and feature-rich, designed for collaborative knowledge management
- Active development with frequent updates and a larger community
- Supports multiple authentication methods and has extensive documentation
Cons of Wiki
- More complex setup and configuration compared to the simpler music player
- Requires a server to run, unlike the desktop-based Electron app
- May have a steeper learning curve for users and administrators
Code Comparison
Wiki (Node.js):
const Wiki = require('wiki.js')
const wiki = new Wiki({
port: 3000,
dataPath: './data'
})
wiki.start()
electron-vue-music (Vue.js):
<template>
<div id="app">
<audio-player :src="currentTrack" />
<playlist :tracks="playlist" />
</div>
</template>
Summary
Wiki is a robust knowledge management system with extensive features, while electron-vue-music is a simpler, desktop-based music player. Wiki offers more collaboration tools and scalability but requires more setup and resources. electron-vue-music provides a straightforward music playback experience with a potentially easier setup for individual users. The choice between them depends on the specific needs of the project: knowledge management vs. music playback.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
å½å项ç®å·²åæ¢æ´æ°ï¼åºäºVUE3+TSççæ¬å·²å¼æºï¼é¡¹ç®å°å
>>>VUE3-MUSIC<<<
é³ä¹ææ¾å¨
ä¸ä¸ªåºäº electron-vue å¼åçé³ä¹ææ¾å¨
è¿è¡
git clone https://github.com/SmallRuralDog/electron-vue-music.git
cd electron-vue-music
yarn
yarn dev
注æ æ£å¼æå éè¦æå¾æ æ ·å¼ä¸è½½å°æ¬å°ï¼å¦åæ£å¼çå¾æ ä¸æ¾ç¤º
ç½æäºé³ä¹ API
å·²ç»éæå° electron
使ç¨ææ¡£
UI
æ¯æ
å¦æä½ è§å¾ electron-vue-music èçäºä½ çå¼åæ¶é´ï¼è®©ä½ å°å çï¼è®©ä½ è½æ´æ©çå家éªå¥³åæè
æ游æï¼è½è®©ä½ æ´å¿«éçæ£å°é±ï¼é£ä¹è¯·æ¯ææï¼è®©æè½ç»§ç»çå° electron-vue-music å好ï¼åä¸å»ï¼
Top Related Projects
高颜值的第三方网易云播放器,支持 Windows / macOS / Linux :electron:
网易云音乐 Node.js API service
一个基于 electron 的音乐软件
音乐搜索器 - 多站合一音乐搜索解决方案
🌈谷粒-Chrome插件英雄榜, 为优秀的Chrome插件写一本中文说明书, 让Chrome插件英雄们造福人类~ ChromePluginHeroes, Write a Chinese manual for the excellent Chrome plugin, let the Chrome plugin heroes benefit the human~ 公众号「0加1」同步更新
Wiki.js | A modern and powerful wiki app built on Node.js
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot