Alle
HTML5

Wie verwenden Sie die Web-Audio-API, um Soundeffekte und Musik zu Ihren Webseiten und Anwendungen hinzuzufügen?

Bereitgestellt von KI und der LinkedIn Community

Wenn Sie immersive und interaktive Weberlebnisse schaffen möchten, kann das Hinzufügen von Soundeffekten und Musik einen großen Unterschied machen. Aber wie macht man das mit HTML5? Die Antwort ist die Web Audio API, eine leistungsstarke und vielseitige Funktion, mit der Sie Audio in Echtzeit bearbeiten und verarbeiten können. In diesem Artikel erfahren Sie, wie Sie die Web-Audio-API verwenden, um Ihren Webseiten und Anwendungen Soundeffekte und Musik hinzuzufügen.

Top-Expert:innen in diesem Artikel

Von der Community unter 4 Beiträgen ausgewählt. Mehr erfahren

1 Was ist die Web-Audio-API?

Die Web-Audio-API ist eine JavaScript-Schnittstelle, mit der Sie Audioquellen und -effekte im Browser erstellen, ändern und steuern können. Es funktioniert, indem es ein Diagramm von Audioknoten erstellt, jeder mit einer bestimmten Funktion und Ein-/Ausgangsverbindungen. Sie können z. B. einen Quellknoten erstellen, der eine Audiodatei abspielt, einen Gain-Knoten, der die Lautstärke anpasst, und einen Zielknoten, der die Ausgabe an die Lautsprecher sendet. Sie können Knoten auch zum Filtern, Schwenken, Nachhall und mehr verwenden.

Fügen Sie Ihre Sichtweise hinzu

2 Wie erstelle ich einen Audiokontext?

Der erste Schritt zur Verwendung der Webaudio-API besteht darin, einen Audiokontext zu erstellen, bei dem es sich um das Hauptobjekt handelt, das das Audiodiagramm und seine Einstellungen enthält. Sie können einen Audiokontext erstellen, indem Sie den AudioContext-Konstruktor verwenden, der ein optionales options-Objekt als Parameter verwendet. Sie können z. B. die Abtastrate, den Latenzhinweis oder das Ausgabegerät angeben. Der Audiokontext verfügt über Methoden und Eigenschaften, mit denen Sie auf das Audiodiagramm zugreifen und es ändern können, z. B. createNode, connect, disconnect und suspend.

Fügen Sie Ihre Sichtweise hinzu

Sean Alexander

Web Developer
Beitrag melden
To create an audio context, you use the AudioContext() constructor. If your browser supports it, you should always use this constructor, rather than the deprecated webkitAudioContext. You can do so like this: `let audioContext = new AudioContext();` You can also pass in an optional object that holds parameters, like latencyHint, and sampleRate. An example would look like this: `let audioContext = new AudioContext({ latencyHint: 'interactive', sampleRate: 44100 });` Now you're able to use various methods on the 'audioContext' to manipulate the audio graph.

Übersetzt

Gefällt mir

3 Wie lade und spiele ich Audiodateien ab?

Fügen Sie Ihre Sichtweise hinzu

Dacheng Cheng

I bring enthusiasm, energy, and discipline to tackle ambitious projects.
Beitrag melden
Be aware of the audio codecs that your media files were encoded in, as there may be limited support. Your media files are always encoded in some way, such as AAC, and the file is in some sort of format, like MP4. For the best cross-browser/OS/device support, you'll want to have your audio file re-encoded into multiple formats using multiple codecs. With modern browsers, the most reliable audio format is MP3, however it tends to be bigger file size compared to equivalent quality audio in AAC/MP4.

Übersetzt

Gefällt mir

4 Wie füge ich Audioeffekte hinzu?

Um Audioeffekte hinzuzufügen, müssen Sie Knoten erstellen und verbinden, die das Audiosignal in irgendeiner Weise modifizieren. Die Webaudio-API stellt verschiedene Arten von Knoten für gängige Audioeffekte bereit, z. B. Gain, Biquad-Filter, Convolver, Delay, Kompressor und Analyser. Sie können auch eigene benutzerdefinierte Knoten erstellen, indem Sie die AudioWorklet-Schnittstelle verwenden, mit der Sie benutzerdefinierten JavaScript-Code in einem separaten Thread ausführen können. Um einen Effektknoten zu erstellen, müssen Sie die entsprechende Methode des Audiokontexts verwenden, z. B. createGain, createBiquadFilter oder createConvolver. Anschließend müssen Sie den Knoten mit dem Quellknoten und dem Zielknoten oder mit anderen Knoten in der Kette verbinden.

Fügen Sie Ihre Sichtweise hinzu

5 Wie steuere ich die Audiowiedergabe?

Um die Audiowiedergabe zu steuern, müssen Sie die Methoden und Eigenschaften des Quellknotens und des Audiokontexts verwenden. Sie können z. B. die Start-, Stop- und Loop-Eigenschaften des Pufferquellknotens verwenden, um zu steuern, wann und wie der Sound wiedergegeben wird. Sie können auch die currentTime-Eigenschaft und die state-Eigenschaft des Audiokontexts verwenden, um die aktuelle Position und den aktuellen Status des Audiodiagramms abzurufen. Darüber hinaus können Sie die Ereignisse und Rückrufe des Quellknotens und des Audiokontexts verwenden, um Benutzerinteraktionen und Fehler zu behandeln. Sie können z. B. das onended-Ereignis des Quellknotens verwenden, um eine Aktion auszulösen, wenn die Wiedergabe des Sounds beendet ist, oder das onstatechange-Ereignis des Audiokontexts, um zu erkennen, wann das Audiodiagramm angehalten oder fortgesetzt wird.

Fügen Sie Ihre Sichtweise hinzu

Robert Maillet

Manager of IT Systems and Support at TORLYS
Beitrag melden
To quote a famous Uncle: "With great power comes great responsibility". I think there's an opportunity to create some wonderful and creative experiences using sounds on a webapp. I also think that it should be applied sparingly! Personally, any site with auto-play videos or sounds and music that jump out at me before I even started to interact with it lose me. I end up being more focused on either closing the page or trying to find the source of the sound. These things may detract from the main goal of the content being presented.

Übersetzt

Gefällt mir

6 Wie verwende ich die Web-Audio-API mit anderen HTML5-APIs?

Die Webaudio-API kann mit anderen HTML5-APIs verwendet werden, um umfangreiche und interaktive Webanwendungen zu erstellen. Sie können z. B. die Web-MIDI-API verwenden, um MIDI-Geräte wie Keyboards und Synthesizer zu verbinden und zu steuern sowie MIDI-Befehle an oder vom Audiodiagramm zu senden oder zu empfangen. Sie können auch die MediaStream-API verwenden, um Audio vom Mikrofon oder anderen Quellen aufzunehmen und mit der Webaudio-API zu verarbeiten. Darüber hinaus können Sie die Canvas-API oder die WebGL-API verwenden, um Visualisierungen und Animationen basierend auf den Audiodaten zu erstellen, z. B. Wellenformen, Frequenzbalken oder 3D-Formen.

Fügen Sie Ihre Sichtweise hinzu

7 Hier ist, was Sie sonst noch beachten sollten

Dies ist ein Ort, an dem Sie Beispiele, Geschichten oder Erkenntnisse teilen können, die in keinen der vorherigen Abschnitte passen. Was möchten Sie noch hinzufügen?

Fügen Sie Ihre Sichtweise hinzu

Dacheng Cheng

I bring enthusiasm, energy, and discipline to tackle ambitious projects.
Beitrag melden
The Web Audio API has a lot of concepts which are foreign to developers outside of audio engineering, if your needs are fairly rudimentary like managing audio state and maybe doing a cross-fade between two tracks of audio, use a library like howler.js to simplify the task.

Übersetzt

Gefällt mir

HTML5

+ Folgen

Diesen Artikel bewerten

Wir haben diesen Artikel mithilfe von KI erstellt. Wie finden Sie ihn?

Sehr gut Geht so

Diesen Artikel melden

Alle anzeigen

Wie verwenden Sie die Web-Audio-API, um Soundeffekte und Musik zu Ihren Webseiten und Anwendungen hinzuzufügen?

1

2

3

4

5

6

7

1 Was ist die Web-Audio-API?

2 Wie erstelle ich einen Audiokontext?

3 Wie lade und spiele ich Audiodateien ab?

4 Wie füge ich Audioeffekte hinzu?

5 Wie steuere ich die Audiowiedergabe?

6 Wie verwende ich die Web-Audio-API mit anderen HTML5-APIs?

7 Hier ist, was Sie sonst noch beachten sollten

HTML5

Diesen Artikel bewerten

Vielen Dank für Ihr Feedback

Weitere Artikel zu HTML5

Relevantere Lektüre