欧美成人看片一区二区三区尤物,蜜桃麻豆www久久囤产精品,欧美破苞系列二十三

const audioContext = new AudioContext();
// 獲取設(shè)備麥克風(fēng)流
stream = await navigator.mediaDevices
.getUserMedia({ audio: true})
.catch(function (error) {
console.log(error);
});
// 創(chuàng)建來自麥克風(fēng)的流的聲音源
const sourceNode = audioContext.createMediaStreamSource(stream);
// 將聲音連接的揚聲器
sourceNode.connect(audioContext.destination);

就可以對著麥克風(fēng)說話聽到自己的聲音了。對上述來源數(shù)據(jù)流的處理被設(shè)計成一個個的節(jié)點（Node），具有模塊化路由的特點，需要添加什么樣的效果添加什么樣的node，例如一個最常見的操作是通過把輸入的采樣數(shù)據(jù)放大來達到擴音器的作用（GainNode），示例代碼：

// 創(chuàng)建音頻上下文

const audioContext = new AudioContext();

// 創(chuàng)建一個增益Node

const gainNode = audioCtx.createGain();

// 獲取設(shè)備麥克風(fēng)流

stream = await navigator.mediaDevices

  .getUserMedia({ audio: true})

  .catch(function (error) {

    console.log(error);

  });

// 創(chuàng)建來自麥克風(fēng)的流的聲音源

const sourceNode = audioContext.createMediaStreamSource(stream);

// 將聲音經(jīng)過gainNode處理

sourceNode.connect(gainNode);

// 將聲音連接的揚聲器

gainNode.connect(audioContext.destination);

// 設(shè)置聲音增益，放大聲音

gainNode.gain.value = 2.0;

以上只是連接了聲音放大的node，如果想要增加其它效果，可以繼續(xù)往上添加node連接connect，例如濾波器（BiquadFilterNode）、立體聲控制（StereoPannerNode）、對信號進行扭曲（WaveShaperNode）等等。這種模塊化設(shè)計提供了靈活的創(chuàng)建動態(tài)效果和復(fù)合音頻的方法，是不是有種變魔法的感覺，哪里修改點哪里（添加Node）非常方便。例如，以下展示了一個利用?AudioContext?創(chuàng)建四項濾波器節(jié)點（Biquad filter node）的例子：

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();



// 創(chuàng)建多個不同作用功能的node節(jié)點

var analyser = audioCtx.createAnalyser();

var distortion = audioCtx.createWaveShaper();

var gainNode = audioCtx.createGain();

var biquadFilter = audioCtx.createBiquadFilter();

var convolver = audioCtx.createConvolver();



// 將所有節(jié)點連接在一起



source = audioCtx.createMediaStreamSource(stream);

source.connect(analyser);

analyser.connect(distortion);

distortion.connect(biquadFilter);

biquadFilter.connect(convolver);

convolver.connect(gainNode);

gainNode.connect(audioCtx.destination);



// 控制雙二階濾波器



biquadFilter.type = "lowshelf";

biquadFilter.frequency.value = 1000;

biquadFilter.gain.value = 25;

可以看到為聲音流添加處理效果就像穿項鏈一樣，一個接一個，最后得到最終效果，實現(xiàn)效果可以參考官方樣例voice-change-o-matic。一個簡單而典型的 web audio 流程如下：

創(chuàng)建音頻上下文
在音頻上下文里創(chuàng)建源 — 例如, 振蕩器，流
創(chuàng)建效果節(jié)點，例如混響、雙二階濾波器、平移、壓縮
為音頻選擇一個目的地，例如你的系統(tǒng)揚聲器
連接源到效果器，對目的地進行效果輸出

變聲效果實現(xiàn)

首先回顧一下聲音的基礎(chǔ)知識，聲音是由物體振動產(chǎn)生的機械波，常接觸到的有以下三個特性：

頻率：頻率越大，音調(diào)越高；頻率越小，音調(diào)越低。
振幅：振幅越大，音量（響度）越大；振幅越小，音量越小。
音色：即波形，聽聲辨人的主要依據(jù)

這里說的變聲效果是改變聲音的音調(diào)，變聲效果根據(jù)不同的場景可以分為變速不變調(diào)、變調(diào)不變速以及變調(diào)又變速 3 種。變速是指把一個語音在時域上拉長或縮短，而聲音的采樣率、基頻以及共振峰都沒有發(fā)生變化。變調(diào)是指把語音的基因頻率降低或升高，共振峰做出相應(yīng)的改變，采樣頻率不變。各種方案應(yīng)用場景如下：

變速不變調(diào)：各種各樣的視頻播放器中的 2 倍速，0.5 倍速播放就是應(yīng)用的語音變速不變調(diào)原理；當(dāng)然變速不變調(diào)還應(yīng)用于網(wǎng)絡(luò)電話 VOIP 中的應(yīng)對網(wǎng)絡(luò)抖動，簡單的說，就是當(dāng)網(wǎng)絡(luò)不好的時候，播放端從網(wǎng)絡(luò)中拉取到的數(shù)據(jù)少，緩存區(qū)的數(shù)據(jù)不夠用，這個時候就使用緩存的數(shù)據(jù)播放的慢一點。反之，緩存區(qū)數(shù)據(jù)過多，就播放的快一點。這部分的實現(xiàn)可以參照 webrtc 的 netEQ 模塊。平時在使用微信語音的時候應(yīng)該能感受到網(wǎng)絡(luò)特別卡時，為了保持語音連續(xù)，會故意慢放語音。
變調(diào)不變速：變調(diào)不變速主要應(yīng)用在聲效上，聲音提高音調(diào)將男聲變成女生，或則將女生變成男聲；另外，變調(diào)不變速配合其他一些音效算法，如 EQ，混響，tremolo 和 vibrato 可以實現(xiàn)變聲效果，比如 QQ 上的蘿莉音，大叔音等。
變速變調(diào)：改變聲音播放速率情況下，音調(diào)音色也會隨著改變，例如玩過磁帶的都知道，按快進功能會使聲音變尖提高音調(diào)，慢放功能使聲音變粗，降低音調(diào)。

前兩種實現(xiàn)都要求對聲音知識領(lǐng)域有更深的了解，聲音時域、頻域，信號的傅里葉變換變化都要去重新去復(fù)習(xí)一下，學(xué)習(xí)成本比較高，這里使用第3種方式，比較好接入。要改變聲音的播放速率，Web Audio API中提供了AudioBufferSourceNode有playbackRate屬性，可以設(shè)置音頻的播放速率，使用音頻上下文AudioContext.createBufferSource獲得實例，示例代碼如下：

const play = ()=> {

  const audioSrc = ref("src/assets/sample_orig.mp3")

  const url = audioSrc.value

  const request = new XMLHttpRequest()

  request.open('GET', url, true)

  request.responseType = 'arraybuffer'



  request.onload = function() {

    const audioData = request.response

    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();



    audioCtx.decodeAudioData(audioData, (audioBuffer) => {

      let source = audioCtx.createBufferSource();

      source.buffer = audioBuffer;

      // 改變聲音播放速率，2倍播放

      source.playbackRate.value = 2;

      source.connect(audioCtx.destination);

      source.start(0);

    });

  }

  request.send()

}

可以調(diào)整source.playbackRate.value的值來改變音調(diào)，大于1提高音調(diào)，小于1降低音調(diào)。

雖然實現(xiàn)了變聲效果，但是這種方式只適合播放音頻文件，或者能獲取到完整音頻流的情況，對于獲取麥克風(fēng)這種持續(xù)輸入的聲音流并不適用，類似的還有SoundTouchJS，它是某大佬實現(xiàn)的SoundTouch的JS版本，使用也是要獲取完整音頻的數(shù)據(jù)流，作者也做了相應(yīng)的解釋，參考鏈接

如何處理麥克風(fēng)獲取的實時音頻流呢，這里可以借助Web Audio API中的ScriptProcessorNode，它允許使用 JavaScript 生成、處理、分析音頻。處理流程圖如下：

利用它將實時音頻流數(shù)據(jù)處理一下，得到慢放或加速的聲音流數(shù)據(jù)。示例代碼如下：

const audioprocess = async () => {

  const audioContext = new AudioContext();



  // 采集麥克風(fēng)輸入聲音流

  let stream = await navigator.mediaDevices

    .getUserMedia({ audio: true})

    .catch(function (error) {

      console.log(error);

    });



  const sourceNode = audioContext.createMediaStreamSource(stream);



  const processor = audioContext.createScriptProcessor(4096, 1, 1);

  processor.onaudioprocess = async event => {

    // 處理回調(diào)中拿到輸入聲音數(shù)據(jù)

    const inputBuffer = event.inputBuffer;

    // 創(chuàng)建新的輸出源

    const outputSource = audioContext.createMediaStreamDestination();

    const audioBuffer = audioContext.createBufferSource();

    audioBuffer.buffer = inputBuffer;

    // 設(shè)置聲音加粗，慢放0.7倍

    audioBuffer.playbackRate.value = 0.7

    audioBuffer.connect(outputSource);

    audioBuffer.start();



    // 返回新的 MediaStream

    const newStream = outputSource.stream;

    const node = audioContext.createMediaStreamSource(newStream)

    // 連接到揚聲器播放

    node.connect(audioContext.destination)

  };

  // 添加處理節(jié)點

  sourceNode.connect(processor);

  processor.connect(audioContext.destination)

}