持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
缘由
最近在github看到音频制作，觉得很神奇，就查看源码记录了一下。 感兴趣的可以看看大佬是怎么做的。 github地址：ZzFXM
大概思路
使用web audio api制作音频，先创建音频上下文（AudioContext），然后创建一个缓存和一个数据源，将音频数据复制并设置到音频，最后执行音频数据。这里audioContext详细的讲解和api都可以自己了解一下,毕竟我只是个菜鸟，这次主要是说他能制作并播放音频。
音频的制作部分可以通过大佬的制作工具搞出来，地址就放在这里convert
这里是摘抄出来的代码：
let audioContext;
/** 播放和设置音频
* @param {Array} 音频数据
* @param {Number} [volume=1] - 音量
* @param {Number} [rate=1] - 播放速度
* @param {Number} [pan=0] - 立体音频播放使用数
* @param {Boolean} [loop=0] - 循环
* @return {AudioBufferSourceNode} - 音频节点
* @memberof Audio */
function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
{
if (!soundEnable) return;
// 创建音频上下文
if (!audioContext)
audioContext = new (window.AudioContext||webkitAudioContext);
// 创建一个缓存和一个数据源
const buffer = audioContext.createBuffer(sampleChannels.length, sampleChannels[0].length, zzfxR),
source = audioContext.createBufferSource();
// 将数据源复制到缓存，放到数据源里
sampleChannels.forEach((c,i)=> buffer.getChannelData(i).set(c));
// 设置数据源缓存
source.buffer = buffer;
// 播放速率
source.playbackRate.value = rate;
// 循环播放
source.loop = loop;
// 创建音频相关节点
source
// .connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, 1, -1)}))
// .connect(new GainNode(audioContext, {'gain':soundVolume*volume}))
.connect(audioContext.destination);
// 播放并放回数据源
source.start();
return source;
}
