What is the approach for capturing system or website sound using JavaScript?

After creating an online drumkit and guitar player, I am now looking to enhance my website by adding a feature that allows users to record their sessions and download them. Since I am new to web development and familiar only with HTML, CSS, JavaScript, and some other basics, I need the code to be simple and written in JavaScript.

I have tried seeking help online, but most tutorials focus on using the microphone to record audio from the user rather than from the system itself. That's why I have turned to this platform for assistance.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Drum Kit</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>

<body>
  <h1 id="title">Drum 🥁 Kit</h1>
  <div class="set">
    <button class="w drum">w</button>
    <button class="a drum">a</button>
    <button class="s drum">s</button>
    <button class="d drum">d</button>
    <button class="j drum">j</button>
    <button class="k drum">k</button>
    <button class="l drum">l</button>
  </div>


<script src="index.js" charset="utf-8"></script>

<footer>
  Made with ❤️ by MJ.
</footer>
</body>
</html>

body {
  text-align: center;
  background-color: #283149;
}

h1 {
  font-size: 5rem;
  color: #DBEDF3;
  font-family: "Arvo", cursive;
  text-shadow: 3px 0 #DA0463;

}

footer {
  color: #DBEDF3;
  font-family: sans-serif;
}

.w {
  background-image: url("images/tom1.png");
}

.a {
  background-image: url("images/tom2.png");
}

.s {
  background-image: url("images/tom3.png");
}

... (content continues)
(JavaScript content continues...)

Answer №1

If you want to enhance your implementation, consider utilizing the Web Audio API.

To load and play audio files, you can follow these steps:

const button = document.querySelector('#button');

const context = new AudioContext();

let buffer;

fetch('./audio-file.mp3')
  .then(res => res.arrayBuffer())
  .then(arrayBuffer => context.decodeAudioData(arrayBuffer))
  .then(audioBuffer => {
    buffer = audioBuffer;

    playButton.disabled = false;
    playButton.textContent = '🐴';
  });

button.addEventListener('click', () => {
  const source = context.createBufferSource();

  source.buffer = buffer;
  source.connect(context.destination);
  source.start();
});

After that, utilize the MediaRecorder to download the audio file. For an example, refer to this link: Record sound of a webaudio api's audio context

You may also check out a project I created using the Web Audio API (similar to yours) which currently does not support recording or downloading:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Material-ui v5's DataGrid now includes a new filter icon feature

The current default setting for the new DataGrid is to only display a filter icon when hovering over the column header with an applied filter. In contrast, the previous version had the icon visible at all times. For reference, you can view the Codesandbox ...

What is the best way to zoom in on an image and make it move off the screen as I scroll through my webpage?

I am working on a website design where I would like to implement an image zoom effect as the user scrolls down. Additionally, I want the image to move to either the left or right side of the screen as it goes out of view when scrolling to the bottom. While ...

table with flexible cell width and fixed table width

I've been troubleshooting this issue for days, but I just can't seem to find a solution! The problem lies within a table used on a webpage. If I don't specify table-layout, I can make one cell width dynamic, but I lose the ability to set &a ...

Keeping JSP current with changes made to files on the client side

Currently, I am tackling a project that consists of two main components: a) A Java Application that runs on a client machine. b) A Web Application that is hosted on a web server. The Java Application generates results at random intervals. These results n ...

How to align two <select> elements side by side using Bootstrap

The issue I am encountering is that these two select elements within the same control-group are being displayed vertically when I want them to be displayed horizontally. I attempted using inline-block in CSS, but there are other <div> elements with ...

Transform the query results into clickable links

Is there a way to automatically turn specific results fetched from a MySQL $row into hyperlinks? For example, if I fetch the website Google.com in a search query, is there a method for making it an active hyperlink that goes directly to Google.com when cli ...

Mastering the Art of Accelerating getJSON Array Data

Currently, I am facing a challenge with retrieving a large array (4MB) of data from the server side. I have been utilizing the jQuery getJSON method to obtain the array data and display it on the browser. However, this process has proven to be quite slow ...

How can I change the "Return" button on the iOS keyboard to a "Next" button using jQuery or JavaScript?

Currently, I am developing an HTML application and working on implementing it for IOS devices such as the IPAD. Within my application, there are multiple text boxes. Whenever a user clicks on a text box to input text, the keypad appears. On this keypad, ...

Create an array of routes specifically for private access using Private Route

In my application, I have defined different routes for admins, employees, and clients. Admins can access routes /x, /y, and /z, employees can access routes /a and /b, and everyone including clients can access 4 other routes. I am trying to implement this l ...

Is it necessary to clear out older node.js sessions that are saved in a database?

After incorporating a database session storage for my node application, I noticed that abandoned sessions could potentially linger in the database indefinitely if a user never returns to the application or clears their cookies. Would it be advisable for m ...

Having difficulty arranging the material ui components in a left-to-right alignment

Hello, I need assistance with my bilingual website that supports English and Arabic. I am looking to align the MUI text fields and dropdowns in a right-to-left direction. The labels of the text fields and dropdowns are not styled properly. Currently, I am ...

nodejs - pkg encountered an error: only one entry file or directory should be specified

I am currently facing issues with packing my simple cli node script using pkg. After running the command below: host:~ dev$ pkg /Users/dev/Desktop/myscript/ --target node14-macos-x64 node14-linux-x64 node14-win-x64 I encountered an error in the terminal: ...

Tips for passing multiple values with the same key in Axios as parameters

I need to develop a function that allows users to select multiple categories and subcategories, then send their corresponding ids as a query string using Axios. For example, if a user selects category IDs 1 and 2, along with subcategory IDs 31 and 65, the ...

The conversion of a 2D json array into a string is mistakenly performed

On hand is an outer array that contains 2 arrays within it, making it a 2-dimensional array. This is how the array is initialized: $outerArray = array(); $nestedArray = array("first", "second", "third", "fourth"); $outerArray[] = $nestedArray; $nest ...

Exploring the usage of slots in WebComponents without relying on shadow DOM

I am working on developing a WebComponent without utilizing ShadowDOM. So far, everything has been going smoothly. However, I now aim to create a component that wraps other components similar to how it is done in Angular with @ViewChild / @ViewChildren. (I ...

do not display bullet points

The bullets from the list-style type are not appearing. Despite the CSS code never declaring list-style-type: none, I have specifically declared list-style-type: disc for the section in question. I even checked with Firebug and other tools, and it is evide ...

Dynamic background image changes when checkbox is selected

Greetings! I am a newcomer to the stackoverflow community and I am facing an issue with dynamically changing the background image of my webpage when a checkbox is checked. Here is the HTML code snippet: <ul> <li><label for="Lines">A ...

Delaying CSS Keyframe animations

I'm having trouble getting the color squares in my table to appear one by one. I want each color to show up, then disappear, followed by the next color appearing and disappearing, creating a light sequence effect. Any advice or assistance would be gre ...

The arrows are hidden when using the input type number

On my page, I noticed that the input of type=number is missing its arrows and appears like a regular text input. After doing some investigating, I think it might be due to this: https://i.stack.imgur.com/G1BrV.png My browser of choice is Google Chrome. D ...

Associate the ng-model with ng-options value and label

I'm currently using ng-options to create a select tag that displays location options. The labels represent the location names, while the values indicate the corresponding location ID as stored in the database. In addition to binding the value (locati ...