Sensor your music

Check out the Blog Page!

Run

If you want to have your own mobile page, please fork this repo first. Or, you can just clone this repo and skip step 2.

1. Install packages

   npm i
   

2. Build website

   • Change config Go to ./main.js

     // for qrcode generation (please change to yours after forking this repo)
     const GITHUB_USERNAME = "atosystem"
     const GITHUB_REPO_NAME = "sensor_your_music"
     

     and change GITHUB_USERNAME and GITHUB_REPO_NAME to yours

   • Build it

     npm run build
     

   • Modify url

     Go to `./dist/index.html and find the following lines

     <script type="module" crossorigin src="/assets/index.30d58a49.js"></script>
     <link rel="modulepreload" href="/assets/vendor.519c7c38.js">
     <link rel="stylesheet" href="/assets/index.53d3e83e.css">
     

     change the path to relative path

     <script type="module" crossorigin src="assets/index.30d58a49.js"></script>
     <link rel="modulepreload" href="assets/vendor.519c7c38.js">
     <link rel="stylesheet" href="assets/index.53d3e83e.css">
     

   • Create dir for github page

     rm -rf docs
     cp -r dist docs
     

3. Open Puredata

   You can use my example pd_examples/udpRecvExample.pd

4. Start server

   npm start
   

   The output should be:

   Webserver Running at Port 3006
   Localhost server page at http://localhost:3006
   [ws]Listening on 3005
   

   Then go to http://localhost:3006

5. Connect your phone

   Make sure the Udp port is matched to that in puredata. Click Start Server(call) Scan the qrcode with your phone or tablet Also, on localhost, you should see client connect On your device, press Start Sensor to send data Back to puredata, you chould see the numbers changing and the console logging.

Notice

• For multiple devices, please open multiple chrome tabs on your laptop. One tab for one moblie device and each tab uses different UDP Port which corressponds to the object in puredata [netreceive -u <udp port>]

Author

Ian Shih webpage

Acknowledgement

This repo is adapted from webrtc-firebase-demo and JavaScript Sensor Access Demo