Published March 5, 2020 © LGPL

Volume Control System

This project is to regulate the intensity of the sound. When we require high sound we can increase the intensity and vice versa

BeginnerFull instructions provided1 hour414

Things used in this project

Hardware components

Bolt IoT Bolt WiFi Module

Buzzer

Jumper wires (generic)

Solderless Breadboard Half Size

USB-A to Mini-USB Cable

Software apps and online services

Bolt IoT Bolt Cloud

Bolt IoT Android App

Story

A VolumeControlSystem does just that. Using a Volume Control System, we can adjust the loudness of sound based on our requirement. A Volume Control System is used or integrated with a variety of hardware and software applications including, but not limited to, loudspeakers, amplifiers, headphones, televisions, mobile phones, etc.

Project Details:

The user interface of the project is a web page, which can be accessed through a web browser on a desktop/laptop, or the Bolt Mobile App on an Android or iOS mobile phone.

In the web page, there is a slider and an OFF button.

With the help of Slider we can adjust the intensity of the sound and OFF button is used to Off the sound.

However, it is to be noted that once you reach the maximum amount of API requests, the Buzzer will stop working. Bolt Cloud services a limited number of API requests for each user in a specific period of time.If the user keeps on adjusting the slider or clicking the OFF button, they will exceed their API request quota and will be temporarily blocked from sending further requests.

Steps to follow:

ForBuzzer:

Place the buzzer on the bread board. Connect the Positive leg(longer edge) of the buzzer to the 0 pin of bolt module.
Connect the negative leg(shorter edge) of the buzzer to GND of bolt module.
Connect the mini-USB male port of the USB cable to mini-USB female socket of the Bolt Wifi module. Connect the other end of the USB cable, i.e, the USB-A male port to a desktop/laptop or a USB-A to Socket adapter.

Setup Bolt Cloud:

Visit cloud.boltiot.com and log in to Bolt Cloud using your credentials.

You should be directed to the Device page. This page will list all the available devices connected to your Bolt Cloud account and will also indicate whether they are Online.

Go the Products tab by clicking on the Products icon on the left-hand side of the web page. This page will list all the available Products that you have made on the Bolt Cloud, if any.

Click on the Add Product button to create a new Product. This will open a Product creation menu.

You need to select output device as buzzer is an output device and should give the product name and click o done button.

You should be now in your Product's page. Click on the Link icon near the top-right side of the page
Now, click on the configure icon near the top-right side of the page

Since we are not taking any input from the Buzzer as it is an output device, we do not need to assign variables to any pin in the Bolt Wifi Module. Click on the Code button on the top of the page.

Now you are on the code.In this we write code for the project by selecting extension as html and choose the file name as your wish.

Save the code and exit from it.
You should be now in your Product's page. Click on the Link icon near the top-right side of the page

A dialog box will appear listing all the Bolt devices connected to your Bolt Cloud account. Select the device of your choice to link the Product to your hardware

Now click on view this device to open a web page where we can operate the sound.

Output Looks Like:

Code

Buzzer

<!DOCTYPE html>
<html>
    <head>
        <title>Volume Control System</title>
        <script type="text/javascript" src="https://cloud.boltiot.com/static/js/boltCommands.js"></script>
        <script>
        setKey('{{ApiKey}}','{{Name}}');
        </script>
    </head>
    <body bgcolor="#1BEDF3" text="000000">
        <center>
           <h1><b><u>Volume Control System</u></b></h1>
           <div><button class="button buttonoff" onclick="digitalWrite(0, 'LOW');">OFF</button></div>
           <div><input class="slider" type="range" min="0" max="255" value="0" onchange="analogWrite(0,this.value);
           console.log('this.value');"></div>
           <style type="text/css">
            .button 
          {
               border: 2px solid #000000;
               color: white;
               padding: 40px;
               text-align: center;
               text-decoration: none;
               display: inline-block;
               font-size: 40px;
               font-family: Arial, Helvetica, sans-serif;
               box-shadow: 1px 1px 6px 0px black;
          }
             .buttonoff 
          {
               background-color: #E92C49;
               position: absolute;
               border-radius: 50%;
               top: 15%;
               left:45%;
          }
            .buttonoff:hover 
          {
               background-color: #B7031E
          }
           .buttonoff:active 
          {
               background-color: #B7031E;
               box-shadow: 0 5px #666;
               transform: translateY(4px);
          }
           .slider 
          {
               -webkit-appearance: none;
               width: 50%;
               height: 15px;
               border-radius: 5px;
               background: #4CAF50;
               outline: none;
               opacity: 0.7;
               -webkit-transition: .2s;
               transition: opacity .2s;
          }
           .slider:hover 
          {
               opacity: 1;
          }
           .slider::-webkit-slider-thumb 
          {
               -webkit-appearance: none;
               appearance: none;
               width: 25px;
               height: 25px;
               border-radius: 50%;
               background: #E54F40;
               cursor: pointer;
          }
           .slider::-moz-range-thumb 
          {
               width: 25px;
               height: 25px;
               border-radius: 50%;
               background: #E54F40;
               cursor: pointer;
          }
           </style>
        </center>
    </body>
</html>

Credits

Gutti Indu Priya

2 projects • 3 followers

Volume Control System

Things used in this project

Hardware components

Software apps and online services

Story

Project Details:

Steps to follow:

Setup Bolt Cloud:

Schematics

Schematic

Code

Buzzer

Credits

Gutti Indu Priya

Comments

Embed the widget on your own site

Volume Control System

Volume Control System

Things used in this project

Hardware components

Software apps and online services

Story

Project Details:

Steps to follow:

Setup Bolt Cloud:

Schematics

Schematic

Code

Buzzer

Credits

Gutti Indu Priya

Comments

Related channels and tags