快捷導(dǎo)航

JavaScript中播放音頻文件的幾種常用方法

更新時(shí)間：2023年10月09日 09:55:00 作者：小柴沒(méi)吃飽

JS可以用來(lái)播放多種聲音文件,包括常見(jiàn)的mp3、wav等格式,這篇文章主要給大家介紹了關(guān)于JavaScript中播放音頻文件的幾種常用方法,需要的朋友可以參考下

前言

我們可以使用 <audio> 標(biāo)簽將音頻文件添加到頁(yè)面中。這是播放音頻文件而不涉及 JavaScript 的最簡(jiǎn)單方法。<audio> 標(biāo)簽的 src 屬性指定音頻文件的地址。它還具有其他有用的屬性，例如控制，自動(dòng)播放和循環(huán)。但是有時(shí)候，我們想要自動(dòng)控制并自動(dòng)播放聲音，例如在游戲中，單擊或任何其他事件時(shí)。在這種情況下，我們希望 JavaScript 根據(jù)我們的邏輯來(lái)控制和播放文件。

[在 JavaScript 中使用 .play() 播放音頻文件]

我們只需創(chuàng)建音頻對(duì)象實(shí)例即可使用 JavaScript 加載音頻文件，即使用 new Audio()。加載音頻文件后，我們可以使用 .play() 函數(shù)對(duì)其進(jìn)行播放。

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

在上面的代碼中，我們加載一個(gè)音頻文件，然后簡(jiǎn)單地播放它。JavaScript 為我們提供了很多靈活性和大量功能。我們可以控制播放速率，循環(huán)播放音頻，暫停和播放聲音。唯一的問(wèn)題是，一次處理多個(gè)聲音，與最新技術(shù)相比，其控制能力有限。

[使用 Web Audio API 播放音頻文件]

盡管設(shè)置起來(lái)有些麻煩，但是 Web Audio API 為我們提供了很多靈活性和對(duì)聲音的控制。它是對(duì)典型 HTML5 音頻的重大改進(jìn)，并允許復(fù)雜的音頻處理。它使用 HTML5 音頻將音頻元素表示為稱為音頻上下文的有向圖樣結(jié)構(gòu)上的節(jié)點(diǎn)。音頻源和目的地之間可以連接許多類型的節(jié)點(diǎn)，例如音量節(jié)點(diǎn)，可以幫助我們操縱音量。

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

在這里，我們首先初始化音頻上下文，并獲得對(duì)音頻文件源的引用。然后，我們將該源連接到全球目標(biāo)，然后完成音頻設(shè)置。

[使用 howler.js 庫(kù)以 JavaScript 播放音頻文件]

howler.js 是一個(gè)音頻處理庫(kù)。它使我們能夠利用 Web Audio API 的功能和 HTML 5 Audio 的簡(jiǎn)單性。它廣泛用于 react 類組件，以處理基于瀏覽器的音頻，尤其是在播放多個(gè)音頻源時(shí)。它可以使用 Howler 對(duì)象控制全局音頻上下文，然后使用 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。

附：利用JavaScript實(shí)現(xiàn)音頻文件的播放和暫停

HTML5 規(guī)定了一種通過(guò) audio 元素來(lái)包含音頻的標(biāo)準(zhǔn)方法。

audio 元素能夠播放聲音文件或者音頻流。

注意看，a.paused表示當(dāng)前音頻的狀態(tài)，而音頻的暫停和播放對(duì)應(yīng)的方法分別為pause()和play() ——-(自認(rèn)為很值得注意的地方我當(dāng)時(shí)就犯了這種錯(cuò)誤)

<button onclick="clickA(this)">播放/暫停</button>
<audio id="audio" src="raw/1.mp3">您的瀏覽器不支持</audio>
<script>
    var a = document.getElementById("audio");
    function clickA() {
        //如果暫停   點(diǎn)擊即可播放
        if (a.paused) {
            // 播放
            a.play();
            //如果播放  點(diǎn)擊暫停
        } else if (a.play()) {
            //暫停
            a.pause();
        }
    }
</script>