Party Button 1.0
Party Button 1.0 https://www.johannes-friedrich.com/wp-content/uploads/2021/06/partybutton1-1024x846.png 1024 846 Johannes Friedrich https://www.johannes-friedrich.com/wp-content/uploads/2021/06/partybutton1-1024x846.pngHow about a button that can spawn an instant dance party in your living room?
Introducing the Party Button 1.0.
While the idea is not new, this tutorial shows how to build a party button for cheap ($50 or less). If configured right (it is quite extensible) it turns your living room into a dance party with the push of a (wireless) big red button. The inspiration came from a scene in Parks and Recreation and the details were inspired by the Emergency Party Button (which in comparison costs $500). This Party Button is not only affordable, but allows you to scale it up by utilizing Android apps, Amazon Dash Buttons and any smart devices that you can connect to your phone.
Let dive into it.
UPDATE 2020: Amazon has killed the Dash Buttons used in this party button. You might still find them on Ebay, but I am not sure if the hack I am presenting here is still working. Here is also a guide I found to build a party button with Raspberry Pi: https://www.ratherdisturbing.co.uk/epb/
What do you need?
- Smart devices to control the lights (as many as you want), for example
- WeMo smart plug ($26)
- Cheaper smart plug ($9)
- Disco light ($12) or similar that is controlled with the smart plugs
- Smart bulbs ($9)
- Android phone with the following apps
- Tasker – automation app to control the music and IFTTT
- Notification listener to make the connection to the button
- IFTTT to control smart devices not compatible with Tasker
- Amazon Dash Button ($5) – UPDATE: Not available on Amazon anymore. You can buy one on Ebay, but have not tested if they still work. Raspberry Pi is and alternative.
- Big red button ($18.99)
- Spotify (with subscription)
- Roku Express ($30) optional, depends on your setup
- A cat (optional)
The minimal costs for me to set it up was about $26.
A fancier setup with more devices could be around $50-$100.
The Flow from Button Press to Party
In my research I found that a combination of the above hardware and software allows for the cheapest, most flexible solution. Feel free to comment if you have suggestions for improvements.
Overall the flow of the Party Button 1.0 is listed below. Some steps can be made even more automated if you want to invest more $ in smart bulbs or smart plugs.
This setup for my house relies on Spotify playing on your speakers or and in my specific cases have Spotify run on a Roku connected to my speakers. If you have your phone connected directly to a Bluetooth sound system the setup is actually a bit easier as you don’t have to send API calls to the Roku.
Sequence flow of the party button:
- Turn off all lights in the house (in my case done manual, could be automated with more smart devices)
- Push the Party Button (manual, duh)
- Amazon Dash Button in the Party Button sends notification to my phone via WiFi (takes about 5 seconds)
- Amazon app throws notification that Dash Button needs to be setup
- Notification Listener identifies notification and starts Tasker App chain
- Tasker starts its action based on your configuration, in my case
- Authenticate with Spotify
- Turn down the volume on Spotify
- Turn on smart bulb
- Send Roku signal to start playing Spotify party song (about 5 seconds)
- Turn down volume 1% when song starts
- Cycle through some effects until the beat drops
- Wait 4 seconds
- Turn off/on bulb for some anticipation
- Turn volume up step by step
- Turn on Wemo Smart Plug that have the disco lights connected
- Turn volume 100%
- Wait until song end (3:10 seconds)
- Turn off Wemo
- Turn off bulb
- Turn down volume
- Play chill song
So that’s the main setup.
In the next sections I will describe the setup of each of the major parts.
The Button
The button makes the setup look great. It’s big, red and wireless.
I found a big button on Amazon (Update: Not available anymore, but there are others) that we can turn into a wifi button by combining it with an Amazon Dash Button. The setup is simple:
- Unscrew the red button
- Put some spacer in the side of the button casing. I used cardboard that I wrapped in MacGyver tape.
- Tape the Dash Button on top of the space in a way that the moving parts of the big button are triggering the Dash Button. You don’t need to give it lots of space as the cardboard spacer is flexible and can be squished a bit.
- Close the whole thing up
- Tape some description on the outside and a Party Button sign on the front. I printed these slides if you want to reuse them
As a bonus, the buttons will make a sound and light up. That should be it for the button. Easy, right?
The Smart Devices
For my setup, I only used two smart devices (one smart bulb and one Wemo smart plug) and already produces nice results
Wemo
- Connected through the official Wemo App, can be controlled with IFTTT. See the description in the respective app on how that works
- Connected an extension cord with a black light and a disco light
Smart bulb
- Cheap option from China, works with the Smart Life app and can also be controlled with IFTTT. See the description in the respective app on how that works
- I set this one on rapid color change just to get some light action started while the other steps are running and people are waiting for the beat to drop
This setup can be extended indefinitely with more smart devices that can control all kind of things.
The Android Setup
Setting up your Android phone with the right apps and code will take a bit of time. I will provide some of the Tasker configuration files for you to start, but there are some steps you have to do (at least once) yourself.
The steps that you need to go through to have Tasker control the events are roughly:
- Step 1: Install Tasker & IFTTT
- Step 2: Setup Spotify control
- Step 4: Setup Roku control
- Step 5: Trigger IFTTT from Tasker
- Step 7: Grab the notification from Amazon Dash Button
Install Tasker & IFTTT
First you have to install Tasker which we use to control the whole action chain.
You will also need to install IFTTT (IF This Then That) as Tasker cannot easily control smart devices. So we will need to trigger IFTTT from Tasker, which will in turn control your smart devices. But more to that later.
Once you installed Tasker, open the app and switch to the “TASKS” tab.
Click on the + button to add a new Task and call it something of your liking like “PartyButton”.
Tasks allow you to set a series of Actions, which control the music and lights. Once you have created the new Task the title should say “Taks Edit” and you can press + to add your first action. We will come back to this later as we need to set up access to the relevant parts first.
As a starting point you can also download my configuration file and import into Tasker, however you will need to do some customization based on the guidance below.
Setup Spotify control
This one took me the longest time to figure out as Spotify need authorization to let you control the playlist and volume. Make sure you have Spotify subscription or get it from somewhere.
Quick note on a simpler solution: The advantage of having access to the Spotify Web API is that you can also control volume and control Spotify for whichever device is playing the music. If your phone is playing on the bluetooth direclty, you can use Android Intents to play a playlist without the API. You simply send a ‘MEDIA_PLAY_FROM_SEARCH’ intent with the right user and playlist (more on this below).
To get control over your playlist, we need to follow the Authorization Code flow in the Authorization Guide of the Spotify API to authorize your personal account only once and then use the tokens we get to get access each time.
Looks complicated, right? Worry not, I will go through it step-by-step.
First
To authorize our Tasker setup to control your spotify you need to set up a new Client on the Spotify Developer Dashboard. Click on “Create a Client ID” and put in information of your choice.
Once the Client is created you can open it and will see a Client ID.
When you click on “Show Client Secret” also a Secret ID.
Keep those at hand, as we will need them next.
Second
We will use the Client ID and Secret ID to get an initial Code from Spotify (see this step in the API guidance).
To do this we need to send a HTTP GET request to the Spotify API. The easiest way to do this is to open up a URL in Chrome and capture the content that was send back.
This URL will send authorization request to Spotify asking for the permission “user-modify-playback-state” and will ask you for permission to access your account. If you are not logged in to Spotify, you will need to log in first. The redirect_uri that is included is the URL to which the code will be send back to. I setup a script on my website that just dumps all the information on a website, making it easier for you to see exact the code. If you worry about sending this information to my side (I do not log it), it misses your secret key, so should not be sensitive.If you don’t like to use this redirect_uri you can also open the Developer Console in Chrome by opening up a new tab and pressing F12 when in Chrome.
URL to copy:
The response will contain a code that you can either see on the screen if you used my URL or you can see under the Network tab by clicking on ‘authorize?..’ and looking for the Response Headers. Copy the code.
Third
Now we will get the actual access token that will allow you to manipulate your playlist and volume though the web API (see this step in the API guidance).
You will need to first create a BASE64 encoding of client id:secret id (with a colon in between) from the first Spotify step. You can copying both IDs (with colon) on this site and pressing >ENCODE<. Copy the result
We will then create a HTTP POST message that sends the code from step 2 your BASE64 encoded string and gets back a Access Token and Refresh Token.
I am using Postman to create the POST. After you installed it you can copy the following URL with the body and headers into it:
https://accounts.spotify.com/api/token
Body: (application/x-www-form-urlencoded)
grant_type: user-modify-playback-state
code: [code]
redirect_uri: https://johannes-friedrich.com/OLD/spot.php (needs to be the same as above)
Header: Authorization: Basic [base64 encoded client_id:client_secret]
This will respond with a JSON object that will look like this:
{
"access_token": [STRING],
"token_type": "Bearer",
"expires_in": 3600,
"refresh_token": [STRING],
"scope": "user-modify-playback-state"
}
The access_token is what you need to send to control your spotify. However as it is set to expire in 60 min, you will need the refresh_token to get a new access_token each time.
Final code in Tasker to control Spotify
We did all this work just to get this refresh_token!
Now we can go back into Tasker set it up that each time it will get a new access_token with the refresh_token and we use that access_token to control spotify (see step 3 in the API documentation).
In Tasker press the + button to add a new Action. Search for “Java” and select JavaScriptlet.
You can then copy-paste the code below into the code section. The first request will get a new access_token and store it in a global variable.
// Get new access_token
var url = "https://accounts.spotify.com/api/token";
var method = "POST";
var xhttp = new XMLHttpRequest();
xhttp.open( method, url, false);
xhttp.setRequestHeader("Accept", "application/json");
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.setRequestHeader("Authorization", "Basic ODAzNWUxZWFiYTk0NDZjM2EzZTY1OGVmODUzNDNmOTc6ZDJjNmJiYjcwMzc0NDY0ZjhmOTg5MzM2NDUzMDVkNGY=");
xhttp.send("refresh_token=AQBYVgDTj8hmYXEBpdAabqprTMD8cZ3y6KoxjifQJniI7KNDau86elZnKuZTbnS43EnB8cjvHA1LsR9cTjVczZkK_DOvMs5cwX8hmupDE_1vn-ExZu8EKzYTMo9ZZ_ISj6fifQ&grant_type=refresh_token");
var response = JSON.parse(xhttp.responseText);
//flash(response.access_token);
setGlobal('%Access_token', response.access_token);
Then we can send different types of requests to Spotify.
Setting the volume:
// Set volume to low-level
var url = "https://api.spotify.com/v1/me/player/volume?volume_percent=6";
var method = "PUT";
var xhttp = new XMLHttpRequest();
xhttp.open( method, url, false );
xhttp.setRequestHeader("Accept", "application/json");
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.setRequestHeader("Authorization", "Bearer "+ global('%Access_token'));
xhttp.send(); //if method was "POST", put info in the () here
//flash(xhttp.responseText);
Play a certain playlist (containing the song you want to play). This one required you to specify a user and playlist. User is obviously your username. To get the playlist link you create a new playlist in your desktop Spotify application, then you right click on the playlist > “Share” > “Copy Spotify URI”. Paste the link somewhere and replace yoru user and playlist in the code below. The current code below plays “Turn Down for What”.
var url = "https://api.spotify.com/v1/me/player/play";
var method = "PUT";
var xhttp = new XMLHttpRequest();
xhttp.open( method, url, false );
xhttp.setRequestHeader("Accept", "application/json");
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.setRequestHeader("Authorization", "Bearer BQBwL1BQnqzloyQBQ5qQ7HVUcKzdFjUQD-XvSOnxKJFsYGv47e6BvFTxrKWRi5y4nltx7MHVHl5CJ_ImWnoYvgFV0iCZc2E-nRG1_Rl8-pdyIxBLy6fDv-SUmFQ-Ow2vtAoIqiJ6DNb1vR4Cs-2_9l7abHsg");
xhttp.send("{\"context_uri\":\"spotify:user:northwood23:playlist:4Iwf1DROS5tMrGCiHh6f7S\",\"offset\":{\"position\":0},\"position_ms\":20000}");
This should be all you need to get your Spotify nicely setup. For my setup I am turning down the volume at the start of the song, and then slowly cranking it up unit the main beat drops. See the more detailed setup at the end of the blog.
Setup Roku control
This configuration is in case you have a Roku that connects to your speakers. I find that convenient, as our Roku is always on and connected to our speakers and therefore avoids further manual steps to set up the audio.
For this configuration you need to be in the same wifi network as your Roku and will need to find out it’s IP. On your Roku go “Settings” > “Wi-Fi” > “Your network name” and write down the number next to IP. For me the number is “192.168.0.10”.
You can now send a request to the Roku to play a certain song with so-called “Deep Links”. It works similarly to above, go to your Spotify desktop application, right click on a song > “Share” > “Copy Spotify URI”. You will need to URL encode the URI and then copy it in the coe below after contentId.
// Start song on Roku Spotify app with contentID, will take about 8 seconds var url = "http://192.168.0.10:8060/launch/19977?contentId=spotify%3Atrack%3A67awxiNHNyjMXhVgsHuIrs"; var method = "POST"; var xhttp = new XMLHttpRequest(); xhttp.open( method, url, false); xhttp.send(); //if method was "POST", put info in the () here //flash(xhttp.responseText);
Trigger IFTTT from Tasker
As mentioned Tasker does not have integration with most smart devices, so we need IFTTT.
After you opened IFTTT go to “My Applets” > “+” > “this” > Search “Webhooks” > “Webhooks” > “Receive a web request” > choose “Event name” > “Create Trigger” >“that” > Select your smart device.
Depending on the smart device you need to have some custom setup. In my case, I have a Wemo Mini, installed the Wemo App and connected it to IFTTT via Wemo App. You should then be able to select that smart device in the “that” section of your setup.
Now we have a webhook. To trigger that webook we will need to open a URL. You can find your personal webhook URL by going on the IFTTT site: https://ifttt.com/maker_webhooks
Click on documentation and copy the link that will look like this with the key being your personal key.
https://maker.ifttt.com/trigger/[event]/with/key/[key]
Now you can simply add an “HTTP GET” Action in Tasker with the link above and adding your trigger name. For me this would look like this.
https://maker.ifttt.com/trigger/wemoon/with/key/[mykey]
That’s it. Now you can create a webhook for each smart device you have.
Grab the Amazon Dash Button notification
https://www.reddit.com/r/tasker/comments/3f0ebb/how_to_using_a_bluetooth_remote_to_launch_tasker/
Finally, we want to trigger the Task that we have setup in Tasker when we press the Dash Button.
This is possible with a little hack when you connect to the Dash button, but do not finish its setup. Install and open the Amazon Shopping app. Open up the menu > “Your Account” > Dash Buttons “Set up a new device” > “Dash Button”. Press and hold the Dash Button for 6 seconds. Press “Connect”. Confirm the Wifi. When the setup gets to selecting a product, do close the setup with the x button and confirm the warning. You should now see the Dash Button under “Mange your Dash devices” with a warning that “you have to choose an item to complete setup”. Click on “Notification Settings” deactivate all notifications except the Dash Button one. The Dash Button setup is finished.
If everything is right, when you push the Dash Button, a notification should show up that “Your [..] Dash Button is almost ready for use”.
Next, install Notification listener and open the app to give it permission to access to your Android notifications. This should be prompted automatically when you start the app the first time.
Once you given the listener the right permissions go back to Tasker select the “Profiles” tab > “+” > “Events” > Search “Notification”> “Notification Listener” > “Configuration” > “Apps” > “Amazon” > “✓” > “✓”
You can now go back to the Profile tab and select your party button Task to be triggered when the Amazon notification is detected.
There you have it. You should now be able to press the Button, see a notification on your phone pop up and have the party button task started.
Leave a Reply