跳转至

声音 / Audio

audio 类主要负责声音的播放。

在 AVGPlus 中,支持自定义名称的播放轨道,不过为了让项目的声音划分更加清晰,建议主要区分为四种:

轨道 作用
bgm 播放背景音乐
bgs 播放背景音效,比如环境声音,下雨声,风声等和背景音乐区分开
se 播放效果声音,建议播放临时的音效,比如按钮的点击声音或交互反馈音效等
voice 播放角色的语音配音

可自定义音轨

以上音轨划分仅参考,实际上 audio 系列的 API 均可自定义轨道的名称,此处仅做一些抛砖引玉、约定俗成的音轨名称参考;

关于网页范例无法自动播放声音的问题

在 Chrome 或其它部分浏览器下,对页面端自动播放声音的请求会进行阻拦,要求用户必须进行一次键盘/鼠标交互(如鼠标点击)才能正常播放声音,此乃正常现象。

在运行本章范例时,请在范例窗口点击一下鼠标。

桌面端使用 Audio 相关 API 时不会有类似现象。

参见 Chrome 相关 Policy:

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

播放声音

声音支持 mp3, wav 等常见的主流音频文件格式。在一个指定音轨上播放声音方法如下:

1
2
3
4
5
6
7
// 播放音乐
audio.play("bgm", "bgm/綺麗で儚いもの.mp3");

// 参考上面的关于浏览器播放声音的限制相关说明
// 此处为了进行一次鼠标交互才会开始播放
text.show("点击播放音乐~");
text.hide();

停止

使用 audio.stop() 方法停止播放。停止播放后,声音将中断,无法继续播放。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// 播放音乐
audio.play("bgm", "bgm/綺麗で儚いもの.mp3");

text.show("点击播放音乐~");

text.show("再次点击停止播放~");
text.hide();

// 停止播放
audio.stop("bgm");

声音暂停和继续

使用 audio.pause() 方法可以暂停声音的播放,然后再次调用 audio.resume() 时会从暂停的地方开始继续播放。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// 播放音乐
audio.play("bgm", "bgm/綺麗で儚いもの.mp3");

text.show("点击播放音乐~");
text.hide();

// 等待 7 秒后暂停
flow.wait(7000);

// 暂停播放
audio.pause("bgm")

// 等待 3 秒后继续播放
flow.wait(3000);

audio.resume("bgm");

设置音量和获取音量

使用 audio.setVolume() 可以设置音轨的音量,使用 audio.getVolume() 可以获取某个音轨的当前音量。

音量的取值范围是: 0-100

注:以下范例会有音量上的变化,运行时请注意系统总音量,以免造成耳朵受伤

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// 播放音乐
audio.play("bgm", "bgm/綺麗で儚いもの.mp3");

text.show("点击播放音乐~");
text.hide();

// 等待 4 秒后音量降低
flow.wait(4000);

// 设置音量为 10
audio.setVolume("bgm", 10);

// 等待 5 秒
flow.wait(5000);

// 获取当前音量并增加 80
const currentVol = audio.getVolume("bgm") + 80;
audio.setVolume("bgm", currentVol);

静音和取消静音

使用 audio.mute() 方法可以让所有轨道静音,反之使用 audio.unmute() 则可以取消静音。

需要注意的是,静音仅仅是让所有音轨的音量变为 0, 并非停止或暂停。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// 播放音乐
audio.play("bgm", "bgm/綺麗で儚いもの.mp3");

text.show("点击播放音乐~");
text.hide();

// 等待 4 秒后静音
flow.wait(4000);

audio.mute();

// 等待 4 秒后取消静音状态
flow.wait(4000);
audio.unmute();