在 JavaScript 中播放音訊檔案

1. 在 JavaScript 中使用 .play() 播放音訊檔案
2. 使用 Web Audio API 播放音訊檔案
3. 使用 howler.js 庫以 JavaScript 播放音訊檔案

在本文中，我們將學習如何在 JavaScript 中播放音訊檔案。

我們可以使用 <audio> 標籤將音訊檔案新增到頁面中。這是播放音訊檔案而不涉及 JavaScript 的最簡單方法。<audio> 標籤的 src 屬性指定音訊檔案的地址。它還具有其他有用的屬性，例如控制，自動播放和迴圈。但是有時候，我們想要自動控制並自動播放聲音，例如在遊戲中，單擊或任何其他事件時。在這種情況下，我們希望 JavaScript 根據我們的邏輯來控制和播放檔案。

在 JavaScript 中使用 .play() 播放音訊檔案

我們只需建立音訊物件例項即可使用 JavaScript 載入音訊檔案，即使用 new Audio()。載入音訊檔案後，我們可以使用 .play() 函式對其進行播放。

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

在上面的程式碼中，我們載入一個音訊檔案，然後簡單地播放它。JavaScript 為我們提供了很多靈活性和大量功能。我們可以控制播放速率，迴圈播放音訊，暫停和播放聲音。唯一的問題是，一次處理多個聲音，與最新技術相比，其控制能力有限。

使用 Web Audio API 播放音訊檔案

儘管設定起來有些麻煩，但是 Web Audio API 為我們提供了很多靈活性和對聲音的控制。它是對典型 HTML5 音訊的重大改進，並允許複雜的音訊處理。它使用 HTML5 音訊將音訊元素表示為稱為音訊上下文的有向圖樣結構上的節點。音訊源和目的地之間可以連線許多型別的節點，例如音量節點，可以幫助我們操縱音量。

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

在這裡，我們首先初始化音訊上下文，並獲得對音訊檔案源的引用。然後，我們將該源連線到全球目標，然後完成音訊設定。

使用 howler.js 庫以 JavaScript 播放音訊檔案

howler.js 是一個音訊處理庫。它使我們能夠利用 Web Audio API 的功能和 HTML 5 Audio 的簡單性。它廣泛用於 react 類元件，以處理基於瀏覽器的音訊，尤其是在播放多個音訊源時。它可以使用 Howler 物件控制全域性音訊上下文，然後使用 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>

除 Internet Explorer 以外的所有主要瀏覽器都支援所有這些方法。Internet Explorer 不支援 Web Audio API 和 howler.js。