Hi folks,
this yet another attempt to implement web interface component for foobar2000.
Features:- Lightweight web user interface
- Playback control
- Playlist management
- Music directory browser
- Real-time UI updates
- Mobile-friendly responsive design
- REST-like API for controlling player from your application
Screenshots:Main web interface
(https://user-images.githubusercontent.com/19171756/44335572-93108200-a47d-11e8-9ab4-7e51771353cf.png)
Configuration screen
(https://user-images.githubusercontent.com/19171756/44335583-9c015380-a47d-11e8-9934-639503538f8e.png)
System requirements:- foobar2000 1.3 or later
- Windows 7 or later
Browser requirements:- Any recent browser should work
- Due to high development effort required Internet Explorer of any version is not supported
Links: download (https://foobar2000.org/components/view/foo_beefweb), github (https://github.com/hyperblast/beefweb)
Let me know what you think.
Excellent component! This has been particularly useful for me as I tend to do the majority of my work on a different computer to the one on which my music is stored. It was getting tedious having to switch between computers to change songs or adjust the volume.
Although I have only been using this component for a few days, I have a couple of suggestions for improvements that could be made (if they're possible).
- Synchronise the volume bar in the web interface with the one in the client
- Implement something like the 'cursor follows playback' option so that when the song changes, the web interface displays the relevant section of the playlist
In any case, great work!
Hi, thanks for feedback.
Synchronise the volume bar in the web interface with the one in the client
I'll check this, it should be working already
Implement something like the 'cursor follows playback' option so that when the song changes, the web interface displays the relevant section of the playlist
I've already implemented "locate current track" button in the development version, I think "cursor follows playback" is only half-step ahead now.
I'll add both issues on github.
I've uploaded new version.
Changes in v0.3:- Added button that locates currently played track
- Fixed volume and mute state not being synchronized
- Added "Cursor follows playback" option
- Implemented proper escaping for array query string parameters
- Added playlist sort operations
- Added "Play next/previous artist/album" operations
Have fun!
This is exactly what I needed! Thanks for developing this!
A few remarks:
The volume slider isn't entirely visible on my phone: it goes off-screen to the right.
The playback order menu is called the "audio menu", it's confusing.
Could there be a list of playlists in a menu? The horizontal tab list is often too narrow and scrolling through it is not optimal.
In "touch mode" I still have to double tap a track to play it. Maybe this has another purpose?
Hello, thank you for your feedback. I really appreciate that.
The volume slider isn't entirely visible on my phone: it goes off-screen to the right.
It should be collapsible to a single button that reveals volume control on narrow screens.
For very small resolution screens even that is not enought, I'll have to switch to small font size in settings.
What is horizontal resolution of your phone? I'll check this. Maybe there is some issue with horizontal size breakpoints.
The playback order menu is called the "audio menu", it's confusing.
Sure, would rename.
Could there be a list of playlists in a menu? The horizontal tab list is often too narrow and scrolling through it is not optimal.
Such issue exist on my list. I will implement this eventually.
In "touch mode" I still have to double tap a track to play it.
Double tap is intentional to prevent accidental playlist item activation when scrolling large playlists.
I think single-tap activation is possible as option.
Maybe this has another purpose?
Currently it affects how playlist tabs work: in mouse mode they are draggable from any point, in touch mode there is a dedicated drag handle to prevent accidental dragging when scrolling.
The volume slider isn't entirely visible on my phone: it goes off-screen to the right.
It should be collapsible to a single button that reveals volume control on narrow screens.
Yes I'm talking about that one. It pops up halfway off-screen when I click the volume button. My phone's screen is 768 px wide. :)
Also I just noticed that the slider in the web interface is way more sensitive than the one on foobar's UI. When the web slider is at 50% the UI slider is at 20% or so. Probably a different scale is used.
Another suggestion: since single tap selects a track, show relevant contextual actions in the hamburger menu (such as send track to playlist, add to playback queue etc...)
The total play time at the bottom always shows 00:00:00.
Yes I'm talking about that one. It pops up halfway off-screen when I click the volume button. My phone's screen is 768 px wide. :)
Are you sure you are not confusing vertical and horizontal resolutions?
768px is a plenty of space.
338px and wider should look okay with small font size.
Narrower screens cause buttons row to wrap.
I can adjust markup to align buttons in two rows for such screens, but I doubt such old phones would support modern browsers anyway :)
Also I just noticed that the slider in the web interface is way more sensitive than the one on foobar's UI. When the web slider is at 50% the UI slider is at 20% or so. Probably a different scale is used.
SDK provides range from -100 to 0 dB, web UI currently just represents this, probably standard UI uses logarithmical scale on top of it. I'll investigate this.
Another suggestion: since single tap selects a track, show relevant contextual actions in the hamburger menu (such as send track to playlist, add to playback queue etc...)
Probably yes, I want to make proper playlist manipulation first, selection and especially multi-selection is somewhat non-existent in web interfaces and this has to be implemented manually.
Yes I'm talking about that one. It pops up halfway off-screen when I click the volume button. My phone's screen is 768 px wide. :)
Are you sure you are not confusing vertical and horizontal resolutions?
768px is a plenty of space.
338px and wider should look okay with small font size.
Narrower screens cause buttons row to wrap.
I can adjust markup to align buttons in two rows for such screens, but I doubt such old phones would support modern browsers anyway :)
Definitely 768px (it's a Nexus 4), I'll post a screenshot as soon as it's charged and I can get it to boot again.
Definitely 768px (it's a Nexus 4), I'll post a screenshot as soon as it's charged and I can get it to boot again.
I think it's 384x640 from web standpoint (at least this resolution is used by chrome dev tools).
If you change font size to small in settings it should be enought still.
Here is a screenshot. ;)
I think a smaller text would be too small.
(https://reho.st/preview/self/57903b9f9b5660e63aa502014cdbb0bd555a3f0b.png) (https://reho.st/view/self/57903b9f9b5660e63aa502014cdbb0bd555a3f0b.png)
Here is a screenshot. ;)
Yeah, that's an expected behavior for now. I'll see what I can do.
I can't add music derictories. This simply doesn't work. It always reset to С:\ instead of C:\Music for example and I CAN'T access folders from remote control, the C:\ derictory is shown but it doesn't allow me to open it.
upd
i found the problem, it doesn't support folder names in different languages, in russian for example! i renamed it and it works now! nice plugin anyway
I can't add music derictories. This simply doesn't work. It always reset to С:\ instead of C:\Music for example and I CAN'T access folders from remote control, the C:\ derictory is shown but it doesn't allow me to open it.
I need more info on this, e.g. OS version/bitness, foobar2000 version.
Also please check if there are any errors in foobar2000 log or browser log.
i updated my message ;)
Should be working still, everything is UTF-8 internally, I'll check it.
Should be working still, everything is UTF-8 internally, I'll check it.
Doesn't work in fact. Ok! I would appreciate it.
Doesn't work in fact. Ok! I would appreciate it.
Okay, I've managed to reproduce this, seems to affect music directory roots only, not some paths under.
Would fix this.
Thank you. And a small interface problem - random folder icons disappear when exploring, and restored after page refresh.
Would fix this.
Fixed, would be available in the next release.
Thank you. And a small interface problem - random folder icons disappear when exploring, and restored after page refresh.
What browser do you use? There are some issues with chrome refetching icons too frequently I did not manage to find a fix for this yet.
I tried on Opera at first, and then on Chrome, the same result
I tried on Opera at first, and then on Chrome, the same result
I can reproduce your issue. It seems to be pretty similar to this bug (https://stackoverflow.com/questions/35049842/svgs-in-chrome-sometimes-dont-render). This is reported to be fixed already, but I still can reproduce it on chrome 69. It has something to do with caching, currently all static content is set to refresh immediately, I'll try different options and see if this helps.
Update: switched to caching for 3 seconds, seems fine now. Would be available in the next release
Thank you!
Probably a stupid question but here goes: Does this control music playback on the host machine or does the music play out of the machine accessing the web interface?
Probably a stupid question but here goes: Does this control music playback on the host machine or does the music play out of the machine accessing the web interface?
Music is played on the machine where foobar2000 is installed, web interface allows you to control this player from other machines.
Actually your question isn't that stupid, I thought about supporting local playback, e.g. stream music from foobar2000 to your browser, but currently I have no plans to implement this until all remote control features are fully implemented.
I have a 'stupid question' too. Just to set the scenario - I store my music on a dedicated lap top which is situated in my Hi Fi cabinet, and play it using Foobar. I would like to be able to control Foobar from a tablet (iOS or /Android) remotely so that I do not have to use the lap top mouse pad to change playlist etc. I understand that the music is played from the device that has foobar installed, but do I have to install Foobar on the tablet as well as I presume the Beefweb plugin is installed on the tablet not the lap top (or is it?). Sorry if I have missed the point but I am new to this - (not bad at analogue though!) Grateful for any help - is there a 'for dummies' set-up guide out there?
I understand that the music is played from the device that has foobar installed, but do I have to install Foobar on the tablet as well as I presume the Beefweb plugin is installed on the tablet not the lap top (or is it?).
Actually, it's the opposite. You need to install this component on desktop foobar2000 which actually plays music.
The component has embeded web server that provides clients with web interface for controlling player. On your tablet/phone you only need a web browser.
To access the web UI you need to find out IP address of your laptop, better if it would be a static one,so it does not change over the time,
then just open URL http://X.X.X.X:8880 from your tablet, where X.X.X.X is your IP address, typically something like 192.168.X.X.
See this random guide (https://www.digitalcitizen.life/find-ip-address-windows) found over the internet for information how to find out IP address.
Also make sure that firewall if any is not blocking incoming connections for foobar2000.
Sorry if I have missed the point but I am new to this - (not bad at analogue though!) Grateful for any help - is there a 'for dummies' set-up guide out there?
Unfortunately there is no such guide yet, I'll make some eventually.
Thank you - that is somewhat clearer - I will now have a go at installing it.
thanks
Mitch
Hey, quick question.
You support adding music files over a URL but in my weird case it doesn't work. I try to add a youtube URL, when I have the foobar Youtube component installed (foo_youtube).
Any chance you can take a look at it or tell me where to check in the source code?
You support adding music files over a URL but in my weird case it doesn't work. I try to add a youtube URL, when I have the foobar Youtube component installed (foo_youtube).
This depends on how foo_youtube and foobar2000 core interpret the URLs. Probably foo_youtube has it's own URL scheme (e.g. not https://) and its custom UI produces playlist items with that scheme, so foobar2000 core could interpret them correctly.
Adding plain https:// URL likely would be interpreted as a regular HTTP stream source.
Any chance you can take a look at it or tell me where to check in the source code?
I'll take a look at this, probably it could be done on either client or server side, I'm not sure which is better :)
This is pretty great! Issues I've noticed:
1) Volume slider should be logarithmic and not linear. -10dB halves the volume but is still like 90% of your slider. Very difficult to just slightly lower the volume.
2) Music Directories doesn't seem to do anything. That view is always empty for me.
Requests:
1) Search! Let me search my library arbitrarily and send the results to some "Query" playlist or something like that.
2) I'd like to be able to specify columns and even add my own, or modify existing columns to add more data. For example I'd like to add disc numbers to tracknumber column and add a playcount column.
Thanks for your work on this!
Hi, thanks for the feedback.
1) Volume slider should be logarithmic and not linear. -10dB halves the volume but is still like 90% of your slider. Very difficult to just slightly lower the volume.
This is already reported, I've figured out correct formula from sources of foo_ui_columns. Would fix in the next release.
2) Music Directories doesn't seem to do anything. That view is always empty for me.
This needs to be configured manually from foobar2000 preferences screen. Unfortunately I have no idea how to get media library directories via foobar2000 APIs, would love to include them automatically.
1) Search! Let me search my library arbitrarily and send the results to some "Query" playlist or something like that.
This is a large task, but I'm keeping it in mind for future features.
2) I'd like to be able to specify columns and even add my own, or modify existing columns to add more data. For example I'd like to add disc numbers to tracknumber column and add a playcount column.
Would be available in the next release, I'm already working on this.
Thanks for your work on this!
Thank you ;)
i see there is no update still(
i see there is no update still(
I do this project in my spare time, so there is no estimation on the next release.
You can try development build (https://hyperblast.org/beefweb/builds/) if you like.
It has the very recent features and bugfixes, but it might include some broken stuff as well :)
Ok :)) Will be waiting
Hello and thanks for this easy piece of software! Worked out of the box here in f2k141 for me. Not much of hasseling with configuration to get it work, I remember some older components with the same approach, that took me hours to configure and get it working (and their webinterface didn't even looked that good). So thank you!
If have read this thread and have a question:
I'm using foo_preview (http://skipyrich.com/w/index.php/Foobar2000:Preview) and would like to be able to switch it ON or OFF, if possible.
On my local f2k installation, I have a keyboard-shortcut and a button and a menu entry, but it would be very great to have an extra button in the webinterface too.
Do you know, if its possible to trigger the component (or any other with predefined options/parameters) from your fine component?
(Just a simple button to turn the preview ON or OFF)
Thanks.
Furthermore, I'd like to quote the good ideas from others here, just to show how good these are and I like them too :-)
Requests:
1) Search! Let me search my library arbitrarily and send the results to some "Query" playlist or something like that.
2) I'd like to be able to specify columns and even add my own, or modify existing columns to add more data. For example I'd like to add disc numbers to tracknumber column and add a playcount column.
Both requests are mine too.
Probably a stupid question but here goes: Does this control music playback on the host machine or does the music play out of the machine accessing the web interface?
Yeah, streaming music from a remote f2k to the local browser would be awesome.
Could there be a list of playlists in a menu? The horizontal tab list is often too narrow and scrolling through it is not optimal.
I have to scroll endlessly, because I have >40 playlists sometime, so a vertical list could help.
Do you know, if its possible to trigger the component (or any other with predefined options/parameters) from your fine component?
(Just a simple button to turn the preview ON or OFF)
I don't know if it is possible to do via foobar2000 SDK, but I'll add feature request, so I could investigate when I have time for it.
Furthermore, I'd like to quote the good ideas from others here, just to show how good these are and I like them too :-)
I have these feature requests on github, feel free to add like there, so I would know which ones are the most wanted.
Great and simple plugin, works like just plug and play!
Many thanks!
Suggestion: Double tap on status bar to locate currently playing track, just like in foobar on desktop.
It works on my laptop where foobar is installed. Via google chrome on this laptop I can acces foobar, but this is not remotely!?
However on a remote PC I get the message "ERR_CONNECTION_REFUSED" when I try to browse in chrome to http://localhost:8880.
In the plugin configuration screen I have allowed the control from remote machines as well!
Can someone advise what is going wrong?
It works on my laptop where foobar is installed. Via google chrome on this laptop I can acces foobar, but this is not remotely!?
However on a remote PC I get the message "ERR_CONNECTION_REFUSED" when I try to browse in chrome to http://localhost:8880.
In the plugin configuration screen I have allowed the control from remote machines as well!
Can someone advise what is going wrong?
Solved it myself. I only had to replace "hostname" with the IP-address of my laptop on which Foobar is running! Hope this may help someone else having the same issue.
Very good plugin!
I've been using Kodi for playing my music on a laptop connected to my HiFi.
I wrote a simple php remote interface, so I was able to start a playlist remotely (GET command) from my tablet.
With the latest Kodi release (Leia) is not possible to use GET commands to start the player anymore. Kodi wants me to use a POST command using Ajax and JSON, but it can't be done from a remote pc (it's blocked for security reasons), so my webapp is broken.
I want to give Foobar2000 a try and use it instead of Kodi.
foo_beefweb is a perfect web interface, but I don't need the whole interface. I only need it as "bridge" between foobar and my php web app.
After installing foo_beefwer, is there a simple command (GET or POST) that I can send to localhost:8880 in order to start a certain playlist.m3u file which resides on the laptop?
Thak you for any help you can provide.
After installing foo_beefwer, is there a simple command (GET or POST) that I can send to localhost:8880 in order to start a certain playlist.m3u file which resides on the laptop?
According to the auto-generated API documentation (https://hyperblast.org/beefweb/api/), you might be able to fashion something by using the endpoint
/playlists/{playlistId}/items/add
. Possibly you can simply pass the playlist filename.
Using the APIs I was able to start playing a playlist that was already loaded in foobar (http://localhost:8880/api/player/play).
This is a good start.
Now I'm trying to choose the playlist that I want to listen to.
I'm looking for a command that let me play a ".m3u" locally stored playlist. It seems that all the APIs refere to playlists with their "ID", as if they were already in a library.
I'm looking for a command that let me play a ".m3u" locally stored playlist. It seems that all the APIs refere to playlists with their "ID", as if they were already in a library.
As it has been suggested already the command you need is
POST /api/playlists/{playlistId}/items/addplaylistId is a playlist identifier in one of the three formats:
- zero-based index of playlist in UI, e.g. 0 for the first playlist
- unique playlist indentifier obtainable by GET /api/playlists, this is a more stable identity. it is preserved when playlists are reodered
- special value current indicating playlist currently selected in UI (not web UI)
Body of the POST request should be a JSON with the following structure:
{
"items": ["path to item to add"],
"async": false,
"index": -1
}
items is the array of tracks, URLs, playlists, etc you want to add to playlist. Make sure the file you are adding is inside directory that is allowed to be accessed via API (aka Music directory)
async is an optional parameter specifying, if you want to wait for all items to be processed or want to just start adding and return immediately (default false).
index is an optional parameter specifying where to insert added items. By default items are added to the end of the specified playlist.
Hope that helps
{
"items": ["path to item to add"],
"async": false,
"index": -1
}
items is the array of tracks, URLs, playlists, etc you want to add to playlist. Make sure the file you are adding is inside directory that is allowed to be accessed via API (aka Music directory)
Many thanks!
can i access foobar on my pc through my mobile with it?
Hi,
I have a bug with this component that causes foobar to display an incorrect elapsed playback time. The playback time is constantly increased by 2:50. This is not specific to the web interface, it affects the main desktop UI everywhere time elapsed is displayed. The seekbar is also off by 2:50 to the right. The bug is only cosmetic and doesn't affect playback (songs properly start at their beginning). Uninstalling the component solves the problem.
My dude!
I made this account to say thanks for this plugin. I personally don't use the GUI but my app is using the REST API to interact with fb2k in a way the command line doesn't allow.
Excellent work!
I finally switched from Kodi to Foobar2000 and I must thank foo_beefweb for making it possible.
There's only one last problem that I'm trying to solve:
All my music is stored in an external hard drive. In the root of the hard drive there are folders named "A", "B", "C" etc...
Each folder contains the artists folders and each artist folder contains the album folders.
In the Preferences menu, in the "Music directories" box I've added "M:\" that is the root of the external hard drive.
With foo_beefweeb I'm only able to navigate the root folder and I can't access the subdirectories (A, B, C...).
Instead if I insert "M:\A" I'm able to navigate all the subdirectories of "A".
Is there a problem with the way foo_beefweb stores the location of the root folder?
I'm using Windows 10, Foobar 1.5.1 and foo_beefweb 0.3.
Hi all, I've uploaded new version.
I appologize for the such long delay.
This should have been released year ago or so, but my main work occupies too much of brain resources :(
Changes in v0.4:- Added optional playback information panel
- Added basic support for playlist column customization
- Renamed "Audio menu" to "Playback mode"
- Fixed icons occasionally not being rendered on Chrome-based browsers
- Fixed non-latin music directories support
- Fixed "Add URL" not working
- Total playlist time status line is removed
- Volume slider now uses linear scale instead of dB
- Fixed browsing directories with ! in path
Known issues:- Specifying root directory as music directory does not work
Is there a problem with the way foo_beefweb stores the location of the root folder?
This is known issue, something is broken in how paths are manupilated. ::)
As a workaround you can mount your drive (https://www.windowscentral.com/how-mount-hard-drive-folder-windows-10) in some directory, I think this should help.
Hi all, I've uploaded new version.
The changelog sounds very promising!
Thank you very much for giving us a great and easy way to control f2k via browser!
Hi all, I've uploaded new version.
Hello!
I registered on these forums just to express my gratitude. Thanks for the update, these changes are awesome. I especially like the ability to customize the columns.
Thanks for your effort!
//Erik
Just perfect! Thanks a lot for this pack!
Well may I ask more or less when should "local playback" be on the works :roolleyes:
In other words if the control remote features are mature enough.. and thank you so much!!
Thank you very much for this amazing component!!!
... just in case someone is searching for a way to give this amazing tool a more app like appearance on their android phone... (instead of opening the browser + webpage all the time...) https://hermit.chimbori.com/ does a pretty good job :-)
however... something like a "progressive web app" (https://blog.mozilla.org/firefox/progressive-web-apps-whats-big-deal/) would make this component close to perfect :-D
can you add some manipulation with multiple playlists?
Wow, this plugin rocks! It's just so simple and perfect. Thank you so much.
That would be much better if there are any mobile device control apps provided as well like Android apk and xapk, windows xap and appx, and iOS ipa files or publish to their app markets too, so I can make it auto pause my Foobar2000 playback while someone is phone calling me and I'm talking in voice phone, and I can config and add my "servers" (means Foobar2000 IPs) in a list to switch between more easily. And, with a real app I could place an icon in my app list, make it auto run behind the backstage as a service/daemon like other phone apps e.g. messenger or whatsapp, and I can switch its interface back immediately anytime.
Beside, better to integrate more with Foobar2000 Playlist Organizer component:
http://www.foobar2000.org/components/view/foo_plorg
Some people like me, organize and custom my own tree view of playlists inside with this very helpful component, so I don't have to search complicatedly inside plenty amount of playlists. I hope if beefweb interface will support and integrate that tree view into beefweb, so we could search that tree view with our Android devices or iphones remotely.
Hi folks,
this yet another attempt to implement web interface component for foobar2000.
Features:
- Lightweight web user interface
- Playback control
- Playlist management
- Music directory browser
- Real-time UI updates
- Mobile-friendly responsive design
- REST-like API for controlling player from your application
Screenshots:
Main web interface
(https://user-images.githubusercontent.com/19171756/44335572-93108200-a47d-11e8-9ab4-7e51771353cf.png)
Configuration screen
(https://user-images.githubusercontent.com/19171756/44335583-9c015380-a47d-11e8-9934-639503538f8e.png)
System requirements:
- foobar2000 1.3 or later
- Windows 7 or later
Browser requirements:
- Any recent browser should work
- Due to high development effort required Internet Explorer of any version is not supported
Links: download (https://foobar2000.org/components/view/foo_beefweb), github (https://github.com/hyperblast/beefweb)
Let me know what you think.
Thank you for this controller. Is there any way to change column width in directory browsing?
Just wanted to thank you for this great component!
Works really nice =)
I registered for the sole purpose of saying THANK YOU man because this was WAAAAAAAAAAAAAAAAAAY easier than the foobar2000 controller for Android.
Happy holidays!
Thanks for the component.
Can you explain how should I get playlist items with "/playlists/{playlistId}/items/{range}"?
"/playlists/0/items/0:10?columns=Title" returned items but without column values.
Hi all, new version is available! ;)
Changes in v0.5:
- Added support for specifying custom response header (e.g. for CORS)
- Added support for specifying custom web content directories
- Added settings to customize window title and playback information panel content
- Added support for different file browser add actions ("Add", "Add & Play", "Replace & Play")
- Improved dialog styling in web UI
- Clicking on status bar locates current track
- Binaries are built with VS2017 and dynamic runtime libraries
- Updated foobar2000 SDK to 2019-06-30
- Updated boost to v1.71
- Fixed preventing of foobar2000 update
- Fixed "Port:" label overflow in settings page
- Fixed error 500 when trying to browse directories with inaccessible files
- Fixed browsing of root directory (e.g. C:\)
- Fixed volume slider vertical alignment
Thanks for the component.
Can you explain how should I get playlist items with "/playlists/{playlistId}/items/{range}"?
"/playlists/0/items/0:10?columns=Title" returned items but without column values.
columns are title formatting expressions, so your example will look like
"/playlists/0/items/0:10?columns=%25Title%25"
%25 yields % due to url encoding
Hello,
Is it possible to customize or configure beefweb such that the current item being played is highlighted with a user chosen background color?
Hello,
Is it possible to customize or configure beefweb such that the current item being played is highlighted with a user chosen background color?
I can suggest you other approach. On Firefox (Desktop) i use a extension called DarkReader, its available for Chrome also.
It simply darkens every webpage using CSS methods for each webpage.Check the attached image.
PS. The component works on Foobar2000 Flatpack version, runned on Linux Mint 20.1 Cinnamon
Thanks for this cool foobar2000 component!
I use foobar among other things as a player at smaller events. The microphones are controlled remotely via a digital mixer. The only problem was playing playbacks from the FOH console.
Thanks to Beefweb I now have full control over the player via network. Top!
Hi all, new version is available! ;)
Changes in v0.5:
- Added support for specifying custom response header (e.g. for CORS)
- Added support for specifying custom web content directories
- Added settings to customize window title and playback information panel content
- Added support for different file browser add actions ("Add", "Add & Play", "Replace & Play")
- Improved dialog styling in web UI
- Clicking on status bar locates current track
- Binaries are built with VS2017 and dynamic runtime libraries
- Updated foobar2000 SDK to 2019-06-30
- Updated boost to v1.71
- Fixed preventing of foobar2000 update
- Fixed "Port:" label overflow in settings page
- Fixed error 500 when trying to browse directories with inaccessible files
- Fixed browsing of root directory (e.g. C:\)
- Fixed volume slider vertical alignment
Hey! I made an account to say, thank you so much for making a REST api, this has been the only way i've been able to successfully grab album art data and use it so flexibly. I wanted to suggest something that would make it absolutely perfect if you don't mind.
Could there be a GET that returns any kind of specified title format field like the list shown here? as just raw response data
https://wiki.hydrogenaud.io/index.php?title=Foobar2000:Title_Formatting_Reference#Track_info_fields_and_functions (https://wiki.hydrogenaud.io/index.php?title=Foobar2000:Title_Formatting_Reference#Track_info_fields_and_functions)
Having the track info fields exposed, and returned in an easy to use format would open up so many practical opportunities like pi projects or even livestream widget plugins. Currently, i can achieve this exact idea using a different plugin, Now Playing Simple. However. This outputs everything to a text file, and i end up having to use string clamps and other string trickery as well as load the text file over and over, and I just think having something akin to this but in the restful api would be incredible.
(https://i.imgur.com/W9kjkvF.gif)
Thank you for your time, I already use the REST api in so many different projects currently, and this would just absolutely be the cherry on top :D NEVERMIND, I'm so dumb. I just learned what the column part was. This is legendary. Thank you so much!!! this plugin will make my life miles easier <3
Made a dark theme. Maybe someone will come in handy.
Replace the bundle.css file in the component folder
Made a dark theme. Maybe someone will come in handy.
Replace the bundle.css file in the component folder
new version (bug fix)
---
Modified version from github
This is exactly what i've been wanting but it doesn't wanna load.
successfully load the webui on host pc
tried several browsers on client pc
successfully pinged host pc IP
tick allow remote connections in plugin settings
changed port number
enable all traffic from foobar2000 in windows firewall on host pc
win10 21h2 on both pcs. i'm sure this is a network 101 thing, probably not the plugin's fault, but i can't sort it out. any ideas?
also that looks cool leviathan, will add that if I get it working
also, i run a local XAMPP wordpress on the same host computer and can reach it from the pc i'm currently unable to reach beefweb with
(EDIT seems unavailable on my above post)
Nevermind - I just had to play with windows firewall to allow foobar2000 through. Works great and as others have said, Thank you hyperblast! If you wanna make something really robust, futureproof and cross platform, what's better than this? the collaboration in this thread is awesome as well, cheers all
Hi all, I published new (mostly maintenance) release.
Changes in v0.6:- Added dark theme for web UI
- Added support for foobar2000 x64
- Improved styling of settings screen
- "Use full screen width" checkbox is no longer displayed on small screens
- Binaries are built with VS2022
- Updated foobar2000 SDK to 2022-11-16
- Updated boost to v1.81.0
- Updated nlohmann/json to v3.11.2
- Removed support for browsers without native EventSource implementation
Hi!
Installed this today and as everything else in my computer works in dark mode, the preferences of your plugin does not have dark mode integration (which is quite funny having everything else in fb2k in black and chaging to your plugins preferences the preference window turns light). I am using the x64 version.
the preferences of your plugin does not have dark mode integration
This is known issue, I didn't figure how to make it work yet O:)
I contributed this to another project recently..
https://github.com/stuerp/foo_midi/commit/e0c433bac5d8a6d61e30e18b9de0080834a1ac6e
You should be able to figure it out for yours.
I contributed this to another project recently..
Great suggestion. Thank you! Will be integrated in the next release.
@hyperblast Great plugin, thank you very much for your work. ;D
Sorry to write under my post but unfortunately you can't edit an older one.
Would it be possible that besides just controlling the fbk2 from the e.g. phone, it is also possible to listen through the browser? It really would be wonderful.
Are the browser interface settings saved in some file in fbk2 settings? I ask because after connecting the device you have to configure the interface in the browser from the beginning.
Would it be possible that besides just controlling the fbk2 from the e.g. phone, it is also possible to listen through the browser? It really would be wonderful.
Currently not planned, this is practically implementing separate streaming plugin, which I don't have enough spare time.
Are the browser interface settings saved in some file in fbk2 settings?
Settings are stored in browser local storage.
You can inspect and/or modify them via browser development tools, i.e.
Inspect -> Application -> Local Storage -> player_settings in Chrome
You can inspect and/or modify them via browser development tools, i.e. Inspect -> Application -> Local Storage -> player_settings in Chrome
ok, found it, thank you
Wow - this is working flawlessly
Many thanks 4 this component :)
I use it with Getfree's parseJson function...
http://www.autohotkey.com/board/topic/93300-what-format-to-store-settings-in/#entry588268 (http://www.autohotkey.com/board/topic/93300-what-format-to-store-settings-in/#entry588268)
(credits to Getfree)
;{"playlists":[{"id":"p1","index":0,"isCurrent":false,"itemCount":3,"title":"Library Playlist","totalTime":0.0}
This works 4 me:
MsgBox, % "' `r`nid: " jsObj.playlists.index.id "`r`nIndex: " jsObj.playlists.1.index "`r`nisCurrent: " jsObj.playlists.1.isCurrent "`r`nitemCount: " jsObj.playlists.1.itemCount "`r`ntitle: " jsObj.playlists.1.title "`r`ntotalTime: " jsObj.playlists.1.totalTime
but this one is tricky:
=> {"playlistItems":{"items":[{"columns":["Artistname1","Title1"]},{"columns":["Artistname2","Title2"]}],"offset":0,"totalCount":1072}}
jsObj.1.columns dosn't work :(
i tried many different combinations but my knowledge of this function and json is mucho limited ;-)
So i need help please...
Keep on doing!
DJ Sunnie
I use it with Getfree's parseJson function...
jsObj.1.columns dosn't work :(
Hi, I'm not sure if I could help with third party code. JSON path is something like
jsObj.playlistItems.items.1.columns.1
Maybe replace some 1 with 0.
Hi,
MsgBox, % "Artist - Title: " jsObj.playlistItems.items.1.columns.1 " - " jsObj.playlistItems.items.1.columns.2
is just right :)
Thanks
cheers,
DJ Sunnie
Hi all, new release is available!
Changes are mostly internal with some feature updates and fixes.
Changes in v0.7:- Case insensitive string comparison is used for HTTP headers and query parameters
- Volume control now displays tooltip in dB
- Added "Stop after current" option
- Fixed settings page not honoring dark mode
Component page (https://www.foobar2000.org/components/view/foo_beefweb/release/0.7) | GitHub (https://github.com/hyperblast/beefweb/releases/tag/v0.7)
Thank you very much for this plugin!
If possible - could you please have a way of defining the settings (columns, widths, title, font size, etc) via for example an xml file in the beefweb directory?
At the moment, the settings are cookie based, but this isn't working for me as the settings get reset due to the way I open beefweb. I have tablets that run Home Assistant around the house, and call beefweb through an iframe in Home Assistant. But the iframe doesn't support persistent cookies, so every time I open beefweb, it is in its default state.
Maybe I didn't get it ... This component works very well, if I enter localhost:8880 into a browser running on the same PC as foobar is running. However, on my mobile phone and on my tablet, localhost:8880 shows me error 404. Of course, tablet and phone are in the same local network as my PC. What's the purpose of this component?
I thought, I could control foobar, running on my PC, located somewhere in the house, using my tablet from any other location in the house (within local network).
I'd appreciate your hints!
----------------
Okay, I got it, one needs to put the IP address of the PC running foobar, instead of localhost. I'm old ...
GREAT GREAT GREAT! Many thanks for this component!
However, on my mobile phone and on my tablet, localhost:8880 shows me error 404.
Of course. The adress localhost is only valid for each device itself. To connect from a different device you need to use the ip adress of the PC where foobar is running.
hey guys,
@hyperblast thank you for this great component!
I'm working in a sleek ui for mobiles, based on the API this component provides, and it is working awesome (I'll share it if you want).
Now I have a question, I want my app to listen for events, given that if I take actions in foobar2000, that's not reflected in my app until I refresh, and I would like to avoid making repetitive requests to get the player state.
How can I subscribe to those events, what's the url for the SSE (I wasn't able to find it on documentation, sorry)
Thank you for your help!
Here are some screenshots of my remote controller app based on Beefweb.
Edit: changing images host since the previous one doesn't work as expected
(https://iili.io/H41FF6J.md.jpg)
(https://iili.io/H41F3Ga.md.jpg)
(https://iili.io/H41F2Cg.md.jpg)
(https://iili.io/H41FJZF.md.jpg)
Still need to know how to listen to Foobar events. Any documentation or knowledge would be much appreciated.
Thank you!
Beefweb is working great for me. I have a feature request though: having a button to switch the output device. It would save some time walking back to my PC when I forget to switch before leaving the room.
ok, sorry for the spam, I think I have it:
We can create an eventsource to `api/query/events` and to `api/query/updates`. Sadly, there's no documentation for that at all :/ but that seems to be the way to use it. Please feel free to correct me if I'm wrong.
@muppypuppy your suggestion is really cool, but it seems that there's no endpoint to change preferences directly (https://hyperblast.org/beefweb/api/#) so I wouldn't be able to help since my expertise is on the frontend (and maybe some Python stuff but never have worked with C#). Anyways, that's a great suggestion.
If we are talking feature requests - I would love to be able to rate songs from beefweb :)
Hi all, new release is available! 8)
Changes in v0.8:- Adjust screen size breakpoints (approximately 640px for medium size and 960px for large size)
- Convert view switcher to menu on small size screens
- Display album column by default on medium size screens
- Prevent default overscroll behavior (e.g. reload page)
- Adjust UI height to avoid being hidden by the browser controls
- Fix desynchronization of current track when manipulating playlist items
- Delay showing "Processing files" UI when adding playlist items
- Add setting to hide status bar
- Add setting to hide gaps between panels
- Rename "Font size" setting to "UI elements size"
- Add playlist item row menu
- Use ellipses as row menu icon
- Enable "Show playback information panel" setting by default
- Use italic font for playing playlist instead of tab icon
Component page (https://www.foobar2000.org/components/view/foo_beefweb/release/0.8) | GitHub (https://github.com/hyperblast/beefweb/releases/tag/v0.8)
Thank you very much for this plugin!
If possible - could you please have a way of defining the settings (columns, widths, title, font size, etc) via for example an xml file in the beefweb directory?
Hi,
I have plans to allow saving current settings as default.
These settings will be used when no settings are stored in the browser yet (like your case).
How can I subscribe to those events, what's the url for the SSE (I wasn't able to find it on documentation, sorry)
Hi,
unfortunately SSE is not supported by Swagger.
This was asked on GitHub previously, I'll quote my self here:
https://github.com/hyperblast/beefweb/issues/242#issuecomment-1445178197
Enhancement request for Beefweb volume control on mobile device:
- display volume in dB
(mobile device does not have the mouse hover over to see the dB)
- make the slider larger for easier adjustment
Here are some screenshots of my remote controller app based on Beefweb.
Edit: changing images host since the previous one doesn't work as expected
(https://iili.io/H41F2Cg.md.jpg)
(https://iili.io/H41FJZF.md.jpg)
Still need to know how to listen to Foobar events. Any documentation or knowledge would be much appreciated.
Thank you!
Could you share your mobile app? It looks great and I would love to test it.
Thanks!
When I open beefweb on my browser, it shows all my tracks in 1 HUGE playlist.
Is it possible to group then by genre => album artist or artist => album?
Thanks for the assistance.
(https://i.imgur.com/RI6mW0r.png)
Playlist menu > Custom...
%genre% - %album artist% - %date% - %album% - %discnumber% - %tracknumber% -%title%
%genre% - $swapprefix(%album artist%) - $sub(3000,%date%) -%ALBUM% - %DISCNUMBER% - %TRACKNUMBER% - %TITLE%
Green: Playlist select
Click the Playlist icon to update the Playlist.
------
For convenient use:
foobar2000 menu > Edit > Sort by...
Add some sorting patterns.
Register "Sort by..." to Keyboard Shortcuts.
for example: ctrl + Shift + S
Check Global hotkey.
Choose from sorting patterns.
I'm going to try some small modding ... right now trying to just build the component from the beefweb-0.8 source code ... it keeps failing with these 2 errors. Can someone give me pointer as to what is wrong?
Steps taken:
- installed all the beefweb-0.8 pre-requisites
- download beefweb-0.8 source code
- unzip it into a folder
- start Visual Studio 2022
- start VS2022 command prompt
- issue the build command: msbuild scripts\build.proj /p:Configuration=Release
It runs for quite a while, then throws the following error:
:
Performing install step for 'ext_zlib'
-- ext_zlib install command succeeded. See also S:/Visual_Studio_Projects/beefweb-
0.8/cpp/build/Release/extlibs-root/src/ext_zlib-stamp/ext_zlib-install-*.log
Creating import library for zlib1.dll
-- ext_zlib make_import_lib command succeeded. See also S:/Visual_Studio_Projects/
beefweb-0.8/cpp/build/Release/extlibs-root/src/ext_zlib-stamp/ext_zlib-make_import_
lib-*.log
Completed 'ext_zlib'
FinalizeBuildStatus:
Deleting file "Win32\Release\ext_zlib\ext_zlib.tlog\unsuccessfulbuild".
Touching "Win32\Release\ext_zlib\ext_zlib.tlog\ext_zlib.lastbuildstate".
Done Building Project "S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\extlib
s\zlib\ext_zlib.vcxproj" (default targets).
Done Building Project "S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\extlib
s\zlib\ext_zlib.vcxproj.metaproj" (default targets).
Done Building Project "S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\ext_al
l.vcxproj.metaproj" (default targets) -- FAILED.
Done Building Project "S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\server
\core.vcxproj.metaproj" (default targets) -- FAILED.
Done Building Project "S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\beefwe
b.sln" (default targets) -- FAILED.
Done Building Project "S:\Visual_Studio_Projects\beefweb-0.8\scripts\build.proj" (def
ault targets) -- FAILED.
Build FAILED.
"S:\Visual_Studio_Projects\beefweb-0.8\scripts\build.proj" (default target) (1) ->
"S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\beefweb.sln" (default target
) (2) ->
"S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\server\core.vcxproj.metaproj
" (default target) (4) ->
"S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\ext_all.vcxproj.metaproj" (d
efault target) (5) ->
"S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\extlibs\foosdk\ext_foosdk.vc
xproj.metaproj" (default target) (8) ->
"S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\extlibs\foosdk\ext_foosdk.vc
xproj" (default target) (9) ->
(CustomBuild target) ->
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\M
icrosoft.CppCommon.targets(254,5): error MSB8066: Custom build for 'S:\Visual_Studio_
Projects\beefweb-0.8\cpp\build\Release\CMakeFiles\39a10b2bcdfa4bd8961faf62af603ee3\ex
t_foosdk-mkdir.rule;S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\CMakeFile
s\39a10b2bcdfa4bd8961faf62af603ee3\ext_foosdk-download.rule;S:\Visual_Studio_Projects
\beefweb-0.8\cpp\build\Release\CMakeFiles\39a10b2bcdfa4bd8961faf62af603ee3\ext_foosdk
-update.rule;S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\CMakeFiles\39a10
b2bcdfa4bd8961faf62af603ee3\ext_foosdk-patch.rule;S:\Visual_Studio_Projects\beefweb-0
.8\cpp\build\Release\CMakeFiles\39a10b2bcdfa4bd8961faf62af603ee3\ext_foosdk-configure
.rule;S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\CMakeFiles\39a10b2bcdfa
4bd8961faf62af603ee3\ext_foosdk-build.rule;S:\Visual_Studio_Projects\beefweb-0.8\cpp\
build\Release\CMakeFiles\39a10b2bcdfa4bd8961faf62af603ee3\ext_foosdk-install.rule;S:\
Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\CMakeFiles\a990d6aed58809e06235a
3d29d51faa2\ext_foosdk-complete.rule;S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\
Release\CMakeFiles\baf6f0184f7f380f32d1913cb5728162\ext_foosdk.rule;S:\Visual_Studio_
Projects\beefweb-0.8\cpp\extlibs\foosdk\CMakeLists.txt' exited with code 2. [S:\Visua
l_Studio_Projects\beefweb-0.8\cpp\build\Release\extlibs\foosdk\ext_foosdk.vcxproj]
"S:\Visual_Studio_Projects\beefweb-0.8\scripts\build.proj" (default target) (1) ->
"S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\beefweb.sln" (default target
) (2) ->
"S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\server\core.vcxproj.metaproj
" (default target) (4) ->
"S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\ext_all.vcxproj.metaproj" (d
efault target) (5) ->
"S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\extlibs\stringencoders\ext_s
tringencoders.vcxproj.metaproj" (default target) (12) ->
"S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\extlibs\stringencoders\ext_s
tringencoders.vcxproj" (default target) (13) ->
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\M
icrosoft.CppCommon.targets(254,5): error MSB8066: Custom build for 'S:\Visual_Studio_
Projects\beefweb-0.8\cpp\build\Release\CMakeFiles\7cdbc30f19678a66cf35621c4726fa3b\ex
t_stringencoders-mkdir.rule;S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\C
MakeFiles\7cdbc30f19678a66cf35621c4726fa3b\ext_stringencoders-download.rule;S:\Visual
_Studio_Projects\beefweb-0.8\cpp\build\Release\CMakeFiles\7cdbc30f19678a66cf35621c472
6fa3b\ext_stringencoders-update.rule;S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\
Release\CMakeFiles\7cdbc30f19678a66cf35621c4726fa3b\ext_stringencoders-patch.rule;S:\
Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\CMakeFiles\7cdbc30f19678a66cf356
21c4726fa3b\ext_stringencoders-configure.rule;S:\Visual_Studio_Projects\beefweb-0.8\c
pp\build\Release\CMakeFiles\7cdbc30f19678a66cf35621c4726fa3b\ext_stringencoders-build
.rule;S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\CMakeFiles\7cdbc30f1967
8a66cf35621c4726fa3b\ext_stringencoders-install.rule;S:\Visual_Studio_Projects\beefwe
b-0.8\cpp\build\Release\CMakeFiles\227a5dcaeb306afe9c0bd9c25d325c77\ext_stringencoder
s-complete.rule;S:\Visual_Studio_Projects\beefweb-0.8\cpp\build\Release\CMakeFiles\ab
7a76c9c1c7d9854f4edd6faa3c21ee\ext_stringencoders.rule;S:\Visual_Studio_Projects\beef
web-0.8\cpp\extlibs\stringencoders\CMakeLists.txt' exited with code 2. [S:\Visual_Stu
dio_Projects\beefweb-0.8\cpp\build\Release\extlibs\stringencoders\ext_stringencoders.
vcxproj]
0 Warning(s)
2 Error(s)
Time Elapsed 00:11:38.67
All help and guidance would be greatly appreciated...