使用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文档，请访问官方网站。