Forem: Ian Iversen

Posting Audio Recordings to Your Web App Database as Blob Datatypes

Ian Iversen — Tue, 04 Oct 2022 16:18:48 +0000

The goal is to receive audio from the users microphone to and store that audio on a database. To do this, we first need to ask the user, in their browser if we can use their microphone.

const [trackOne, setTrackOne] = useState(
    {
      isRecording: false,
      blobURL: '',
      isBlocked: false,
    })

  // one time check for mic permissions
  useEffect(() => {
    navigator.getUserMedia({ audio: true },
      () => {
        console.log('Permission Granted');
        setTrackOne({ isBlocked: false });
      },
      () => {
        console.log('Permission Denied');
        setTrackOne({ isBlocked: true })
      },
    );

  }, [])

Once permission is granted, a function can be called to start the recording.

  const startOne = (e) => {
    if (trackOne.isBlocked) {
      console.log('Permission Denied');
    } else {
      Mp3Recorder
        .start()
        .then(() => {
          setTrackOne({ isRecording: true });
        }).catch((e) => console.error(e));
    }
  };

In order to stop the recording a function must be called that stops the recording.

const stopOne = () => {
    Mp3Recorder
      .stop()
      .getMp3()
      .then(([buffer, blob]) => {
        const file = new File(buffer, 'track-one.mp3', {
          type: audioType
        })
        setAudioData(file)
        const blobURL = URL.createObjectURL(blob)
        setTrackOne({ blobURL, isRecording: false })
      })
  }

Then a useEffect can be used to post the data whenever the stop button is clicked.

const formData = new FormData()
  formData.append('audio_data', audioData)

  useEffect(()=>{
    fetch('/tracks', {
      method: 'POST',
      body: formData,
    })
    .then((r) => {
      if (r.ok) {
        fetch('/tracks')
        .then(r => r.json())
        .then(data => setAllTracks(data))
      }
    })
  }, [audioData])

The included fetch GET request at the end is to immediately render the new track.

libraries involved:
import MicRecorder from 'mic-recorder-to-mp3';

important
A bit rate must be set in your audio recording component
const Mp3Recorder = new MicRecorder({ bitRate: 128 });

The Blob Data Type

Ian Iversen — Mon, 12 Sep 2022 16:09:59 +0000

There are varying data types that exist in the world of programming. Common data types include: strings, integers, floats, characters, booleans. All of these data types can be used along with tables and data to create rich and expressive databases for web apps. But what can developers do if they would like to use images, video, or audio?

ENTER type:blob

A blob data type is used for storing information in databases just like a string or an integer. However, blobs can store binary data which allows for the storage of files. Images, videos and audio can then be stored in databases as blobs.

The term "blob" actually stands for "Binary Large Object" and is used for storing information, as binary, in databases.

Through the use of blobs, common social media features such as photo albums can be constructed where a photo album table would contain photos:blob and photo_caption:string.

Because blobs are used to store objects such as images, audio files, and video clips, they often require significantly more space than other data types. The amount of data a blob can store varies depending on the database type, but some databases allow blob sizes of several gigabytes.

Example

{
  "data" : {
    "image": "/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2===",
  },
  "time": <Optional Timestamp>,
  "flowVersion": <Optional Workflow Version Name>
}

How to record and play audio in JavaScript:

https://medium.com/@bryanjenningz/how-to-record-and-play-audio-in-javascript-faa1b2b3e49b

How can I get the blob file (i.e recorder voice) to send the server:

https://github.com/mattdiamond/Recorderjs/issues/188

Sources:
https://techterms.com/definition/blob
https://en.wikipedia.org/wiki/Binary_large_object
https://docs.losant.com/devices/blobs/

JavaScript Full-Stack

Ian Iversen — Mon, 22 Aug 2022 12:16:55 +0000

So... you know how to program your backend using Ruby and SQL. Is there any other way to build a backend? There certainly is!

In this blog post I will explore, MERN, a web development stack that only requires knowledge of Javascript and JSON.

What is MERN?

MERN is an acronym that stands for mongoDB, Express.js, React, and Node.js. In other words--the database, the backend framework, the frontend library and the runtime environment.

How does MERN work?

To understand how MERN works, we must take a more in depth look at each MERN element. Let's move through MERN back to front.

Node.js

First comes Node.js, without it, JavaScript would only be allowed to run in the browser. Node allows for JS to exist in our files and open-source packages, awaiting the signal to execute.

"Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on a JavaScript Engine and executes JavaScript code outside a web browser, which was designed to build scalable network applications." - Wikipedia https://en.wikipedia.org/wiki/Node.js

where did node come from?

In 2009, software engineer Ryan Dahl took built a runtime environment for JS outside of the browser using C++ and Google's V8 JS engine.

React

Second comes React, a JavaScript library that makes building a modern interactive front end easier. React allows for more dynamic and versatile applications through its ability to control state.

React can be run without Node.js, but if a developer wants to use dependent libraries, or dependencies, they must install them using node.

Express.js

Third: Express.js, which is used as our backend framework. Express.js allows developers to create a fully featured server using JavaScript.

Familiar JS syntax can be used in a developer's code editor.

mongoDB

Finally, we have MongoDB which is MERN's database.

It's a no-sequel and non-relational database. This means that the database is not immediately configured for SQL or strictly predefining datatypes. Mongo is structured using objects with key/value pairs.

The benefits to using MERN are:

Large node ecosystem for open source libraries
Constrains your web app to JS (React front end)
MongoDB essentially uses JSON

Bootstrap: Introduction to the Modern Front-end Framework

Ian Iversen — Tue, 02 Aug 2022 13:47:00 +0000

What is Bootstrap?

Bootstrap is a front-end framework designed to make website development faster and more responsive to a user's device (desktop, tablet, phone).

Bootstrap is a framework built on top of CSS. Although not accurate, I think it is helpful to think of Bootstrap as React for styling--where React makes JavaScript "easier", Bootstrap makes CSS "easier".

Bootstrap began as an internal project at Twitter in 2011, aimed at simplifying design principles on web pages. Over the last decade, the framework has become free and open-source while also growing to be one of the most popular front-end frameworks.

Bootstrap is a framework built on top of CSS.

Cascading Style Sheets (CSS) is what bootstrap is based on, though HTML structure and underlying JavaScript are included in some Bootstrap components.

Though technically CSS provides you with the most flexibility and no installation is required, CSS takes more time to develop web applications.

Bootstrap is quicker to work with, installation is required, but can be avoided with jsDelivr. If you desire, you can have more flexibility by customizing the underlying CSS.

Importing Bootstrap

Developers can install Bootstrap using node in the corresponding project's console window.

npm install bootstrap

Or

Developers can also use jsDelivr to use a cached version of Bootstrap rather than download the framework.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Working with Bootstrap

Bootstrap uses a responsive grid, meaning that components you create will be displayed in somewhat fixed positions. These grids will be effectively re-rendered on other devices in stylistically pleasant ways with little effort required from the developer. This is referred to as the "responsiveness" of Bootstrap. Although you are building your site on a desktop, you can be confident that a mobile user's experience won't be drastically different.

Bootstrap contains pre-packaged HTML components that are immediately ready for use. Buttons, nav-bar, cards, drop-downs, and useful form components are all at the developer's fingertips.

Other great info

Bootstrap works across all modern browsers.
You can use bootstrap only knowing basic HTML and CSS.
Large developer community for documentation and 3rd party themes.
Like react, Bootstrap is actively developed, upgraded, and fixed.

Check Out Bootstrap

https://getbootstrap.com/

Distributed File Storage and Peer-To-Peer Networks

Ian Iversen — Wed, 13 Jul 2022 02:07:51 +0000

The internet is a hyper-connected web of clients and servers. Clients make requests to servers and servers return files, software, data, and applications. However things have evolved quite a bit from the static client/server model. For instance, cloud computing infrastructure accounts for much of the internet’s requests and responses these days. Cloud services like Amazon Web Services (AWS) host massive warehouses filled with servers that can be rented out by users or companies. Companies like Netflix purchase server functionality from AWS, allowing Netflix to only worry about their video content and website design. All of the infrastructure, storage, and hardware concerns are left in the hands of AWS.

Cloud computing has proved itself very useful in the last decade. Netflix is only one of thousands of companies that have built successful businesses using cloud computing. But unfortunately cloud storage can be somewhat centralized. A bad scenario would look like an entire server center getting destroyed, and by extension databases and files can be lost forever. Another bad scenario could be that Amazon, Google, and Facebook know everything about you and they own that information and can do whatever they want with it. Other models have also emerged and evolved over the last two decades, namely the Torrent file sharing protocol.

The Torrent protocol, in simple terms, allows for clients to act as servers. Files stored on local machines can be requested from other local machines. The benefit of this is in the design of the torrent protocol which attempts to speed up the file download time for a user by downloading the file from multiple client machines. This is useful for very large file types and, in theory, distributes information amongst users which can defend against government censorship or corporate ownership of user data. However there aren’t many incentives currently for a person to database information for others without compensation.

Looking into the future, torrenting may rise to more prominence as local storage becomes cheaper and blockchain technology becomes more trusted. There may be a future in which cryptocurrency is rewarded to anyone willing to rent out their free gigabytes of storage to hold encrypted data that can be accessed by anyone in the world. There are many hurdles to this, more than the centralized cloud computing models we have now, but I think it’s a pretty cool thought that your computer storing other peoples data might be able to buy you a free meal once a week.