Javascript: Frequenz von Live Audio ermitteln?

Ich würde gerne mit Javascript die Frequenz eines Live Audios(Also von dem Wie es gerade ist) ausgeben. Wie könnte ich das machen?

Ich weiß weder wie Mal das Live audio, noch die Auswertung umsetzten soll.

MfG, Bohne47

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Technik, IT, Webentwicklung

24.11.2023, 23:11

Das was du möchtest und vorhast, sollte sich mithilfe der Web Audio API und einem <canvas> Element relativ zügig umsetzen lassen. Du nimmst ein Audioquelle (Datei oder Input) und zeichnest dann mit JavaScript und der API die Daten in dein Canvas.

LG medmonk

Woher ich das weiß:Berufserfahrung – Full-Stack Developer

Ähnliche Beiträge

Wie erkennt die Frequenz eines Audios auf einem ESP32 mit Micropython?

Für einen Schulprojekt muss ich mit einem ESP32 die Note eines einzelnen Tons erkennen und auf das Display des ESP32 chips ausgeben können (Bsp: Die gespielte Note war ein c).

Da der ESP32 nicht über ein Mikrophon verfügt, muss ich mit einem Mikrophon den Ton aufnehmen und den an den ESP32 weitergeben, der dann die Frequenz des Tons bestimmen und zu einer Note zuordnen soll.

Ich habe sehr wenig Programmierkenntnsse und habe keine Ahnung was ich zusätzlich noch runterladen muss, um die Frequenz eines einzelnen Tons mit Microython zu bestimmen, oder wie ich die Information des Mikrophons an den ESP32 weitergeben kann. Könnte mir vielleicht jemand helfen?

...zum Beitrag

Wie kann ich mit JavaScript ALLE aktuell laufenden Geräusche beenden?

Wenn eine neue Audio startet sollen erst alle noch laufenden Audios beendet werden, damit man immer nur eine hört und nicht mehrere. Mein Code sieht zurzeit so aus:

function play1() {
    var audio = new Audio('Music/1.mp3');
    audio.play();
    audio.addEventListener('ended', (event) => {
        play2();
    });
}

function play2() {
    var audio = new Audio('../002/Music/1.mp3');
    audio.play();
    audio.addEventListener('ended', (event) => {
    });
}

und es gibt jeweils 1 Knopf für play1 und play2 zum starten.

...zum Beitrag

Api's kostenlos?

Ich bin Programmierer und brauche oft API's weil ich aber kein Geld bezahlen will brauche ich eine Webseite ein Programm oder eine App.

...zum Beitrag

Google Reviews API Kosten?

Ich verstehe nicht ganz, wie das Google Developer Portal funktioniert. Also die ganzen APIs kosten da Geld pro Request, aber ich glaube, ich bekomme pro Monat $200 kostenlos Guthaben?

Stimmt das mit den $200 gratis und muss ich eine Kreditkarte hinterlegen? Weil ich zurzeit nur PayPal habe. Von mir aus kann es nach dem Guthaben aufhören zu funktionieren; nach Prepaid-Prinzip, falls da tausende Anfragen von Bots kommen.
Wie viel Geld/Cents kostet so ein Request bzw. wie viele sind möglich mit diesen $200? Ich habe pro Monat vielleicht 1000 Besucher auf der Seite, die ich von WordPress auf Next.js wegen Performance/Speed-Problemen nachbauen möchte und weil es der Kunde nicht wie gedacht als CMS nutzt und mich immer beauftragt, Texte zu ändern. WordPress und Elementor gehen mir auf die Nerven.

...zum Beitrag

Wie bekomme ich mit "js" alle Elemente/Klassen eines Dokuments?

Frage steht im Titel. Mehr gibts dazu erstmal nicht zu sagen.

...zum Beitrag

Als Anfänger Chat-App programmieren aka (Facebook)?

Eigentlich wollte ich eine vereinfachte Uber-App versuchen nachzubauen, habe aber in der ersten Frage viele Antworten bekommen, dass es zu schwer für einen Anfänger ist und z.B. eine Chat-App etwas einfacher wäre.

Deswegen will ich in drei Monaten mein erstes großes Projekt anfangen zu bauen und zwar so eine Chat-App, wo man mit Freunden schreiben und Fotos teilen kann. Also so eine Art Facebook (aber sehr sehr vereinfacht!).

Ich habe gestern auch den Film "The Social Network" nochmal geguckt und jetzt will ich noch mehr die App bauen.

Jetzt die Frage: Hat jemand schon von euch Erfahrung mit einer Chat-App?

Was müsste ich alles wissen (Webentwicklung)?

Und wie viele Stunden brauche ich circa für die einzelnen Themen, um sich an dieses Projekt zu trauen?

Ich finde, dass man beim Learning-by-doing sehr gut lernt und deswegen will ich auch nicht nur lernen, sondern einfach versuchen, auch etwas zu bauen und wenn ich nicht weiterkomme, dann kurz nachschauen, versuchen zu verstehen und zu lernen, was ich machen muss und dann umsetzen, usw..

Auch wenn es ein mega Fail und die App am Ende nicht gut wird, habe ich trotzdem dann viel gelernt und werde es beim nächsten Mal besser machen.

Also zwei Fragen: Was müsste ich alles dafür können und wie viele Stunden Lernzeit ungefähr braucht man dafür, um damit anfangen zu können?

...zum Beitrag

Temperatur in Webseite einbauen?

Hallo,

wie kann man die Temperatur vom aktuellen Standort in eine Webseite einbauen ohne einen API Schlüssel oder ähnliches zu verwenden?

Freundliche Grüsse

...zum Beitrag

Warum gibt es nichts anderes als JavaScript im Browser Frontend?

Es gibt Dart-Flutter, C#-Blazor soweit ich weiß, aber ich nehme an, es ist nur JavaScript unter der Haube.

Ähnlich wie, wenn man React Native Code schreibt, wird es in die native mobile Sprache umgewandelt => Kotlin, Swift etc..

Weil soweit ich weiß, versteht der Browser nichts anderes als HTML, CSS und JavaScript.

Es gibt da nur die V8-Engine / andere JavaScript-Engines.

Aber warum?

Wieso ist es nicht theoretisch möglich, einfach mit einer neuen Sprache die für cross platform entwickelt wurde, einen onclick-Event Listener zu nutzen?

In einer ganz eigenen Engine.

Heißt nicht, das sie JavaScript irgendetwas die nächsten 5 Jahre streitig machen könnte, aber wenn diese Sprache direkt Typisierung unterstützen würde, ohne TypeScript und auch noch für andere Dinge besser geeignet wäre als JavaScript (wurde halt nicht dafür designed, ganz egal ob Electron, Native existiert) wie Desktopanwendungen, Mobil, etc..

PHP nehme ich erst garnicht auf, das macht alleine gar nichts im Frontend, ist eine Backendsprache und alleine sinnlos auf Websites, bis auf bisschen HTML generieren, das auch nur vom Server kommt.

Klar, wenn du ewig lange Weiterleitungen willst, die furchtbar sind und überhaupt nicht interaktive Websites, dich auf Formulare beschränkst, dann kriegst du das auch ohne JavaScript hin, etwas Schreckliches zu programmieren.

Mit WebAssembly kenne ich mich gar nicht aus. Ob da Event Listener, usw. möglich sind. Aber alleine von der Einstiegshürde und Komplexität die ich höre, ist das keine Alternative.

Assembly ist auch keine Alternative zu C++. Dafür gibt es Rust.

...zum Beitrag

Zufalls auswahl aus liste mit html und javascript?

Wie kann ich folgendenes machen?

Eine Liste mit Aufgaben und durch drücken auf ein Button wird dan eine Sache aus der Liste angezeigt.

...zum Beitrag

Html css und php zusammen?

Hi ich bin dabei eine Seite zu erstellen und habe grade das login und registrations design mit Css und Html fertig gestellt. Nun bräuchte ich noch eine art system dahinter. Ich habe geschaut und denke man nutzt Php für dieses System mit Datenbank etc. Nun meine Frage: Kann ich ein Php login system mit meiner html css login seite kombinieren? oder ist das nicht möglich? Sorry wenn die Frage dumm ist :/

...zum Beitrag

Google Page Speed Webseite verwendet veraltete APIs?

Ich habe eine React Webseite und bekomme die Daten per API von Strapi. Ich habe meine Webseite mit Google Page Speed analysiert und bekomme die Meldung: Verwendet veraltete APIs. Wie kann ich dies ändern?

...zum Beitrag

Wo bekomme ich eine DSGVO-konforme API als Alternative zu OpenAI?

Es darf gerne etwas teurer sein als die API-Verwendung von OpenAI, sollte allerdings nicht das 50-fache sein.

...zum Beitrag

NextJS Server Component aktualisiert API-Daten nicht?

Hey Leute,

ich bin relativ neu in NextJS (nutze den AppRouter) und habe aktuell folgendes Problem:

Überblick:
Ich habe ein Server Component, welches eine Liste von Items darstellen soll, diese Items weden mit axios von einem externen Backend geladen.
Zudem habe ich noch ein Formular (auf einer anderen Seite), mit welchem ich neue Items hinzufügen kann.

Problem:
Wenn ich ein neues Item hinzufügen (egal ob über das Formular oder direkt in der Datenbank) und dann auf die Seite mit der Liste navigiere (oder umgeleitet werde), sehe ich die neuen Items nicht.
Ich muss zuerst einen vollständigen Reload über den Browser durchführen, damit die neuen Daten aus dem Backend geladen werden.

Meine Frage:
Bin ich zu doof das Server Component korrekt zu benutzen oder ist es einfach falsch, für ein solches Szenario Server Components zu nutzen und ich sollte einfach Client Components nutzen.

Relevanter Code:

const client = axios.create({
  baseURL: "http://localhost:9999"
})

async function getItems(): Promise<Item[]> {
  return client.get("/items")
    .then(response => response.data.items)
    .catch(error => {
      console.log(error);
    });
}

const ItemsList: FC = async () => {
  const items = await getItems();

  return (
    <>
      // rendering list
    </>
  );
};

export default ItemsList;

Mfg Jannick (L1nd)

...zum Beitrag

JavaScript Daten von API abfragen?

Ich habe ein JavaScript Script, in dem ich ganz am Anfang einer Variable die Daten von einem API Request zuweisen muss. Die Daten sollen also in der Variable gespeichert werden und dann der restliche Code ausgeführt werden. Ich möchte, dass die Zuweisung so aussieht:

let data = loadData() | {/*default json*/}

Die Daten müssen da sein bevor der restliche Code ausgeführt wird, da ich sie in einer funktion im onload teil brauche.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen