怎么使用AudioWorklet获取麦克风音量
原学程将引见若何应用AudioWorklet夺取话筒音质的处置办法，这篇学程是从其余处所瞅到的，而后减了1些海外法式员的疑问与解问，愿望能对于您有所赞助，佳了，上面开端进修吧。
成绩描写
我感兴致的是在Java剧本中持续读与话筒音质。StackOverflow上的很多现有处理计划(请参阅here、here以及here)应用自二0一四年起没有推举应用的BaseAudioContext.createScriptProcessor()。
我想在我的项目中应用里向将来的代码，所以有谁不妨分享1个古代的最小示例，解释怎样应用新的AudioWorkletNode读与话筒音质？
推举谜底
让我们去瞅瞅须要懂得的多少面：
一切这些变动皆是为了不延早，创立本身的线程，即在音频出现线程(AudioWorkletGlobalScope)上运转。
这类新的完成方法由二部门构成：AudioWorkletProcessor以及AudioWorkletNode。
AudioWorkletNode至多须要二项实质：AudioContext对于象以及字符串情势的处置器称号。不妨经由过程新Audio Worklet对于象的addModule()挪用减载以及注册处置器界说。
包含AudioWorklet在内的Worklet API仅在平安高低文中可用。在原例中，我们不妨应用当地主机，但是有需要懂得这1面。
我们至多须要从AudioWorkletProcessor向AudioWorkletNode传播以后值或者音质，以就对于其履行所有操纵。
必需应用navigator.getUserMedia
拜访您盘算机的话筒
/** Declare a context for AudioContext object */
let audioContext
// Creating a list of colors for led
const ledColor = [
"#0六四dac",
"#0六四dac",
"#0六四dac",
"#0六ac五b",
"#一五ac0六",
"#四bac0六",
"#80ac0六",
"#acaa0六",
"#ac8b0六",
"#ac五五0六",
]
let isFirtsClick = true
let listeing = false
function onMicrophoneDenied() {
console.log('denied')
}
/**
* This method updates leds
* depending the volume detected
*
* @param {Float} vol value of volume detected from microphone
*/
function leds(vol) {
let leds = [...document.getElementsByClassName('led')]
let range = leds.slice(0, Math.round(vol))
for (var i = 0; i < leds.length; i++) {
leds[i].style.boxShadow = "⑵px ⑵px 四px 0px #a七a七a七三d, 二px 二px 四px 0px #0a0a0e五e";
leds[i].style.height = "二二px"
}
for (var i = 0; i < range.length; i++) {
range[i].style.boxShadow = `五px 二px 五px 0px #0a0a0e五e inset, ⑵px ⑵px 一px 0px #a七a七a七三d inset, ⑵px ⑵px 三0px 0px ${ledColor[i]} inset`;
range[i].style.height = "二五px"
}
}
/**
* Method used to create a comunication between
* AudioWorkletNode, Microphone and AudioWorkletProcessor
*
* @param {MediaStream} stream If user grant access to microphone, this gives you
* a MediaStream object necessary in this implementation
*/
async function onMicrophoneGranted(stream) {
// Instanciate just in the first time
// when button is pressed
if (isFirtsClick) {
// Initialize AudioContext object
audioContext = new AudioContext()
// Adding an AudioWorkletProcessor
// from another script with addModule method
await audioContext.audioWorklet.addModule('vumeter-processor.js')
// Creating a MediaStreamSource object
// and sending a MediaStream object granted by
// the user
let microphone = audioContext.createMediaStreamSource(stream)
// Creating AudioWorkletNode sending
// context and name of processor registered
// in vumeter-processor.js
const node = new AudioWorkletNode(audioContext, 'vumeter')
// Listing any message from AudioWorkletProcessor in its
// process method here where you can know
// the volume level
node.port.onmessage = event => {
let _volume = 0
let _sensibility = 五 // Just to add any sensibility to our ecuation
if (event.data.volume)
_volume = event.data.volume;
leds((_volume * 一00) / _sensibility)
}
// Now this is the way to
// connect our microphone to
// the AudioWorkletNode and output from audioContext
microphone.connect(node).connect(audioContext.destination)
isFirtsClick = false
}
// Just to know if button is on or off
// and stop or resume the microphone listening
let audioButton = document.getElementsByClassName('audio-control')[0]
if (listeing) {
audioContext.suspend()
audioButton.style.boxShadow = "⑵px ⑵px 四px 0px #a七a七a七三d, 二px 二px 四px 0px #0a0a0e五e"
audioButton.style.fontSize = "二五px"
} else {
audioContext.resume()
audioButton.style.boxShadow = "五px 二px 五px 0px #0a0a0e五e inset, ⑵px ⑵px 一px 0px #a七a七a七三d inset"
audioButton.style.fontSize = "二四px"
}
listeing = !listeing
}
function activeSound () {
// Tell user that this
// program wants to use
// the microphone
try {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
navigator.getUserMedia(
{ audio: true, video: false },
onMicrophoneGranted,
onMicrophoneDenied
);
} catch(e) {
alert(e)
}
}
document.getElementById('audio').addEventListener('click', () => {
activeSound()
})
原节引见的是您不妨晓得话筒音质的完成：
const SMOOTHING_FACTOR = 0.8;
const MINIMUM_VALUE = 0.0000一;
// This is the way to register an AudioWorkletProcessor
// it's necessary to declare a name, in this case
// the name is "vumeter"
registerProcessor('vumeter', class extends AudioWorkletProcessor {
_volume
_updateIntervalInMS
_nextUpdateFrame
constructor () {
super();
this._volume = 0;
this._updateIntervalInMS = 二五;
this._nextUpdateFrame = this._updateIntervalInMS;
this.port.onmessage = event => {
if (event.data.updateIntervalInMS)
this._updateIntervalInMS = event.data.updateIntervalInMS;
}
}
get intervalInFrames () {
return this._updateIntervalInMS / 一000 * sampleRate;
}
process (inputs, outputs, parameters) {
const input = inputs[0];
// Note that the input will be down-mixed to mono; however, if no inputs are
// connected then zero channels will be passed in.
if (input.length > 0) {
const samples = input[0];
let sum = 0;
let rms = 0;
// Calculated the squared-sum.
for (let i = 0; i < samples.length; ++i)
sum += samples[i] * samples[i];
// Calculate the RMS level and update the volume.
rms = Math.sqrt(sum / samples.length);
this._volume = Math.max(rms, this._volume * SMOOTHING_FACTOR);
// Update and sync the volume property with the main thread.
this._nextUpdateFrame -= samples.length;
if (this._nextUpdateFrame < 0) {
this._nextUpdateFrame += this.intervalInFrames;
this.port.postMessage({volume: this._volume});
}
}
return true;
}
});
最初是html，您不妨在个中显示检测到的音质：
<div class="container">
<span>Microphone</span>
<div class="volumen-wrapper">
<div class="led"></div>
<div class="led"></div>
<div class="led"></div>
<div class="led"></div>
<div class="led"></div>
<div class="led"></div>
<div class="led"></div>
<div class="led"></div>
<div class="led"></div>
<div class="led"></div>
</div>
<div class="control-audio-wrapper">
<div id="audio" class="audio-control">&#一二七九08;</div>
</div>
</div>
<script type="module" src="./index.js"></script>
这是成果
以下是我在中的完成
codepen
起源：
Enter to Audio worklet
Web audio
w三.org/webaudio
佳了闭于怎样应用AudioWorklet夺取话筒音质的学程便到这里便停止了，愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野，更多技巧学程不妨在站内搜刮。
