{"id":28340,"date":"2022-03-23T22:02:00","date_gmt":"2022-03-23T22:02:00","guid":{"rendered":"http:\/\/Building-a-Virtual-Beat-Box-in-Redwood"},"modified":"2022-03-23T22:02:00","modified_gmt":"2022-03-23T22:02:00","slug":"building-a-virtual-beat-box-in-redwood","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/","title":{"rendered":"Building a Virtual Beat Box in Redwood"},"content":{"rendered":"

Sometimes you don\u2019t need to make a serious app to practice your JavaScript skills. We\u2019re going to play with a full-stack music app! It\u2019ll be a virtual beat box that you can make music with and store it in a database.<\/p>\n

Setting up the app<\/h2>\n

We\u2019ll just jump in and start building the Redwood app because it has integrations to make it easier to set up the front-end and back-end. So in a terminal, run this command:<\/p>\n

yarn create redwood-app virtual-music-box\n<\/code><\/span><\/pre>\n
This generates a new Redwood project with a lot of new files and directories for us and we\u2019ll be focused on the web<\/code> and api<\/code> directories. The web<\/code> directory will hold all of the front-end code, which we\u2019ll get to a little later. The api<\/code> directory contains all of the back-end code.<\/p>\n
To get started, let\u2019s write the back-end code.<\/p>\n
Building the back-end<\/h2>\n
Redwood uses GraphQL to handle the back-end and Prisma to work with the database. We\u2019ll start by setting up a local Postgres instance. If you don\u2019t have Postgres installed, you can download it here<\/a>.<\/p>\n
Now you\u2019re going to add a new file to the root of the project called .env<\/code>. Inside that file, you\u2019ll need to add the connection string for your Postgres instance. It should look similar to this:<\/p>\n
DATABASE_URL=postgres:\/\/postgres:admin@localhost:5432\/mixes<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With this connection string in place, let\u2019s move to the schema.prisma<\/code> file in the api > db<\/code> directory. This is where you can add the models for your database. In this file, you\u2019ll see a provider<\/code> with sqlite<\/code> as the value. We\u2019re going to update that to postgresql<\/code> like this:<\/p>\n
datasource db {\n  provider = \"postgresql\"<\/span>\n  url      = env(\"DATABASE_URL\"<\/span>)\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is where we connect to the database using the connection string in that .env<\/code> file we made. Next, we\u2019ll add a model to hold the music we make.<\/p>\n
Making the model<\/h3>\n
You can delete the example model in prisma.schema<\/code> and replace it with this:<\/p>\n
model Mix {\n  id     String<\/span> @id @default<\/span>(cuid())\n  name   String<\/span>\n  sample String<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019re creating a new table called Mix<\/code> that has a cuid<\/code> for the id<\/code>, a name<\/code> for the song, and the sample<\/code> of notes that make up the song. Since we have the model we need in place, we can run a database migration now with this command:<\/p>\n
yarn rw prisma migrate dev\n<\/code><\/span><\/pre>\n
This will create a new database on your local Postgres server and it will create a new migrations<\/code> directory inside api > db<\/code> with the SQL to update the database.<\/p>\n
Creating the GraphQL types and resolvers<\/h3>\n
With the database ready to go, we can start working on the GraphQL server. A cool feature that Redwood has is autogenerating the types and resolvers for the basic CRUD functionality we need to get going. We\u2019ll take advantage of this with the following command:<\/p>\n
yarn rw g sdl mix --crud\n<\/code><\/span><\/pre>\n
This creates the GraphQL types and resolvers we need to create, update, delete, and read mixes we want to work with. If you take a look in api > src > graphql<\/code>, you\u2019ll see a new file called mixes.sdl.ts<\/code>. This has all of the types we need based on the model we created earlier.<\/p>\n
Next, take a look in api > src > services > mixes<\/code>. This holds the file for our resolvers and testing. If you open mixes.ts<\/code>, you\u2019ll see all of the resolvers for create, read, update, and delete functionality already written for us.<\/p>\n
So now we have a fully functional back-end! That means we can switch our focus to the front-end where we actually get to make music.<\/p>\n
Moving to the front-end<\/h2>\n
We have to set up an interface for our users to select notes to play. We\u2019ll use a grid to handle this. There are a few libraries we need to install before we start working on the component.<\/p>\n
In a terminal, go to the web<\/code> directory and run these commands:<\/p>\n
yarn add tone\nyarn add styled-components\n<\/code><\/span><\/pre>\n
The tone<\/code> library is how we\u2019ll add sound to the browser. We\u2019ll use styled-components<\/code> to help make the grid.<\/p>\n
Let\u2019s start by creating a new page in Redwood. In a terminal, go back to the root directory of the project and run this:<\/p>\n
yarn rw g page mixer \/\n<\/code><\/span><\/pre>\n
This will create a new page for the main view of our app. It automatically updates Routes.tsx<\/code> for us and if you take a look in web > src > pages > MixerPage<\/code>, you\u2019ll see the component, a Storybook story, and a unit test. Redwood generates all of this for us from that command above.<\/p>\n
Adding the mixer<\/h3>\n
Go ahead and open MixerPage.tsx<\/code> and delete everything out of it. We\u2019ll be making a completely new component. To start, we\u2019ll add all of the imports we need.<\/p>\n
import<\/span> { useState } from<\/span> 'react'<\/span>\nimport<\/span> { useMutation } from<\/span> '@redwoodjs\/web'<\/span>\nimport<\/span> * as<\/span> Tone from<\/span> 'tone'<\/span>\nimport<\/span> styled from<\/span> 'styled-components'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we can define the MixerPage<\/code> component and a few styled components to get started. We\u2019ll write the code and then walk through it.<\/p>\n
const<\/span> Flex = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n`<\/span>\n\nconst<\/span> Square = styled.div`\n  background-color: #ABABAB;\n  border: 2px solid #313131;\n  height: 250px;\n  width: 250px;\n`<\/span>\n\nconst<\/span> MixerPage = ()<\/span> =><\/span> {\n  const<\/span> notes = ['G3'<\/span>, 'A6'<\/span>, 'C9'<\/span>, 'B5'<\/span>, 'D7'<\/span>, 'F1'<\/span>, 'E8'<\/span>, 'A7'<\/span>, 'G6'<\/span>, 'B1'<\/span>, 'F4'<\/span>, 'C5'<\/span>]\n\n  return<\/span> (\n    <><\/span>\n      <h1<\/span>><\/span>Mixer Page<\/h1<\/span>><\/span>\n      <Flex<\/span>><\/span>\n        {notes.map(note => (\n          <Square<\/span> key<\/span>={note}<\/span> onClick<\/span>={()<\/span> =><\/span> console.log(note)} \/>\n        ))}\n      <\/Flex<\/span>><\/span>\n      <button<\/span> onClick<\/span>={()<\/span> =><\/span> console.log(mix)}>Save Sounds<\/button<\/span>><\/span>\n    <\/><\/span><\/span>\n  )\n}\n\nexport<\/span> default<\/span> MixerPage\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
First, we make a couple of styled components. The Flex<\/code> component is a flexbox we\u2019re able to make the grid shape we need for the beat box. The Square<\/code> component is a colored box that represents a square in our grid.<\/p>\n
Then we define the MixerPage<\/code> component and add the export statement at the bottom of the file. Inside the component, we add a notes<\/code> array that holds the notes we want users to be able to play.<\/p>\n
Next, we add the return statement where we create our grid based on the number of notes in the array. We map over the notes<\/code> array and add an onClick<\/code> callback to work with notes. Then there\u2019s a save button that will eventually connect to the back-end and store all of the beats we make.<\/p>\n
If you run the app with yarn rw dev<\/code>, you should see something like this in your browser.<\/p>\n
\"initial<\/p>\n
Connecting the back-end to save beats<\/h3>\n
There\u2019s one more thing we need to add and that\u2019s the connection to the back-end. We\u2019ll add our GraphQL mutation for saving new beats right below the Square<\/code> styled component.<\/p>\n
const<\/span> CREATE_MIX_MUTATION = gql`\n  mutation CreateMixMutation($input: CreateMixInput!) {\n    createMix(input: $input) {\n      id\n    }\n  }\n`\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Now we can start adding the real functionality to our grid. Inside the MixerPage<\/code> component, add this code above the notes<\/code> array:<\/p>\n
const<\/span> [createMix] = useMutation(CREATE_MIX_MUTATION)\nconst<\/span> [mix, setMix] = useState([])\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This gives us access to the createMix<\/code> mutation defined in the GraphQL resolvers we made earlier. It also creates the mix<\/code> state we\u2019ll use to store the notes on in the database.<\/p>\n
Now we get to do the fun thing and add the sound to our app. Below the mix<\/code> state, add this line:<\/p>\n
const<\/span> mixer = new<\/span> Tone.MembraneSynth().toDestination()\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is how we use the tone<\/code> library to play some kind of sound through our speakers. You can check out some of the others in their docs<\/a>.<\/p>\n
Playing the notes<\/h3>\n
With the mixer<\/code> object ready, we need to add the function that will play the notes when a user clicks on a Square<\/code>.<\/p>\n
const<\/span> playNote = (note<\/span>) =><\/span> {\n  mixer.triggerAttackRelease(note, \"6n\"<\/span>)\n\n  const<\/span> isSet = mix.includes(note)\n\n  if<\/span> (!isSet) {\n    setMix([...mix, note])\n  } else<\/span> {\n    const<\/span> updateMix = mix.filter((mixNote<\/span>) =><\/span> mixNote !== note)\n    setMix(updateMix)\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This playNote<\/code> function takes in a string for the note<\/code> value, which will be the note for the clicked Square<\/code>. Then we use the mixer<\/code> to actually play the sound with the triggerAttackRelease<\/code> method and we pass it the note<\/code> and a string for how we want the note to sound. You can play with this value and see how it changes the sound.<\/p>\n
Next, we do a quick check to see if the note is already in the mix<\/code> state. If it is not in the mix<\/code> state, we\u2019ll update the state. Otherwise, we will filter out the note from the existing state and update the mix<\/code> state.<\/p>\n
The other function we need to make will handle saving the mixes we make.<\/p>\n
const<\/span> saveMix = (mix<\/span>) =><\/span> {\n  const<\/span> input = { name<\/span>: `mix-${mix[0<\/span>]}<\/span>`<\/span>, sample<\/span>: mix.join() }\n  createMix({ variables<\/span>: { input } })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This function takes the mix<\/code> state and creates the input<\/code> value we need to pass to the GraphQL mutation. Then we call the createMix<\/code> mutation with the input<\/code> value and save the mix to the database.<\/p>\n
Now we\u2019re ready to wrap things up by calling these functions in our elements.<\/p>\n
Updating the elements<\/h3>\n
We need to update some props on the Square<\/code> element.<\/p>\n
<Square<\/span> key<\/span>={note}<\/span> selected<\/span>={mix.includes(note)}<\/span> onClick<\/span>={()<\/span> =><\/span> playNote(note)} \/>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We\u2019re using the selected<\/code> prop to update the color of a square. That means we\u2019ll have to make a minor update to the Square<\/code> styled component to take advantage of this prop.<\/p>\n
const<\/span> Square = styled.div`\n  background-color: ${props => props.selected ? '#ABABAB'<\/span> : '#EFEFEF'<\/span>}<\/span>;\n  border: 2px solid #313131;\n  height: 250px;\n  width: 250px;\n`<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now when a note is selected or unselected, the color of the square will update.<\/p>\n
Next, we need to call the saveMix<\/code> function when the button<\/code> is clicked.<\/p>\n
<button<\/span> onClick<\/span>={()<\/span> =><\/span> saveMix(mix)}>Save Sounds<\/button<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
This takes the current mix<\/code> state and passes it to the GraphQL mutation. If you run the app and click a few squares, you should see something like this.<\/p>\n
\"selected<\/p>\n
There\u2019s one more thing we can add to take this app to the next level. We can play specific videos after the mix has been saved.<\/p>\n
Adding media<\/h3>\n
We\u2019ll start by adding an array with links to different videos hosted in Cloudinary. Using Cloudinary just makes it easier to work with media files instead of worrying about hosting them ourselves in AWS or storing things in the database.<\/p>\n
So right under the notes<\/code> array, add the following videos<\/code> array:<\/p>\n
const<\/span> videos = ['https:\/\/res.cloudinary.com\/milecia\/video\/upload\/v1606580790\/elephant_herd.mp4'<\/span>, 'https:\/\/res.cloudinary.com\/milecia\/video\/upload\/v1606580788\/sea-turtle.mp4'<\/span>, 'https:\/\/res.cloudinary.com\/milecia\/video\/upload\/v1625835105\/test0\/tq0ejpc2uz5jakz54dsj.mp4'<\/span>, 'https:\/\/res.cloudinary.com\/milecia\/video\/upload\/v1625799334\/test0\/ebxcgjdw8fvgnj4zdson.mp4'<\/span>]\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Feel free to make your own Cloudinary account<\/a> and use some videos you like!<\/strong><\/p>\n
This has a few video links that we\u2019ll use to display something when a mix has been saved. Now we need to create a new state to store the video source URL for when we get ready to render. You can add this below the mix<\/code> state:<\/p>\n
const<\/span> [video, setVideo] = useState(''<\/span>)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We also need to add a video<\/code> element below the button<\/code> and its source is the video<\/code> state. The video<\/code> element will only display when the video<\/code> state is not an empty string.<\/p>\n
{video !== ''<\/span> &&\n  <video<\/span> src<\/span>={video}<\/span> width<\/span>='480'<\/span> height<\/span>='360'<\/span> controls<\/span>><\/span>\n  <\/video<\/span>><\/span><\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The last bit of code we need is to update the video<\/code> state when we\u2019ve successfully saved a beat. We\u2019ll add this to the saveMix<\/code> method after we call the mutation.<\/p>\n
const<\/span> randomInt = Math<\/span>.floor(Math<\/span>.random() * (videos.length - 1<\/span>))\nsetVideo(videos[randomInt])\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This gets a random video from the array and makes it the video that plays after a successful submission. After you save a mix, you should see something like this in the browser.<\/p>\n
\"video<\/p>\n
Finished code<\/h2>\n
You can take a look at the front-end code in this Code Sandbox<\/a> or you can check out the whole project in the virtual-music-box<\/code> folder of this repo<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Conclusion<\/h2>\n
There are a lot of different ways you can play with Tone.js to improve your apps. You could use it to make things more accessible for users. You can add a different level of entertainment for users that work with your app frequently. Or you can start teaching music theory online.<\/p>\n
Web apps with sound give users a different experience and it\u2019s also fun to work with. Don\u2019t be afraid to try new things! You never know what you might find useful or interesting.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28341,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[389,134,370,177,246,371,303],"class_list":["post-28340","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-audio","tag-guest-post","tag-image","tag-javascript","tag-react","tag-under-review","tag-video"],"acf":[],"yoast_head":"\nBuilding a Virtual Beat Box in Redwood<\/title>\n<meta name=\"description\" content=\"Most of the time the only media types that get attention in web development are videos and images. We're going to make a small app that will let users work with audio in the browser and make their own beats!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Virtual Beat Box in Redwood\" \/>\n<meta property=\"og:description\" content=\"Most of the time the only media types that get attention in web development are videos and images. We're going to make a small app that will let users work with audio in the browser and make their own beats!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T22:02:00+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924759\/Web_Assets\/blog\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Building a Virtual Beat Box in Redwood\",\"datePublished\":\"2022-03-23T22:02:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924759\/Web_Assets\/blog\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec.jpg?_i=AA\",\"keywords\":[\"Audio\",\"Guest Post\",\"Image\",\"Javascript\",\"React\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/\",\"name\":\"Building a Virtual Beat Box in Redwood\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924759\/Web_Assets\/blog\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec.jpg?_i=AA\",\"datePublished\":\"2022-03-23T22:02:00+00:00\",\"description\":\"Most of the time the only media types that get attention in web development are videos and images. We're going to make a small app that will let users work with audio in the browser and make their own beats!\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924759\/Web_Assets\/blog\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924759\/Web_Assets\/blog\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec.jpg?_i=AA\",\"width\":7952,\"height\":5304},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Virtual Beat Box in Redwood\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a Virtual Beat Box in Redwood","description":"Most of the time the only media types that get attention in web development are videos and images. We're going to make a small app that will let users work with audio in the browser and make their own beats!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/","og_locale":"en_US","og_type":"article","og_title":"Building a Virtual Beat Box in Redwood","og_description":"Most of the time the only media types that get attention in web development are videos and images. We're going to make a small app that will let users work with audio in the browser and make their own beats!","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-23T22:02:00+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924759\/Web_Assets\/blog\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/"},"author":{"name":"","@id":""},"headline":"Building a Virtual Beat Box in Redwood","datePublished":"2022-03-23T22:02:00+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924759\/Web_Assets\/blog\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec.jpg?_i=AA","keywords":["Audio","Guest Post","Image","Javascript","React","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/","name":"Building a Virtual Beat Box in Redwood","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924759\/Web_Assets\/blog\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec.jpg?_i=AA","datePublished":"2022-03-23T22:02:00+00:00","description":"Most of the time the only media types that get attention in web development are videos and images. We're going to make a small app that will let users work with audio in the browser and make their own beats!","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924759\/Web_Assets\/blog\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924759\/Web_Assets\/blog\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec.jpg?_i=AA","width":7952,"height":5304},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-virtual-beat-box-in-redwood\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a Virtual Beat Box in Redwood"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924759\/Web_Assets\/blog\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec\/64a0e14dd2b637e55c2784dcc52a2885c64920b4-7952x5304-1_28341abeec.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28340"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28340\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28341"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}