• Dear Cerberus X User!

    As we prepare to transition the forum ownership from Mike to Phil (TripleHead GmbH), we need your explicit consent to transfer your user data in accordance with our amended Terms and Rules in order to be compliant with data protection laws.

    Important: If you accept the amended Terms and Rules, you agree to the transfer of your user data to the future forum owner!

    Please read the new Terms and Rules below, check the box to agree, and click "Accept" to continue enjoying your Cerberus X Forum experience. The deadline for consent is April 5, 2024.

    Do not accept the amended Terms and Rules if you do not wish your personal data to be transferred to the future forum owner!

    Accepting ensures:

    - Continued access to your account with a short break for the actual transfer.

    - Retention of your data under the same terms.

    Without consent:

    - You don't have further access to your forum user account.

    - Your account and personal data will be deleted after April 5, 2024.

    - Public posts remain, but usernames indicating real identity will be anonymized. If you disagree with a fictitious name you have the option to contact us so we can find a name that is acceptable to you.

    We hope to keep you in our community and see you on the forum soon!

    All the best

    Your Cerberus X Team

A sound idea!

Wingnut

Well-known member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
1,414
I'm trying to understand how to make a sound through a oscilloscope using CX. I'm a simple web programmer though so can someone guide me how to make something like this into CX please?

Here's a screenshot :

osc screenshot.png


If you want a live demonstration you can put this into a textfile and rename to runme.html

Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<canvas width="512" height="256" id="canvas"></canvas>
<script>

let audioContext;
let analyser;
let canvas;
let canvasContext;

let constraints = { audio: true };
navigator.mediaDevices.
getUserMedia(constraints).
then(stream => {
  initAudio(stream);
  initGraphics();
  startDrawing();
}).catch(err => {
  console.log(err);
});

function initAudio(stream) {
  audioContext = new (window.AudioContext || window.webkitAudioContext)();
  let mediaStreamSource = audioContext.createMediaStreamSource(stream);
  analyser = audioContext.createAnalyser();
  analyser.smoothingTimeConstant = 0.9;
  mediaStreamSource.connect(analyser);
}

function initGraphics() {
  canvas = document.getElementById("canvas");
  canvasContext = canvas.getContext("2d");
}

function startDrawing() {
  analyser.fftSize = 1024;
  let bufferLength = analyser.frequencyBinCount;
  let dataArray = new Uint8Array(bufferLength);
  canvasContext.lineWidth = 2;

  function draw() {
    canvasContext.clearRect(0, 0, canvas.width, canvas.height);
    requestAnimationFrame(draw);
    analyser.getByteTimeDomainData(dataArray);
    canvasContext.beginPath();
    for (let x = 0; x < bufferLength; x++) {
      let y = 255 - dataArray[x];
      canvasContext.lineTo(x, y);
    }
    canvasContext.closePath();
    canvasContext.stroke();
  }
  draw();
}

</script>
</body>
</html>
 
Thanks, I'll take a look! You can do as complex sound as you wish on the fly with JavaScript, There might still be some kind of (low) latency of course, you could not easily create online professional music software just yet but it's getting there. Very inspirational.
 
Back
Top Bottom