Abspielen von Audiodateien in JavaScript

1. Verwendung von .play() zum Abspielen von Audiodateien in JavaScript
2. Verwenden Sie die Web-Audio-API, um Audiodateien abzuspielen
3. Verwendung von die Bibliothek howler.js zum Abspielen von Audiodateien in JavaScript

In diesem Artikel erfahren Sie, wie Sie Audiodateien in JavaScript abspielen.

Wir können unserer Seite Audiodateien hinzufügen, indem wir einfach das Tag <audio> verwenden. Dies ist der einfachste Weg, um Audiodateien ohne JavaScript abzuspielen. Das Attribut src des Tag <audio> gibt die Adresse der Audiodatei an. Es hat auch andere hilfreiche Attribute wie control, autoplay und loop. Aber es gibt Zeiten, in denen wir automatisch die Kontrolle übernehmen und Sounds automatisch spielen möchten, wie in einem Spiel, wenn wir klicken oder ein anderes Ereignis. In solchen Situationen möchten wir, dass JavaScript die Kontrolle übernimmt und Dateien gemäß unserer Logik wiedergibt.

Verwendung von .play() zum Abspielen von Audiodateien in JavaScript

Wir können eine Audiodatei in JavaScript laden, indem wir einfach eine Audioobjektinstanz erstellen, d. H. new Audio() verwenden. Nachdem eine Audiodatei geladen wurde, können wir sie mit der Funktion .play() abspielen.

const music = new Audio('adf.wav');
music.play();
music.loop = true;
music.playbackRate = 2;
music.pause();
qqazszdgfbgtyj

Im obigen Code laden wir eine Audiodatei und spielen sie dann einfach ab. JavaScript bietet uns viel Flexibilität und jede Menge Funktionen. Wir können die Wiedergaberate steuern, den Ton schleifen, pausieren und den Ton abspielen. Das einzige Problem ist die gleichzeitige Verarbeitung mehrerer Sounds und eine etwas eingeschränkte Kontrolle im Vergleich zu den neuesten hochentwickelten.

Verwenden Sie die Web-Audio-API, um Audiodateien abzuspielen

Die Einrichtung der Web-Audio-API ist zwar etwas umständlich, bietet uns jedoch viel Flexibilität und Kontrolle über den Sound. Es ist eine bedeutende Weiterentwicklung des typischen HTML5-Audios und ermöglicht komplexe Audiomanipulationen. Es verwendet HTML5-Audio, um die Audioelemente als Knoten in einer gerichteten graphähnlichen Struktur darzustellen, die als Audiokontext bezeichnet wird. Es kann viele Arten von Knoten geben, z. B. Lautstärkeknoten, die zwischen der Audioquelle und dem Ziel verbunden sind und uns bei der Manipulation der Lautstärke helfen.

<audio src='audio_file.mp3'></audio>
const audioContext = new AudioContext();
const element = document.querySelector(audio);
const source = audioContext.createMediaElementSource(element);
source.connect(audioContext.destination)
audio.play();

Hier initialisieren wir zuerst einen Audiokontext und erhalten den Verweis auf die Quelle der Audiodatei. Wir verbinden diese Quelle dann mit einem globalen Ziel und unser Audio-Setup ist abgeschlossen.

Verwendung von die Bibliothek howler.js zum Abspielen von Audiodateien in JavaScript

howler.js ist eine Audiomanipulationsbibliothek. Es ermöglicht uns, die Leistungsfähigkeit der Web Audio API und die Einfachheit von HTML 5 Audio zu nutzen. Es wird häufig mit Komponenten der Reaktionsklasse verwendet, um browserbasiertes Audio zu verarbeiten, insbesondere beim Abspielen mehrerer Audioquellen. Es ermöglicht die Steuerung des globalen Audiokontexts mithilfe eines Howler-Objekts und steuert dann Audio oder eine Gruppe von Audios mithilfe von Howl.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js"></script>
<script>
    var sound = new Howl({
      src: ['https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'],
      volume: 1.0,
      onend: function () {
        alert('We finished with the setup!');
      }
    });
    sound.play()
</script>

Alle gängigen Browser außer Internet Explorer unterstützen alle diese Methoden. Internet Explorer unterstützt Web Audio API und howler.js nicht.