Music is reading you!

Project Description

My idea of the topic is to make music responds to the environment and human's mood. In this project, I use Photo Resistor and Force Sensitive Resistor to get the light value around and the pressure level people give to the sensor, which means the much more pressure you give to the sensor will trigger exciting music indicating that you are in a high spirit. On the contrary when it is dim around, you just press the sensor a little bit, a piece of soft music will play indicating you want to clam down.

Material used:

● Spark Microcontroller

● Breadboard

● Jumper Wires

● Two 1kΩ Resistor

● Two single color LED (red and green)

● Two 10kΩ Resistor

● A photoresistor

● A forceresistor

The picture below shows the circuit I built.

And below my code written in Spark Dev.

//Define the pin that we'll place photo cell on
int photocellpin = A0;
//Defined the pin that we'll fsr on
int fsrpin = A1;
//Define the pin that red led is on
int ledredpin = D0;
//Define the pin that green led is on
int ledgreenpin = D1;
// Create a variable to store the LED brightness.
int ledredbrightness = 0;
int ledgreenbrightness = 0;

int photocellreading = 0;
// Create a variable to hold the force reading
int fsrreading = 0;


void setup()
{
  //get to know the light value around
  Spark.variable("light", &photocellreading, INT);
  //get to know the force value
  Spark.variable("force", &fsrreading, INT);

  pinMode(photocellpin, INPUT);
  pinMode(ledredpin, OUTPUT);
  pinMode(ledgreenpin, OUTPUT);
}

void loop()
{
   //read photoresistor value
   photocellreading = analogRead(photocellpin);
   //green led brightness
   ledgreenbrightness = 255 - map (photocellreading, 0, 4095, 0, 255);
   //
   analogWrite(ledgreenpin, ledgreenbrightness);

   //read fsr value
   fsrreading = analogRead(fsrpin);
   ledredbrightness = map (fsrreading, 0, 4095, 0, 255);

   analogWrite(ledredpin, ledredbrightness);



   //if force value > 1500, then red led blinks 3 times
  if(fsrreading > 1500)
   {
     for(int i=0; i < 2; i++)
     digitalWrite(ledredpin, HIGH);
     delay(500);
     digitalWrite(ledredpin, LOW);
     delay(500);
   }
  

}

Click to Expand

In dim or dark environment, the green led will light with the brightness according to the Photoresistor reading.

When pressing the FSR, the red led will light with the brightness according to the FSR reading, until the force value reach 1500 or more, the red led will blink three times.

FSR control red led to light and to blink 3 times until force value reach at least 1500 from Jodie Wu on Vimeo.

Blow shows the the cloud variables in Spark Dev.

Next, I made webpage using JQuery to make calls directly to the cloud API and my two variables available in the browser.

I use HTML5 audio to add music in the page, and I want the two variables to control the music play.

Here is the html code I have written so far, when the force value reach 1500 or more, the audio will play.

<!DOCTYPE HTML>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
  
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  
    
<body>
    <h1>
    Force Music
</h1>

<p> Here's a song: </p>
<audio id="audio1" controls autoplay>
    <source src="forcemusic/media/song.m4a" type="audio/x-aac" />
    <source src="forcemusic/media/song.mp3" type="audio/mpeg" />
    <source src="forcemusic/media/song.ogg" type="audio/ogg" />
    <p> Your browser does not support the HTML5 audio feature. </p>
</audio>


    
    <h3>Light Levels from Photo Resistor / Photo Cell</h3> <br><br>
	<p>Reads every 5 seconds </p>
    <br><br>
	
	<p>
	  <label for="amountL">Light Levels:</label>
	  <br/>
	  <span id="amountL" ></span>
	</p>

    <br><br>
	
	
	<hr/>
</br>
	
    <h3>Force Levels from FSR </h3> <br><br>
	<p>Reads every 1 seconds </p>
    <br><br>
	
	<p>
	  <label for="amountF">Force Levels:</label>
	  <br/>
	  <span id="amountF" ></span>
	</p>

    <br><br>
	
	
	<hr/>
</br>

	<em>Device ID: </em><input type="text" id="deviceIDInput" onKeyUp="return handleDeviceIDChange()" ></input>
	<br/>
	<em>Access Token: </em><input type="text" id="accessTokenInput" onKeyUp="return handleAccessTokenChange()" ></input>
	<br/>



    <script type="text/javascript">
      var deviceID    = "<< device id >>";
      var accessToken = "<< access token >>";
	  
      var getL = "light";
	  $( document ).ready(function() {
	      $("#deviceIDInput").val(  deviceID );
	      $("#accessTokenInput").val(  accessToken );
	  });
	  
	  
	  window.setInterval(function() {
	          requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + getL + "/?access_token=" + accessToken;
	          $.getJSON(requestURL, function(json) {
	                   document.getElementById("amountL").innerHTML = json.result + " ";
	                   document.getElementById("amountL").style.fontSize = "28px";
                  
                   
				   });
	        }, 5000);
       
        
        var getF = "Force";
	  $( document ).ready(function() {
	      $("#deviceIDInput").val(  deviceID );
	      $("#accessTokenInput").val(  accessToken );
	  });
	  
	  
	  window.setInterval(function() {
	          requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + getF + "/?access_token=" + accessToken;
	          $.getJSON(requestURL, function(json) {
	                   document.getElementById("amountF").innerHTML = json.result + " ";
	                   document.getElementById("amountF").style.fontSize = "28px";
                  
                  if(json.result > 1500){
                            audio1.play();
                        }
                  
				   });
	        }, 1000);
        
	  function handleDeviceIDChange(){
		  deviceID = $("#deviceIDInput").val().trim();
		  return ;
	  }
	  function handleAccessTokenChange(){
		  accessToken = $("#accessTokenInput").val().trim();
		  return ;
	  }
     
    </script>


</body>
</html>

Click to Expand

Force control music play from Jodie Wu on Vimeo.

Next I will add more music to the page and make them play at different force value.

Start the Conversation

Share this Project

About

Right type of music playing according to the light of environment and the pressure level people give to the sensor.

Connected sensor platform

Start the Conversation

Share this Project

About