Now Playing Web Page

carldickson

Member
Joined
Apr 25, 2024
Messages
6
HI, I was searching for a now playing web page that I could cast to my TV, but couldnt find one.
So I turned to Copilot AI because I dont know anything about coding html pages, I wanted a simple HTML page without having to install python components.

Im using a Home Assistant automation to detect when music is being played and use "dash cast" to send the html page to my chromecast/nvidia shield. I would be great if this was included in the WiiM app, but this works.

WiiM uses https so I created a reverse proxy over it so it would have a certificate.

Here is the results and the code is attached (Rename the .txt to .html), and change this line with your reverse proxy name and if anyone knows how to do it without the proxy, let me know.
const targetUrl = encodeURIComponent('https://wimm_reverse_proxy/httpapi.asp?command=getMetaInfo');


1729395592582.png
1729400209688.png
 

Attachments

Last edited:
I run everything on a Unraid server with ngix
Hey! Would you mind helping me out with getting this to work :)
I managed to install ngix on my windows server and add the code but struggling in how to configure the ngix config file to make a workable proxy..
 
What's the purpose of using rev proxy?

BTW there are examples of the similar code written to use UPnP service of the WiiM, made by @cc_rider, somewhere around.
 
Last edited:
Given you are running Home Assistant, might you be able to adopt the approach taken below for piCorePlayer’s ability to stream audio from an input port via LMS and use the LMS url to display the info on tv web browser? In other words, if you can find a way to tell LMS running on HA to emulate what piCorePlayer does in terms of an input port, you may be able to use the Radio Now Playing feature, along with the music & artists plugin to enhance a basic now playing page from a WiiM stream?

Post in thread 'WiiM Pro, Raspberry Pi 4 8GB'
https://forum.wiimhome.com/threads/wiim-pro-raspberry-pi-4-8gb.1150/post-95282
 
To much hassle to display some info on a page, I did not have the energy to dig into it ;)
Yeah, if you don’t already have piCorePlayer/LMS already set up like I and others do. If you do, it’s next to no effort.
 
Nice, I didn't realize the web API now has the album art URI. Will allow me to no longer need to rely on the funky UPnP API, at least for some things.

BTW, you SHOULD be able to get around the proxy requirement by doing this in a Chrome extension. I haven't tried it (I use the UPnP API, which doesn't have the cert), but will definitely give this a try as an extension...

Several of the extensions in this thread can be cast to a Google Nest or a TV that supports Chromecast. Here’s the VU extension casting to a Google Nest.

IMG_3443.jpeg
 
Last edited:
Hey! Would you mind helping me out with getting this to work :)
I managed to install ngix on my windows server and add the code but struggling in how to configure the ngix config file to make a workable proxy..
This is an example https to http proxy that I posted a while ago. It's using docker but should help getting a windows based nginx to work. FWIW, I built a docker image with your code too, but got busy with holiday outings with the fam.
 
Last edited:
Well, appears that, even with a Chrome Extension, even in background.js, the Chrome browser simply won't deal with that invalid certificate on the WiiMs. So, without a server and something like Python or Node.js, which have the ability to bypass the invalid cert, the only apparent way to do this strictly in the browser is via the UPnP interface.

Pretty straightforward to mashup your HTML/CSS with my existing background.js and get it working as a Chrome extension - no proxy required.

1735539241485.png
 
Hey! Would you mind helping me out with getting this to work :)
I managed to install ngix on my windows server and add the code but struggling in how to configure the ngix config file to make a workable proxy..
Here's the @carldickson solution in docker (Dockerfile docker-compose.yml nginx.conf nowplaying.html) nginx is running as an https-to-http proxy. To run, docker-compose up --build

Dockerfile
Bash:
# Use the official Nginx image
FROM nginx
# Copy Nginx configuration file
COPY nginx.conf /etc/nginx/nginx.conf
COPY nowplaying.html /usr/share/nginx/html/

# Expose ports
EXPOSE 80
# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

nginx.conf -- set addresses for the local server IP and for the WiiM device IP
Code:
worker_processes auto;

events {
    worker_connections 1024;
}

http {
    server {
        listen 80;
        server_name 192.168.1.116; #this server IP address

        # Serve static files
        location / {
            root   /usr/share/nginx/html; # This is where nowplaying.html is located
            index  index.html index.htm; # Default files to serve
        }

        # Proxy API requests to the target device
        location /httpapi.asp {
            proxy_pass https://192.168.1.184; #WiiM Amp
            proxy_ssl_verify off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

docker-compose.yml
YAML:
version: '3.8'
services:
  http-to-https-proxy:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80"
    restart: always
 
proxy_ssl_verify off;

That’s how this solution is able to ignore the wonky certificate. Can’t be done in a browser, for security reasons.
 
proxy_ssl_verify off;

That’s how this solution is able to ignore the wonky certificate. Can’t be done in a browser, for security reasons.
This solution (nodejs, server-side) has a couple of features (start, pause) that are useful. I run this on a side monitor and it's often as easy as reaching for the remote to pause music for visitors or phone/video calls.

YAML:
 version: '3.8'

 services:
   wnp:
     build:
       context: .
       dockerfile: Dockerfile
     container_name: wnp
     ports:
       - "80:80"
     environment:
       - PORT=80
     restart: unless-stopped

Bash:
 # Dockerfile
# Use the Node.js Alpine image as a base to keep the image size small
FROM node:20-alpine

# Set the working directory in the container
WORKDIR /app

# Clone the GitHub repository
RUN apk add --no-cache git \
    && git clone https://github.com/cvdlinden/wiim-now-playing.git . \
    && npm install \
    && apk del git

# Expose the port the app runs on (default 80, but can be adjusted if necessary)
EXPOSE 80

# Set the default port as an environment variable (change if needed)
ENV PORT 80

 # Start the server
 CMD ["node", "server/index.js"]
 
Last edited:
This solution (nodejs, server-side) has a couple of features (start, pause) that are useful. I run this on a side monitor and it's often as easy as reaching for the remote to pause music for visitors or phone/video calls.
Looks great. Another one I've not seen before. We need to start a thread to collect all of these nice solutions in one place.

Searching for WiiM on GitHub gets you a crap load of Wii projects, sadly.
 
Last edited:
Looks great. Another one I've not seen before. We need to start a thread to collect all of these nice solutions in one place.

Searching for WiiM on GitHub gets you a crap load of Wii projects, sadly.
That would be good. Another potential idea is to create an 'awesome' page on github. These are some examples of what that means: https://github.com/topics/awesome
https://github.com/awesome-selfhosted/awesome-selfhosted.

It points to the 'best of' in a single webpage, but there's some small maintenance tail that comes with it as web links will stale out over time. For WiiM, it would be a pretty small page but someone with a bit of time on their hands could make one.
 
Back
Top