minht11 / local-music-pwa Goto Github PK
View Code? Open in Web Editor NEWLightweight on device music player PWA.
Home Page: https://snaeplayer.com/
License: MIT License
Lightweight on device music player PWA.
Home Page: https://snaeplayer.com/
License: MIT License
hi, first of all I want to say big thanks to you for making such simple cool music player, its awesome.
I always wanted to make my music player pwa so I got some questions to you
isn't it possible for pwa's to save imported tracks somehow so I don't have to import them every time I open the player?
the only way to bypass importing all music by hand is to choose a fixed folder and import all tracks automatically on startup? it wont be comfortable because it takes time for importing bunch of music.
how do you read music tags? probably with music-metadata package yup? that package says its metadata parser for node.js, how is there node.js involved in pwa? I thought node server was just for dev purposes, does any server run when I launch snaeplayer?
can you edit id3 tags of music? I think would need some other package for that
Hi,
Can you provide a ZIP with all included to i add to my marketplace?
https://wappfy.com/marketplace/
Thanks.
IndexedDB can serialize and store file handles from the FileSystemAccess API. This would allow the app to prompt the user to approve access to a folder that was previously selected, instead of having to re-add the folder using the file picker.
https://web.dev/file-system-access/#storing-file-handles-or-directory-handles-in-indexeddb
npm run build
results in:
> [email protected] build C:\Users\Borewit\code\github\local-music-pwa
> rollup -c
src/main/app.ts, src/worklets/x-icon-worklet.ts → dist/...
rpt2: typescript version: 3.6.2
rpt2: tslib version: 1.9.3
rpt2: rollup version: 1.20.3
rpt2: rollup-plugin-typescript2 version: 0.20.1
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\app.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\worklets\x-icon-worklet.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\shared\x-icon-paths.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\app-shell.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\x-toast.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\info-view.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\x-menu.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\toasts\actions.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\menu\actions.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\library-view\library-view.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\player-panel\player-panel.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\shared-styles.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\index.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\utils\animation-curves.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\utils\utils.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\lib\supported.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\app\actions.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\player\actions.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\player\reducer.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\library\actions.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\grid-item.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\x-icon-button.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\x-dialog.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\x-select.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\store\library\reducer.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\track-list-item.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\library-view\library-view-styles.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\x-slider.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\player-panel\player-panel-styles.ts'
rpt2: transpiling 'C:\Users\Borewit\code\github\local-music-pwa\src\main\components\virtual-list.ts'
[!] (plugin rpt2) Error: src/main/components/virtual-list.ts:13:53 - error TS2306: File 'C:/Users/Borewit/code/github/local-music-pwa/node_modules/@types/resize-observer-bro
wser/index.d.ts' is not a module.
13 import { ResizeObserver, ResizeObserverEntry } from 'resize-observer-browser'
~~~~~~~~~~~~~~~~~~~~~~~~~
src\main\components\virtual-list.ts
Error: src/main/components/virtual-list.ts:13:53 - error TS2306: File 'C:/Users/Borewit/code/github/local-music-pwa/node_modules/@types/resize-observer-browser/index.d.ts' i
s not a module.
13 import { ResizeObserver, ResizeObserverEntry } from 'resize-observer-browser'
~~~~~~~~~~~~~~~~~~~~~~~~~
at error (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup\dist\rollup.js:9419:30)
at throwPluginError (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup\dist\rollup.js:15699:12)
at Object.error (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup\dist\rollup.js:15754:24)
at Object.error (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup\dist\rollup.js:16146:38)
at RollupContext.error (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup-plugin-typescript2\src\rollupcontext.ts:37:18)
at lodash_2 (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup-plugin-typescript2\src\print-diagnostics.ts:37:10)
at arrayEach (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup-plugin-typescript2\node_modules\lodash\lodash.js:516:11)
at forEach (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup-plugin-typescript2\node_modules\lodash\lodash.js:9344:14)
at _.each (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup-plugin-typescript2\src\print-diagnostics.ts:9:2)
at Object.transform (C:\Users\Borewit\code\github\local-music-pwa\node_modules\rollup-plugin-typescript2\src\index.ts:212:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `rollup -c`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Borewit\AppData\Roaming\npm-cache\_logs\2019-09-04T06_04_40_351Z-debug.log
npm start
will result in an error: http-server not found.
Currently, when adding new tracks to the library, each tracks file is compared to each of the already existing tracks files. isSameEntry is used for this and is the only by the browser provided method I know to do this. Sadly, this is really slow. When I compare ~3500 files to the same ~3500 files, it takes around 13 minutes.
On top of that, the added files get first parsed and only after that get compared to the existing tracks. I would say that, at the time of importing (selecting a directory) the files should be checked, so that after that only the new files get parsed.
For improving the main problem, I have an idea, but I don't know if it will work yet. I'm open to other ideas.
My plan would be, to save the path of each file, relative to the selected directory, and map that to their corresponding FileSystemHandle (or a custom object containing that somewhere). Then all the path mappings should be saved in the indexed db. Also, the directly imported directories need to be saved in the db and should have some kind of relation to the file path mappings.
After that, when importing the same folder again, we could check if that newly imported folder exists in our database and could the compare the newly generated file path mappings to the one belonging to the existing directory in the db.
When selecting a directory that is a parent of a directory in the db, we could check the difference in file path mappings from the point we get to the directory that already is in the db. This would mean that we needed to check every sub-directory when importing against our saved import directories. This should still be way more performant than the current implementation, but is not ideal.
I also don't have a good idea how to handle an import of a sub-directory of an import directory that is already in the db. We could probably store all scanned directories in the db, and compare every directory to every directory, but I think performance would get with a relatively big amount of directories pretty unperformant too.
The first step would be to implement just the path mapping from the imported folder and use my hopefully performant concept when the exact same directory is used again, and fall back to the current method if not.
I would be interested in implementing, or helping with the implementation of, this. I will try it nonetheless and will probably share a CodePen or something here, if my plan works out.
I hope everything I wrote here makes sense.
When trying to create new playlists, you have to add each song one at a time, which can be tiring for adding 100+ songs in a playlist
Is it possible to add a equalizer to this? Like something to adjust the bass and the treble.
I’m very curious about this as I’d like to play music from my Files (iOS) app.
I read the api that is utilized is revolving around Chromium based browsers. I’m experiencing in Safari on my iPhone the “import tracks” button to be unresponsive.
Am I understanding it right that this only works in Chrome/Edge?
(I have used snaeplayer.com/ for the above example)
I would like to add pictures to artists from things I have downloaded but I am unable to do this :(
Currently all tracks are saved as one giant object inside indexedDB every time one of the tracks changes, that makes easy to work with data inside the app, but performance and especially first load degrades quickly with large amount of tracks (1000+). Main cause of that is slow indexedDB.
local-music-pwa/src/stores/entities/create-entities-store.ts
Lines 298 to 300 in cf1a2f3
local-music-pwa/src/stores/persist-stores.tsx
Lines 45 to 53 in cf1a2f3
Loading data in chunks could help with first load, but then how do you sort or search incomplete data?
Even then it's still loading all of the users data from disk to the memory, despite app only showing small parts of it at any given moment.
The optimal solution and most radical one requiring full rearchitecture of the app would be to use SQL. I haven't tested this library, but it says it's way faster than raw IndexedDB when working with large amount of data and doesn't keep all of it in memory. Unfortunately there two big problems with it: listening for data changes, right now if delete the track it's deleted everywhere automatically, that wouldn't be the case anymore and more significant issue that it's 1MB minified package, as of this moment the main app bundle size is about 107kb minified, that's 10x times increase in size. With GZIP, it's 400kb vs 30kb so 13x.
Though the bonus of adopting that library would be that we can use full SQL language features so no need for manually keeping relations between track -> artist and so on. Searching and filtering would be done on separate thread also. The data loading would be as if working with fetch rest api. Since list's are virtualized data could be loaded dynamically as user scrolls.
This isn't a critical issue for now, just an exploration of how to improve things down the line.
Thus far its only possible to play music continuously using Safari.
I added Snaeplayer to my homescreen. It works like an app, however when leaving the screen or putting the iPhone to sleep the music stops playing.
From what I understand this is a limitation for web apps in iOS, but I’m reading also contradicting messages saying it’s possible to play music in the background from a web app.
Would be great if this is possible (in the future) to add the functionality while using it as an app from the home screen.
I restarted my PC and then all the sudden my playlist got converted into an album. The playlist is still there it's just empty. All my songs are in a new album and in that album there album metadata is corrupted by saying they are in a "" album.
Allow click and dragging songs in the Now Playing queue and playlists to change the order.
Show user selected directories inside setting page. Add remove, rescan directory buttons, to each entry.
This can be done once, changes mentioned in are done #8
Amazing Music Player minh11
I love everything about it.
But would you mind answering some questions?
1. How do I add pictures to the artists?
2. How do I switch to the dark theme in the picture?
3. Are you still working on that player because some links don't function (for example, the view album button)?
4. What are your plans for Snae Player in the future? (Will you add more functions to your program?)
Thank you for that player; this is top-notch for people who like to cut songs and have a bigger Music Library.
➜ local-music-pwa git:(main) npm run build
> [email protected] build
> vite build
vite v2.4.2 building for production...
transforming (292) node_modules/music-metadata/lib/common/CaseInsensitiveTagMap.jsUse of eval is strongly discouraged, as it poses security risks and may cause issues with minification
✓ 297 modules transformed.
✓ 191 modules transformed.
rendering chunks (4)...warnings when minifying css:
Invalid property name 'var(--_1bpcpo70)' at 757:2. Ignoring.
[mangle-css-class-names] file.code.replaceAll is not a function
error during build:
TypeError: file.code.replaceAll is not a function
at Object.generateBundle (/home/raphael/projects/labs/local-music-pwa/vite.config.ts:136:33)
at /home/raphael/projects/labs/local-music-pwa/node_modules/rollup/dist/shared/rollup.js:20008:25
npm ERR! code 1
npm ERR! path /home/raphael/projects/labs/local-music-pwa
npm ERR! command failed
npm ERR! command sh -c vite build
npm ERR! A complete log of this run can be found in:
npm ERR! /home/raphael/.npm/_logs/2021-09-20T22_01_44_759Z-debug.log
I've been using this for a bit over a month and its great.
I'm kinda disappointed that there's only a dark/light theme though.
I'm happy to write some custom CSS stylesheets and contribute.
Would you be happy to accept some of these?
If so, where can I see the existing CSS code?
Is it possible to add playlist support for radio streaming servers to listen online?
for example
[playlist]
File1=https://radio.bbz.ru/listen/bbz/192.mp3
Title1=BBZ RADIO - 192kbps
Length1=-1
File2=https://radio.bbz.ru/hls/bbz/live.m3u8
Title2=BBZ RADIO - HLS
Length2=-1
NumberOfEntries=2
Version=2
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.