De afgelopen maanden is de WebKit Web Audio API uitgegroeid tot een aantrekkelijk platform voor games en audiotoepassingen op internet. Terwijl ontwikkelaars er vertrouwd mee raken, hoor ik herhaaldelijk soortgelijke vragen opduiken. Deze snelle update is een poging om enkele van de meest gestelde vragen te beantwoorden om uw ervaring met de Web Audio API aangenamer te maken.
Vraag: Help, ik kan geen geluiden maken!
A: Als u nieuw bent bij de Web Audio API, bekijk dan de Aan de slag-tutorial of Eric's recept voor het afspelen van audio op basis van gebruikersinteractie .
V. Hoeveel audiocontexten moet ik hebben?
A: Over het algemeen zou u één AudioContext per pagina moeten opnemen, en een enkele audiocontext kan vele aangesloten knooppunten ondersteunen. Hoewel u meerdere AudioContexts op één pagina kunt plaatsen, kan dit tot een prestatiehit leiden.
Vraag: Ik heb een AudioBufferSourceNode, die ik zojuist heb afgespeeld met noteOn() , en ik wil deze opnieuw afspelen, maar noteOn() doet niets! Hulp!
A: Zodra een bronknooppunt klaar is met afspelen, kan het niet meer afspelen. Om de onderliggende buffer opnieuw af te spelen, moet u een nieuwe AudioBufferSourceNode maken en noteOn() aanroepen.
Hoewel het opnieuw maken van het bronknooppunt inefficiënt kan aanvoelen, zijn bronknooppunten sterk geoptimaliseerd voor dit patroon. Bovendien hoeft u, als u de AudioBuffer onder controle houdt, geen nieuw verzoek aan het item te doen om hetzelfde geluid opnieuw af te spelen. Als je merkt dat je dit patroon moet herhalen, kun je het afspelen inkapselen met een eenvoudige hulpfunctie zoals playSound(buffer) .
Vraag: Waarom moet je bij het afspelen van een geluid elke keer een nieuw bronknooppunt maken?
A: Het idee van deze architectuur is om audio-items te ontkoppelen van de afspeelstatus. Als we de analogie met een platenspeler nemen: buffers zijn analoog aan platen en bronnen aan afspeelkoppen. Omdat bij veel toepassingen meerdere versies van dezelfde buffer tegelijkertijd worden afgespeeld, is dit patroon essentieel.
Vraag: Hoe kan ik geluid van audio en video verwerken?
A: MediaElementAudioSourceNode is in de maak! Indien beschikbaar werkt het grofweg als volgt (een filtereffect toevoegen aan een sample dat via de audiotag wordt afgespeeld):
<audio src="sounds/sample.wav" controls>
var audioElement = document.querySelector('audio');
var mediaSourceNode = context.createMediaElementSource(audioElement);
mediaSourceNode.connect(filter);
filter.connect(context.destination);
Deze functie wordt bijgehouden in deze crbug . Houd er rekening mee dat het in deze configuratie niet nodig is om mediaSourceNode.noteOn() aan te roepen; de audiotag regelt het afspelen.
Vraag: Wanneer kan ik geluid uit een microfoon krijgen?
A: Het audio-invoergedeelte hiervan zal worden geïmplementeerd als onderdeel van WebRTC met behulp van getUserMedia en zal beschikbaar zijn als een speciaal bronknooppunt in de Web Audio API. Het werkt in combinatie met createMediaElementSource .
Vraag: Hoe kan ik controleren wanneer een AudioSourceNode klaar is met spelen?
A: Momenteel moet u een JavaScript-timer gebruiken, aangezien de Web Audio API deze functionaliteit niet ondersteunt. Het volgende fragment uit de handleiding Aan de slag met Web Audio API is hier een voorbeeld van in actie:
// Assume source and buffer are previously defined.
source.noteOn(0);
var timer = setTimeout(function() {
console.log('playback finished');
}, buffer.duration * 1000);
Er is een openstaande bug om ervoor te zorgen dat de Web Audio API een nauwkeurigere callback implementeert.
Vraag: Het laden van geluiden zorgt ervoor dat de hele UI-thread vastloopt en dat mijn UI niet meer reageert. Hulp!**
A: Gebruik de decodeAudioData API voor asynchroon laden om te voorkomen dat de hoofdthread wordt geblokkeerd. Zie dit voorbeeld .
Vraag: Kan de Web Audio API worden gebruikt om geluiden sneller dan realtime te verwerken?
A: Ja, er wordt aan een oplossing gewerkt. Blijf op de hoogte!
Vraag: Ik heb een geweldige Web Audio API-toepassing gemaakt, maar telkens wanneer het tabblad waarin deze wordt uitgevoerd op de achtergrond verschijnt, klinken de geluiden raar!
A: Dit komt waarschijnlijk omdat u setTimeouts gebruikt, die zich anders gedragen als de pagina een achtergrond heeft. In de toekomst kan de Web Audio API op specifieke tijden terugbellen met behulp van de interne timer van de webaudio ( context.currentTime attribuut). Zie dit functieverzoek voor meer informatie.
Over het algemeen kan het een goed idee zijn om het afspelen te stoppen wanneer uw app naar de achtergrond gaat. Met de Page Visibility API kunt u detecteren wanneer een pagina naar de achtergrond gaat.
Vraag: Hoe kan ik de toonhoogte van een geluid wijzigen met behulp van de Web Audio API?
A: Wijzig de playbackRate op het bronknooppunt.
Vraag: Kan ik de toonhoogte veranderen zonder de snelheid te veranderen?
A: De Web Audio API zou een PitchNode kunnen hebben in de audiocontext, maar dit is moeilijk te implementeren. Dit komt omdat er geen eenvoudig algoritme voor toonhoogteverschuiving bestaat in de audiogemeenschap. Bekende technieken creëren artefacten, vooral in gevallen waarin de toonhoogteverschuiving groot is. Er zijn twee soorten benaderingen om dit probleem aan te pakken:
- Tijddomeinalgoritmen, die herhaalde segmentecho-artefacten veroorzaken.
- Frequentiedomeintechnieken, die weergalmende geluidsartefacten veroorzaken.
Hoewel er geen native node is om deze technieken uit te voeren, kunt u dit doen met een JavaScriptAudioNode . Dit codefragment kan als startpunt dienen.
Vraag: Hoe kan ik een AudioContext maken met een samplefrequentie naar keuze?
A: Momenteel is er geen ondersteuning hiervoor, maar we onderzoeken dit. Zie dit feature request .
Als u nog vragen heeft, kunt u deze op StackOverflow stellen met behulp van de webaudiotag .