An elegant HTML5 web folder player for parties and/or private music collections, with sharing options and playlist management that's just better
Home Page: https://codeberg.org/ltguillaume/music-folder-player
License: GNU Affero General Public License v3.0
First off, wonderful app you've built. I love every piece of it, except for my issue.
Let me just say it's easier to explain if you go take a look yourself.
\no longer needed/
When I go to play my mp3 files, the song title goes red, and skips to the next, then repeats. Not quite sure what's causing this, or even how to see the errors through the console. I've restarted the Apache2 service a few times, nothing. The directories seem right, and I don't think I edited any of the files wrongly (other than replacing the default image), however feel free to take a look yourself by going to the url:
\no longer needed/
and seeing what could be wrong. I have recently (four hours ago) installed the latest commitment, so it might just be a bug. Who knows?
Anyways, thank you for all your hard work, and please keep it up!
- Lunar, Owner of ForSaken Borders
Hi, I wonder if you can do something to get the music album art directly from the mp3 tags ? I know theres existing librairies in JS and php to do that and that'll be much easier than to extract all music's album art.. I hope you can do that ! And by the way I really love your player 👍
I've dabbled a bit with creating a Docker solution for MFP, which can be found here: https://github.com/ltGuillaume/MusicFolderPlayer/tree/docker
This is pretty much the first time with Docker for me, and I only tried it locally, so I'm gonna need your feedback.
I usually develop using Google Chrome.
My httpS Dark Theme Version works fine using Windows versions of Chrome and SeaMonkey but HANGS at the splash screen in the latest Windows Firefox.
The http Dark Theme Version works okay in Firefox.
Running local, Instead of putting musics in library folder under xampp, I want to direct it to load my other music folder.
Can we have this feature?
ps: LOVE THIS WORK!!! was searching for sth like this almost a month and finally found this. so it wont take bandwidth, and i can use chromecast to cast on my google home when im playing game xDD
Does anyone have any idea what could cause the effect shown in the video below? I am sure I must have done something wrong, but have been trying to fix this for 5 hours and am getting no closer.
Hello.
I get white page and error in Chrome Console:
music.js:106 Uncaught TypeError: pathexp.replace is not a function
at HTMLScriptElement.lib.onload (music.js:106:21)
lib.onload @ music.js:106
Объект load (асинхронный)
init @ music.js:104
onload @ (индекс):13
Hello! Recently, I'm developing an app that's basically just a really big iframe to your music player, and when the users leave the app, all they get to control from the notification bar is just pause/play. I was wondering what and where I could implement media session controller (see here for what I mean). I currently have something along the lines of
navigator.mediaSession.setActionHandler('playpause()', function() {}); navigator.mediaSession.setActionHandler('playpause()', function() {}); navigator.mediaSession.setActionHandler('previous()', function() {}); navigator.mediaSession.setActionHandler('nextBtn()', function() {});
but I know that's just plain wrong. Any ideas?
When songs end it play random song from another folder, but no check for Random play
This is a great player which works really well, Thank you!
A couple of ideas that I think will make it even better.
As well as using this player on my mobile devices, I've found it works really well on my Smart TV (Panasonic) hooked up to a decent sound system.
Unfortunately it is very awkward to navigate the TV's browser mouse using the TV IR remote arrow keys. I've discovered that the remote number keys are passed through to the browser, so '0' key does pause the player. Can the other number keys (1-9) be mapped to make the player so that play lists can be selected and started?
Also could a number key be mapped to dim the screen so it acts as a 'screen saver'? I have attempted this using a dark (90% translucent) overlay toggle function mapped to key '1', and it does work except some of the margins don't get overlayed fully.
Many thanks, keep up the good work!
I can't seem to get drag 'n drop working in Firefox mobile. If anyone could help me out with this, I'd be very grateful.
Is it a coding question?When the song is a Chinese file name sharing "Copy Song Link Clipboard" without feedback.
I think this is exactly what I want.
I'm having trouble understanding the password. I don't know how to set it and I'd rather not have it. I just want anyone to be able to play Creative Commons Jazz on the internet.
Any time I try to play a file I get X File not found error. Do I still need a $root variable in music.php or is it picking the path up from the config files?
I'm not sure I even need playlists. Just browsing folders (albums) and playing folders (albums).
Is there a better forum for newbie questions like this?
Thanks
this script is exactly what I was looking for: very simple (almost no install), no database, supports folders... thanks for the good work !
Here are some ideas to improve it:
Hi i tried to configure music.ini and place path to music folder, but player only show folders and can't play music.
Using macOS. And also if make alias can't recognise path
I don't understand how the image is displayed.
Is there only one image per folder (say, per album), or does each song have its own image? If so, how is it discovered? With the same name as the mp3 file?
cheers, thanks for nice player
Hello. Would it be possible to save online playlist position on the server?
It would be great to have the option to continue playlist on different device (or browser).
Thanks.
I am in the process of adding my music folders into /MusicFolderPlayer/library
I have gotten to a point, where one of my folders of music is causing an error
ReferenceError: root is not defined music.js:547:3
fillShare http://www.mydomain/MusicFolderPlayer/music.js:547
buildPlaylist http://www.mydomain/MusicFolderPlayer/music.js:435
onload http://www.mydomain/MusicFolderPlayer/music.js:159
I am guessing this is a problem with my mp3 files, or permissions of those mp3s? Any guidance on how I can determine what is throwing the error?
This is on a shared webhost, I have another copy of MFP running on XAMPP on Windows, using the same music folder structure, and it works fine, with 193,000 mp3s My website version has only 19,500 ..
I've isolated the folder in question to an mp3 .. but the naming is just like the rest .. Would love to chat about where this problem is coming from -- I know its on my end somewhere
Thanks
Chuck
2020/08/07
The issue: mobile browsers tend to stop playback in the following cases:
The problem is that JavaScript execution is prevented under those conditions under the guise of saving battery life.
Firefox for Android seems to be less likely to stop playback (I can play music for hours on my S5 with LineageOS, while trying this on Bromite will stop playback after a single song).
There seem to be some hacks available, such as constantly playing a (fake-ish) video in the background, but they're messy. If there's a proper solution, I'd love to be pointed towards it.
@sbncbot @OoLunar @Invictaz @xRadio-us
I found that for some people on mobile devices playback tends to stop a while after the screen is turned off. I'm not sure whether the cause is due to resource management of the device itself, or a crappy network connection (or whether these are two separate issues). The playback tends to stop in between songs, so it could be caused by JavaScript not being run when the screen is off.
So, playback of the next song stops when:
My questions to you:
Some links to information on a possibly related issue:
https://stackoverflow.com/questions/22061280/javascript-halts-in-inactive-android-chrome-tab
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
https://stackoverflow.com/questions/15959244/is-it-possible-in-javascript-to-detect-when-the-screen-is-turned-off-in-the-an
White is quite hard on the eyes, is there an option to have black background with white text?
I noticed that if there is a % in the folder name or file name then the audio file does not play. When the file is played, the http get request includes % rather than the url encode %25 and the server can't find the file.
In playlist box length seam to long can you fix like in folders box length or some another way not to wrap text maybe some sliding text on mobile on both playlist and folder?
How you think?
Is there an option to disable album art cover if not found?
Hi
How can I disable randomize the play ?
With disabled random button still player choose a random music in entire folder and play it
This is unexpected
Browser : Chrome Firefox Vivaldi (No matter)
Thanks in advance
In your screenshot example, ID3 tags and/or track titles and artist names are shown.
How to enable this?
It now only reads filename (without extension)
When use shortcut key C to change color, Log Debug didn't show information change color anything after focusblue
Please fix that issue
Thanks ^^
Hi ItGuillaume,
Great tool. I had two ideas addressing my personal preferences. But maybe it's general enough or at least meets your interest.
May you be able to implement an optionally to activte search-as-you-type. Search seems fast enough for a reasonable user experience.
Could you add an option to deactivate the extra user interaction needed to add the whole folder to playlist by right/long click in folder view?
Thx
Make a config file of whether a person can enable or disable icons? Some people are complaining of how it's "annoying". They're picky, so don't take it personally.
Hi,
First thank you very much for this project. I was wondering if it could be easily possible to get ID3 infos (Artist and song name mainly) and display them in the top player when playing a track ? Some downloads (like on slsk) are not composed of the Artist name in the file name and sometimes neither on the folder so we don't know which artist the track is from.
Some songs appear too loud. There is no volume slider to control this, other than the one from your device.
Is there an option to auto-play when the page music.htm is opened?
I installed it and configured it to my Music Library but all it does it skip the song and go to the next one then skipping that one.
Right now I'm running Xampp on Windows 10 64 Bit
My modified dark theme MFP https://1-dot.com/audio/player seems to work well with Windows browsers. However, on my Android TV box, Microsoft's Edge browser produces no sound. (BTW, the Windows Edge Chromium Beta works well,)
A more significant problem is that my MFP does a blue-screen freeze when started from a "Webview"-based browser such Lightning, Hermit, the default Android browser and many others.
I wanted to stop running my MFP when this happens to explain the problem to the browser user. In JavaScript, Webview should be detected by searching for ";wv" in variable navigator.userAgent. However, this did not work. A quick Google search indicated that I instead had to detect this on the SERVER SIDE using PHP.
So, I tried to insert detection code into my audio.php file. The detection worked but I still got the blue-screen freeze with Webview-based browsers. To get around this problem (successfully), I renamed by index.html to index.php and then inserted the following PHP code at the top.
<?php $wv = $_SERVER["HTTP_X_REQUESTED_WITH"];
if(strlen($wv) > 0) {
echo "<H2>[ ",$wv," ] - incompatible Android 'Webview' browser.</H2>";
echo "<H3>For Android, we recommend Brave, Chrome, or Firefox.<br><br>";
echo "[ <a href='/'>Return to 1-dot.com homepage</a> ]</H3>\r\n\n";
exit();
}
?>
the indicator for shuffle is either a dice, i would assume this means random, but i would also assume a check mark next to shuffle would mean random
the same can be said of Enqueue (yes, i copy/pasted that word)
install procedure states that you must copy music.ini.template to music.ini and then configure music.ini
If you do so, and then delete "music.ini.template", website is not working anymore.
template fil should be deleted without error, as it's only.. a template !
Hello.
I have a problem with playing my wav files in player with nginx 1.22.1
Use example from wiki. OS Debian 11.
music.js:859 Uncaught TypeError: Cannot read properties of undefined (reading '1')
at load (music.js:859:15)
at play (music.js:879:2)
at clickItem (music.js:570:9)
at HTMLUListElement.onclick (index.htm:101:68)
Hey!
I was wondering if there is any way to have different categories for the filter, acting a little bit more like a Database.
If the files have the details like BPM, date of release, Key and more... They can be displayed, allowing just to click on the category to sort tracks.
Will be very handy :)
Hello
After a fresh install, I only get a blank (black) screen. using F12, I see this error message:
Uncaught ReferenceError: s_nopathexp is not defined
at HTMLScriptElement.lib.onload (music.js:99)
re: Dark Audio Player Readme + Example
Like many developers, I do my coding and testing most often at night. While your Music Folder Player project is useful, the default theme is unusable for Night Owls. I also have little use for "party" features like Random Play and Crossfade.
I might suggest that you host a second Night Owl or Developers Version. You can use my code modifications as base code. My Dark Theme Version has disabled Crossfade and Random Play. I added a Mode button toggle to choose between continuous and single play.
For any second version, I hope that you will add some sort of display of audio file type and an option for horizontal display of file links.
first of all, thank you thank you thank you. i've been searching for years for something like that, first time since i've seen https://www.musicforprogramming.net/ player (it's a bit different, but nevertheless the simple text interface, and the plain folder structure...)
however, i was wondering as i do have a quite extensive collection, in a three-tier folder (alphabet/band name/album) currently at about 23.000 songs, it is a bit cumbersome that every single page reload triggers a rebuild of that folder structure.
maybe there is a simple configurable caching possibility (even in memory, nothing fancy. something like apc?) that could expire after a configurable time (i.e. default after 24 hours) and a button in the player that forces rebuild (if one adds songs and doesn't want to restart the php process...)
this way, a random / accidental reload or a switch between devices, or showing a friend something on a site quickly is a bit less laggy.
i'd love to help out but my php knowledge is super limited.
If "sharing = false" -----> music.ini
That config affected to "Playlist Option"
Playlist Menu (Playlist Option) disappeared
When Click "Playlist" option did not show up anything
Please fix that issue
Thanks a lot ^^
Hello, its very good player i love it but i have found some bugs
download one song its download all folder
when donload folder its download music.js file
and on refresh page shows this on safari
For music files, many with long names, vertical display of filenames is okay. However, for the short audio filenames that I tend to use for development, it is very inconvenient. A horizontal filename display option would show many more files in a much smaller space allowing for quicker direct click access without a lot of unnecessary scrolling.
Let me start by saying I love MusicFolderPlayer -- The only issue I am experiencing is when someone is trying to search from an iPhone, they are able to only type the first letter on their phone, and then the search stops working -- I have not seen this issue on Android -- I have had users try both safari and chrome -- Any thoughts or suggestions?
Most people do not need to see whether the music file is MP3, OGG or WAV. However, that is important to me. I am currently evaluating and comparing audio pronunciation clips in several formats to add to a test web site Time-Place-Pronounce that I am developing.
Since your music.php results show the file extension, I assume that this can be modified somewhere in your music.js file. Maybe you can point to where I can make code changes.
If you add this feature, one could either display the extension type or colorize the filename depending on the audio file type.
Hi,
I'm stuck with a dark screen and the icon in the middle of the page with chrome and firefox. I may clic anywhere, nothing happens.
But with my android device, the player appears when I touch the middle icon. But the player seems to not find my songs.
I've checked the permissions in my server, I've modified it, useless.
I've checked the file music.php and $root is link to library directory, which directory I've created in the root folder and where I've put my songs.
I've also checked the songs files names to make them without space or anything else strange.
So I'm stucked! Did I forget something? Thanks for your help.
Mathieu
https://github.com/ltGuillaume/MusicFolderPlayer/blob/master/music.js#L322
audio.src = path;//encodeURIComponent(path);
How to add multiple source paths to music folder?
Currently, I just run to 1 path. Don't know how to add more.
Does not work in IE11, however the other HTML5 based player does work. I don't get why.
https://github.com/GM-Script-Writer-62850/HTML5-Music-Player
Seems this function doesn't work on chrome.
I'm not sure what it is supposed to do:
Either way, it does not work for me.
Another questions : how can I activate randomize and crossfade playlist functions by default ? And load a default playlist ? By default I mean for every new users.
Thank you for this great player
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.