WebAudio Deep Note，第 3 部分：循環和改變音高
這段旅程從這裡開始，然後繼續，然後稍微轉了個彎，只是為了咯咯笑，現在我們回來了。
在你學會瞭如何播放聲音之後，現在讓我們循環播放它，因為 DeepNote 會持續大約 25 秒，而我們會播放完全相同的大提琴樣本，但時長不到一秒。
循環
幸運的是，循環是 WebAudio 中最簡單的事情。創建緩衝源之後 對象，您只需設置它的 loop true 的屬性 .就這麼簡單。然後它會永遠循環，直到你 stop() 它。
sample = audioContext.createBufferSource(); sample.buffer = audioBuffer; sample.loop = true; sample.connect(audioContext.destination); sample.start();
來來來，聽聽結果。
關於循環源的注意事項
您的源聲音是波（想像一下正弦波）。如果您將正弦的末端準確地切割在開頭的位置，那麼您就是金色的。這是一個笨拙的插圖：
所以，需要一點關注。否則，當結尾沒有很好地流入開頭時，您會聽到咔嗒聲和爆裂聲。就我而言，我嘗試過，但並不太努力。因為我們將有 30 個這樣的循環樣本，並且當它們的長度不同時，由於重新調整（見下），它並不那麼明顯。但是在您最喜歡的 DAW（數字音頻工作站）中進行剪輯時，您應該小心。順便說一句，我的（也就是最喜歡的 DAW）是 Reaper。
改變音高
您可以使相同的聲音聽起來更高（如花栗鼠）或更低（如達斯維德）。最簡單的方法是加快播放速度。想像一下以更高的速度播放磁帶（也是盒式磁帶）。或者在播放時將手指放在黑膠唱片上以減慢它的速度。
這就是 WebAudio 為您提供的開箱即用的播放速率。播放速度更快聽起來更高。但它也更快。如果你以兩倍的速度播放 1 秒的聲音，它聽起來會高一倍，但也更快結束。更難做的是聲音更高或更低但不改變速度。不幸的是，這就是現在太有名的 Autotune 所做的。音高校正。當歌手平穩時，您提高音高但保持速度（節奏）。這就是 WebAudio 沒有為您提供開箱即用的功能。目前。這是可能的，但這不是微不足道的。幸運的是我們的練習，我們可以毫無困難地提高速度。
所以除了 loop 緩衝區源的屬性，你得到一個 playbackRate 也。像這樣：
sample.playbackRate.value = 2;
（為什麼是 .playbackRate.value = 2 而不是 .playbackRate = 2 ，讓我們稍後再說。它與音頻參數的概念有關，實際上是一個很好的API）
播放速率 1 與原始聲音相同。 2 快兩倍，高一個八度。以兩倍速度播放的 440Hz 聲音聽起來像 880Hz。這是同一個A音符，但上面是一個八度。
150Hz
好的，現在回到 DeepNote，整個D 是 150Hz .
如果你看一下音符頻率，D3 是 146.83Hz。但在 DeepNote 中，他們決定 D3 應該是 150Hz。涼爽的。我們可以加快我們的樣本。
此外，我們沒有 D3 大提琴樣品，而是 C3 樣品。因為我們在 Interwebs 上免費獲得它，我們不能對免費挑剔。所以我們需要讓我們的 C3（即 130.81Hz）聽起來像 DeepNote 的 D3。這是一個簡單的比例。看看吧：
const C3 = 130.81; const c3d150 = 150 / C3; // 1.1467013225;
所以我們需要用微不足道的 1.something 來加快播放速度 從rando C3中製作所需的Deep D。不錯。稍後我們需要演奏更多的音符，但有一個起點是好的。所有其他音符都是這個 c3d150 的直接倍數 由於剛剛調整的基線。如果只是調整，請返回此博客系列的第 1 部分 對你來說聽起來很奇怪。
要聽到 repitching 的實際效果，請轉到示例。我什至添加了一個小複選框，您可以查看原始 C3（速率 1）和花哨 D3（速率 c3d150 之間的區別 )
代碼是：
const C3 = 130.81;
const c3d150 = 150 / C3; // 1.1467013225;
function play() {
fetch('Roland-SC-88-Cello-C3-glued-01.wav')
.then(response => response.arrayBuffer())
.then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
.then(audioBuffer => {
sample = audioContext.createBufferSource();
sample.buffer = audioBuffer;
sample.loop = true;
sample.playbackRate.value = repitch.checked ? c3d150 : 1;
sample.connect(audioContext.destination);
sample.start();
})
.catch(e => console.log('uff'));
}
WebMIDI 鍵盤
最後一件事：通過我的 WebMIDI 鍵盤來檢查 reitching 的力量。你可以演奏一整串音符，它們都是一個單一的重調 C4 樣本。
看看那個瀑布，只有 4k 的（漂亮的）HTML 和內聯 JS 以及一個 mp3 樣本。它支持 MIDI。 （WebMIDI 是另一個問題，或者只是查看源代碼 如果你好奇）
