演示基于整合了phaser游戏框架的开发平台中音频的简单使用，这里以制作一个风铃为例。事先需要准备一些资源：风铃声音文件、风铃图片。
创建游戏
拖动“游戏容器”到界面中即可，无需特别配置
场景
创建场景前，需要先创建场景面板，再往面板中拖入“游戏场景”组件。
属性配置
真实物理环境能让我们减少很多物理监测代码，所以这里启用真实物理支持，为了视觉效果好一点（主要是会显示物理连接线），这里我们启用物理调试
预加载
预加载是一个面板，用来容纳预加载的资源，这个组件对应phaser的scene的preload阶段
加载风铃音频
资源类型选择audio
在地址簿中写上音频文件所在地址(会存在跨域问题，这里演示就加载同域名下的文件)
加载风铃图片
加载类型选择spritesheet，这里加载的是一张组合图，然后写上图片地址
这里点击配置填写配置信息
创建阶段
事先创建一个变量，这个边是一个长度为8的数组，用来记录8个音频的状态
创建音频对象
这里我们创建8个音频，通过迭代的方式比较方便，迭代器的数据源就绑定到上面的数组，这样就能创建8个音频
拖入音频到迭代器中
声音资源选择之前预加载配置的声音文件
配置声音资源
播放监听绑定到上面数组中的play属性，这样，当play变化时就播放声音
配置播放完毕事件
需要在音频播放完毕时修改play的值，这个值用于判断当前音频是否处于播放中
配置代码如下，即complete事件中设置playing为false
return { complete(phaser,game,scene,sound,scope) { scope['design-ui-phaser-sound-add-1781313144735'].data.playing = false } }创建图片栈
拖动图栈物质组件到创建面板中
设定具体属性，这里我们创建8个元素，即8列1行，由于存在重力原因，每个元素会垂下去，又因为有拉扯，看上去就和1列8行一样了。
编辑创建后执行方法，让元素接受事件
设定元素支持事件，设定显示层级
composite.bodies.forEach(c => { c.gameObject.depth = 1000 c.gameObject.setInteractive({ useHandCursor: true }) c.gameObject.on('pointerdown',() =>{ console.log(c.id) }) })绑定物理body
拖动一个绑定刚体组件到图栈物质组件里面，目的时用于绑定图栈里面的一个元素
这里，我们绑定最后一个
配置碰撞事件
配置事件，让元素在碰撞的时候发出声音，即风铃晃动时发声
先找到没有播放的音频，然后更改play的值并设定为播放状态
for(let i = 0;i < $__fengSoundPool__.length;i++) { if(!$__fengSoundPool__[i].playing) { $__fengSoundPool__[i].play = Math.random() $__fengSoundPool__[i].playing = true console.log('播放第' + i + '个音频') return } }效果
当用鼠标拨动风铃的时候，就会播放风铃的声音，如果声音池中的8个音频都在播放中，就不会产生新的声音（这里需要添加支持matter鼠标指针约束）