How to record system/website audio using JavaScript?

Question

I made a simple online drumkit and guitar player, and now I want to add a feature on my website to record whatever I play and download it. I want the code to be simple and also in JavaScript as I am new in web development and all I know is HTML CSS and JavaScript and some other things.

I tried to get some help online but all they show is how to use microphone and record the audio from the user instead of the system. That's why I came here.

<!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");
}

.d {
  background-image: url("images/tom4.png");
}

.j {
  background-image: url("images/snare.png");
}

.k {
  background-image: url("images/crash.png");
}

.l {
  background-image: url("images/kick.png");
}

.set {
  margin: 10% auto;
}

.pressed {
  box-shadow: 0 3px 4px 0 #DBEDF3;
  opacity: 0.5;
}

.red {
  color: red;
}

.drum {
  outline: none;
  border: 10px solid #404B69;
  font-size: 5rem;
  font-family: 'Arvo', cursive;
  line-height: 2;
  font-weight: 900;
  color: #DA0463;
  text-shadow: 3px 0 #DBEDF3;
  border-radius: 15px;
  display: inline-block;
  width: 150px;
  height: 150px;
  text-align: center;
  margin: 10px;
  background-color: white;
}

var numberOfDrumButtons = document.querySelectorAll(".drum").length;

for (var i = 0; i < numberOfDrumButtons; i++) {

  document.querySelectorAll(".drum")[i].addEventListener("click", function() {

    var buttonInnerHTML = this.innerHTML;

    makeSound(buttonInnerHTML);

    buttonAnimation(buttonInnerHTML);

  });

}

document.addEventListener("keypress", function(event) {

  makeSound(event.key);

  buttonAnimation(event.key);

});


function makeSound(key) {

  switch (key) {
    case "w":
      var tom1 = new Audio("sounds/tom-1.mp3");
      tom1.play();
      break;

    case "a":
      var tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;

    case "s":
      var tom3 = new Audio('sounds/tom-3.mp3');
      tom3.play();
      break;

    case "d":
      var tom4 = new Audio('sounds/tom-4.mp3');
      tom4.play();
      break;

    case "j":
      var snare = new Audio('sounds/snare.mp3');
      snare.play();
      break;

    case "k":
      var crash = new Audio('sounds/crash.mp3');
      crash.play();
      break;

    case "l":
      var kick = new Audio('sounds/kick-bass.mp3');
      kick.play();
      break;


    default: console.log(key);

  }
}


function buttonAnimation(currentKey) {

  var activeButton = document.querySelector("." + currentKey);

  activeButton.classList.add("pressed");

  setTimeout(function() {
    activeButton.classList.remove("pressed");
  }, 100);

}

Do you really create a new audio element each time a key is pressed or have I misunderstood? — A Haworth, Jul 25 '23 at 21:50
no new audio is created, its just played from the audio saved before.I just want to record those when played together. — Manas MJ, Jul 25 '23 at 22:03
I didn’t think you were creating new audio, what I asked was are you really creating a new audio element each time? — A Haworth, Jul 26 '23 at 10:24

score 0 · Answer 1 · answered Jul 25 '23 at 22:04

You probably need to update your implementation to use the Web Audio API.

You can load / play audio files like this:

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();
});

Then, you need to use MediaRecorder to download it. You can see an example about this here: Record sound of a webaudio api's audio context

Here you can see a small project I built using the Web Audio API (similar to yours), but it doesn't support recording / downloading yet:

How to record system/website audio using JavaScript?

1 Answers1