研发播放器一首完整的歌曲

淩亂°似流年 2024-03-16 17:35 77阅读 0赞

### [JavaScript MOD 播放器（3 部分系列）][JavaScript MOD _3] ###

[1个在现代 Web Audio API 中生成声音][1_ Web Audio API] [2个在浏览器中加载 MOD 文件][2_ MOD] [3个播放一首完整的歌曲，几乎][2_ MOD]

在上一篇文章中，我介绍了如何从 MOD 文件中提取原始样本数据以及如何播放它。下一步是将歌曲数据从 MOD 文件中取出并放入更有用的数据结构中。

根据我找到的来源[（见上一篇文章）][2_ MOD]，歌曲数据以每个“模式”1024 字节存储。模式是 4 个通道中 64 个音符的序列，每个音符是一个小节的 1/16。原始 MOD 文件包含四个通道，这意味着总共可以同时播放四个样本或乐器。每个音符是 4 个字节，每行包含 4 个音符，每个模式包含 64 行，每个模式有 1024 个字节。

对于每个音符，存储乐器索引、周期*（稍后解释）*和效果*（稍后解释） 。*乐器索引存储在字节0的前4位和字节2的前4位。周期存储在字节0的后4位和字节1的所有8位。效果存储在字节0的后4位字节 2 的位和字节 3 的所有 8 位。使用这些信息，我可以编写三个新类来存储歌曲数据，`Pattern`, `Row`, 和`Note`。

`Mod`还必须更新类的构造函数以通过`Pattern`为每个模式调用构造函数来读取歌曲数据。

### 播放一种模式的一种通道 ###

现在歌曲数据以更有用的格式存储，是时候播放它了。第一步是播放一种模式的一个通道。回放由`process`工作集处理器类的方法驱动。对于播放的每个样本，时间向前移动 1/48 000 或 1/44 100 秒，具体取决于音频上下文的采样率。因此，我们可以将样本用作时间源，并根据样本的进展进行所有时间计算。

值得注意的是[Amiga Paula 协处理器][2_ MOD]`period`的时钟脉冲数，它以主 CPU 时钟速度的一半运行。在 PAL Amiga 上，主 CPU 时钟频率为 7 093 789.2 Hz，因此协处理器频率为 3 546 894.6 Hz。*使用周期 214 （音符 C-3 的周期）*演奏的样本将以 3 546 894.6/214 = 16 574.3 Hz 播放。对于采样率为 48 000 Hz 的音频上下文，这意味着在输出下一个样本之前，每个样本将输出 48 000/16 574.3 = 2.896 次。每次周期变化时都必须进行这些计算。

要在歌曲中前进，我还需要跟踪歌曲中的当前位置、要播放的当前行以及在移动到下一行之前还剩下多少样本要播放。目前，每行的样本数是使用 125 的 BPM 和音频上下文的采样率计算的。

<code>const PAULA_FREQUENCY = 3546894.6;
 
 class PlayerWorklet extends AudioWorkletProcessor {
 constructor() {
 super();
 this.port.onmessage = this.onmessage.bind(this);
 this.mod = null;
 }
 
 onmessage(e) {
 if (e.data.type === 'play') {
 this.mod = e.data.mod;
 this.sampleRate = e.data.sampleRate;
 
 this.bpm = 125;
 this.outputsPerRow = this.sampleRate * 60 / this.bpm / 4;
 
 // Start at the last row of the pattern "before the first pattern"
 this.position = -1;
 this.rowIndex = 63;
 
 // Immediately move to the first row of the first pattern
 this.outputsUntilNextRow = 0;
 
 this.instrument = null;
 this.period = null;
 }
 }
 
 nextRow() {
 ++this.rowIndex;
 if (this.rowIndex == 64) {
 this.rowIndex = 0;
 ++this.position;
 }
 
 const patternIndex = this.mod.patternTable[this.position];
 const pattern = this.mod.patterns[patternIndex];
 const row = pattern.rows[this.rowIndex];
 const note = row.notes[0];
 
 if (note.instrument) {
 this.instrument = this.mod.instruments[note.instrument - 1];
 this.sampleIndex = 0;
 }
 
 if (note.period) {
 this.period = note.period - this.instrument.finetune;
 }
 }
 
 nextOutput() {
 if (!this.mod) return 0.0;
 
 if (this.outputsUntilNextRow <= 0) {
 this.nextRow();
 this.outputsUntilNextRow += this.outputsPerRow;
 }
 
 this.outputsUntilNextRow--;
 
 if (!this.instrument || !this.period) return 0.0;
 if (!this.period) return 0.0;
 
 if (this.sampleIndex >= this.instrument.bytes.length) {
 return 0.0;
 }
 
 const sample = this.instrument.bytes[this.sampleIndex | 0];
 const sampleRate = PAULA_FREQUENCY / this.period;
 this.sampleIndex += sampleRate / this.sampleRate;
 
 return sample / 256.0;
 }
 
 process(inputs, outputs) {
 const output = outputs[0];
 const channel = output[0];
 
 for (let i = 0; i < channel.length; ++i) {
 const value = this.nextOutput();
 channel[i] = value;
 }
 
 return true;
 }
 }
 
 registerProcessor('player-worklet', PlayerWorklet);
 </code>

要最终播放歌曲的第一个频道，我需要将完整的 mod 数据发送到 worklet，而不仅仅是一个乐器。我还需要发送音频上下文的采样率，以便工作集可以正确计算所有时间。以下是对主线程代码的更改：

<code>// Load Elekfunk from api.modarchive.org
 const url = 'https://api.modarchive.org/downloads.php?moduleid=41529';
 const mod = await loadMod(url);
 
 // Play a sample when the user clicks
 window.addEventListener('click', () => {
 audio.resume();
 player.port.postMessage({
 type: 'play',
 mod: mod,
 sampleRate: audio.sampleRate
 });
 });
 </code>

在这些更改之后，当您单击浏览器窗口时，歌曲的第一个频道开始播放。但是，时机有点不对，有些音符没有正确播放。这是因为尚未实现任何效果。Elekfunk 歌曲使用当前未实现的“Set Speed”效果来加快播放速度，这就是时间错误的原因。此外，要真正欣赏这首歌，需要将所有四个声道混合在一起。我在这篇文章中所做的最后更改是创建一个四通道混音器，并实现“设置速度”效果。

### 混合多个通道 ###

要将歌曲的四个通道混合在一起，我需要跟踪每个通道的乐器和周期。每个通道都需要有自己的样本索引，并独立于其他通道在样本中向前移动。我创建了一个`Channel`类来跟踪此信息，并在工作集中创建了该类的四个实例。该`nextOutput`函数现在遍历所有四个通道，并将每个通道的输出加在一起。为了将输出限制在 -1.0 到 1.0 的范围内，我使用了函数`Math.tanh`，它是一个双曲正切函数。它有一个很好的属性，即输出始终在 -1.0 和 1.0 之间，并且输出也按比例缩放到输入。

<code>class PlayerWorklet extends AudioWorkletProcessor {
 constructor() {
 super();
 this.port.onmessage = this.onmessage.bind(this);
 this.mod = null;
 this.channels = [ new Channel(this), new Channel(this), new Channel(this), new Channel(this) ];
 }
 
 onmessage(e) {
 if (e.data.type === 'play') {
 this.mod = e.data.mod;
 this.sampleRate = e.data.sampleRate;
 
 this.bpm = 125;
 this.outputsPerRow = this.sampleRate * 60 / this.bpm / 4;
 
 // Start at the last row of the pattern "before the first pattern"
 this.position = -1;
 this.rowIndex = 63;
 
 // Immediately move to the first row of the first pattern
 this.outputsUntilNextRow = 0;
 }
 }
 
 nextRow() {
 ++this.rowIndex;
 if (this.rowIndex == 64) {
 this.rowIndex = 0;
 ++this.position;
 }
 
 const patternIndex = this.mod.patternTable[this.position];
 const pattern = this.mod.patterns[patternIndex];
 const row = pattern.rows[this.rowIndex];
 
 for (let i = 0; i < 4; ++i) {
 this.channels[i].play(row.notes[i]);
 }
 }
 
 nextOutput() {
 if (!this.mod) return 0.0;
 
 if (this.outputsUntilNextRow <= 0) {
 if (this.outputsUntilNextRow <= 0) {
 this.nextRow();
 }
 
 this.outputsUntilNextRow--;
 
 const rawOutput = this.channels.reduce((acc, channel) => acc + channel.nextOutput(), 0.0);
 return Math.tanh(rawOutput);
 }
 
 process(inputs, outputs) {
 const output = outputs[0];
 const channel = output[0];
 
 for (let i = 0; i < channel.length; ++i) {
 const value = this.nextOutput();
 channel[i] = value;
 }
 
 return true;
 }
 }
 </code>

### 添加第一个效果 ###

我要实现的第一个效果是“设置速度”效果。这种效果可以以两种不同的方式使用。如果该值小于 32，它会设置每行的“刻度”数。如果该值大于或等于 32，则设置每分钟的节拍数。“刻度”是 MOD 格式的一个概念，通常是一行的 1/6。大多数较旧的 MOD 文件从不更改 BPM，而是更改每行的节拍数以加快或减慢歌曲的速度。许多效果根据每行的刻度数执行计算，因此实现此效果很重要。`effect`我将从向类中添加一个方法开始`Channel`，我可以使用它来实现所有效果。我还将添加一个`setTicksPerRow`方法和一个`setBpm`方法到`PlayerWorklet`类，我可以用它来更新每行的刻度数。

### 结论 ###

通过这些更改，播放器现在可以从 Arte 演示中渲染 Moby 的 Elekfunk 版本，该版本听起来不错。乐器演奏正确，歌曲以正确的速度播放，但仍然缺少很多效果。这些将是本系列接下来几部分的主题。

您可以在[atornblad.github.io/js-mod-player][1_ Web Audio API]尝试此解决方案。

[GitHub 存储库][2_ MOD]中始终提供最新版本的代码。

### [JavaScript MOD 播放器（3 部分系列）][2_ MOD] ###

[1个在现代 Web Audio API 中生成声音][2_ MOD] [2个在浏览器中加载 MOD 文件][2_ MOD] [3个播放一首完整的歌曲，几乎][2_ MOD]

[JavaScript MOD _3]: http://https
[1_ Web Audio API]: http://telegeram1.com
[2_ MOD]: https://zhifj.com