使用HTML5創建和播放聲音

目錄

介紹

安裝

“Hello World”示例

傳遞附加參數

使用精靈(Sprites)

暫停和停止聲音

聲音衰退

流(Streaming)

進階示例

創建音頻組

---

介紹

musquito是使用Web Audio API爲HTML5遊戲和交互式網站創建的音頻引擎。它提供了一個簡單的抽象，可以更輕鬆地創建和播放聲音。使用最新版本的v3，創建和播放聲音要簡單得多。

以下是該庫支持的一些核心功能：

• 建立在強大的Web Audio API之上
• 簡單的API來創建和播放聲音
• 支持聲音組
• 支持多種編解碼器
• 支持音頻精靈
• 支持使用HTML5音頻節點進行流傳輸
• 衰退
• 緩存
• 自動垃圾管理

在前兩個版本（v1和v2）中，您需要始終創建一個音頻組來播放聲音。從版本3開始，您可以通過一行代碼播放聲音。

安裝

目前，只有在npm中才能使用musquito，您可以使用以下命令進行安裝：

npm install musquito --save

“Hello World”示例

一個簡單的示例，說明如何創建和播放槍聲。

import $buzz from 'musquito';

$buzz.play('gun.mp3')

傳遞附加參數

下面的例子說明了如何能夠傳遞額外的參數，像volume，rate和callback。

$buzz.play({
  src: ['greenade.mp3', 'greenade.wav'],
  volume: 0.5,
  rate: 2,
  playEndCallback: () => alert('Playback started')
});

使用精靈(Sprites)

音頻精靈就像圖像精靈一樣，可以在一個文件中連接多個小聲音。您可以使用此工具創建音頻精靈。

以下是如何使用精靈的示例：

$buzz.play({
  src: 'sprite.mp3',
  sprite: {
    "beep": [
      0,
      0.48108843537414964
    ],
    "button": [
      2,
      2.4290249433106577
    ],
    "click": [
      4,
      4.672018140589569
    ]
  },
  sound: 'beep'
});

暫停和停止聲音

調用play方法將返回聲音ID，您可以使用它來調用其他方法，例如暫停，停止，更改音量和聲音的更多屬性。

const soundid = $buzz.play('bg.mp3');

// Pausing sound
$buzz.pause(soundid);

// Stopping sound
$buzz.stop(soundid);

聲音衰退

您可以線性或指數衰減播放聲音的音量，如下所示：

const soundid = $buzz.play('bg.mp3');

setTimeout(() => {
  $buzz.fade(soundid, 0, 3);
}, 2000);

流(Streaming)

通過將stream選項傳遞爲true，可以使用HTML5音頻節點播放長音頻文件。

$buzz.play({
  src: 'bg.mp3',
  stream: true
});

進階示例

下面的示例顯示瞭如何在播放聲音之前通過傳遞帶有速記標識符的音頻資源來設置音頻引擎。該setup方法還需要使用許多其他參數來配置引擎，請參考API文檔。

$buzz.setup({
  src: {
    bg: 'bg.mp3',
    sprite: {
      url: 'sprite.mp3',
      sprite: {
        "beep": [
          0,
          0.48108843537414964
        ],
        "button": [
          2,
          2.4290249433106577
        ],
        "click": [
          4,
          4.672018140589569
        ]
      }
    }
  },

  oninit: () => {
    // Playing sounds with identifiers
    $buzz.play('#bg');
    $buzz.play('#sprite.button');
  }
});

創建音頻組

有時，創建一個名爲“Buzz”的聲音組很方便，該聲音組有助於爲單個音頻資源創建和管理多個聲音。嗡嗡聲也支持事件。以下示例顯示瞭如何爲Sprite創建聲音組並更輕鬆地播放多種聲音。

const buzz = $buzz({
  src: 'sprite.mp3',
  sprite:{
    "beep": [
      0,
      0.48108843537414964
    ],

    "button": [
      2,
      2.4290249433106577
    ],

    "click": [
      4,
      4.672018140589569
    ]
  }
});

buzz.play('beep');

buzz.play('button');

buzz.play('click');

有關更多信息和API文檔，請訪問官方網站。