使用HTML5创建和播放声音

引言

musquito 是一个使用 Web Audio API 为 HTML5 游戏和交互式网站创建的音频引擎。它提供了一个简单的抽象层，使创建和播放声音更加容易。在最新版本 v3 中，创建和播放声音变得更加简单。

以下是该库支持的一些核心功能：

• 基于强大的 Web Audio API
• 简单的 API 用于创建和播放声音
• 支持声音组
• 支持多种编解码器
• 支持音频精灵图
• 支持使用 HTML5 音频节点进行流式传输
• 淡入淡出
• 缓存
• 自动垃圾回收

在之前的两个版本（v1 和 v2）中，您需要始终创建一个音频组才能播放声音。从版本 3 开始，您可以通过一行代码播放声音。

安装

目前，musquito 仅在 npm 中可用，您可以使用以下命令进行安装：

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')
});

使用精灵图

音频精灵图类似于图像精灵图，它将多个小声音连接在一个文件中。您可以使用这个 工具 创建音频精灵图。

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

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

流式传输

可以使用 HTML5 音频节点播放较长的音频文件，方法是将 stream 选项设置为 true。

$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”的声音组会很方便，它可以帮助您为单个音频资源创建和管理多个声音。Buzzes 还支持事件。下面的示例展示了如何为精灵图创建一个声音组，并更轻松地播放多个声音。

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 文档，请查看官方 网站。请为 仓库 点个赞。

历史

• 2020 年 6 月 9 日：初始版本