H5 ?? ? ??? ??? ? ?? ?? ??? ?? ? ??? API? ???? ?? ? ? ????. 1) ??? ?? ? ??? ???? ?? ??? ???? ?? ? ??; 2) ?? ??? ???? ?? ???? ??????? ?? PannerNode? ???? ?? ??? ??; 3) ?? ???? ???? ?? ?? ??, ???? ???? ?? ? ??? ?? ???? ??? ??????. ? ??? ?? ???? ?????? ????? ????? ??? ?? ??? ??? ?????.

H5 ?? ? ??? ??? ??? ? ??????, ?? ??? ??? ??, ?? ? ??? ????? ?? ????? ????. ? ??? API? ?????? ?? ??? ??? ???? ??? ?? ??? ?????. ?? ???? ?? ???? (HTML5, JavaScript ? ??? ???? ???? ????.

? ??? API? ???? H5 ?? ? ??? ??? ???? ??? ??? ????.

? ??? API? ?? ?? ??

Web Audio API? ???? AudioContext ?? ??? ??? ???? ???? ???? ??? ???? ???? ?? ? ? ????. ?? (?? ?? ???? ??), ?? (??, ??) ? ?? (???) ? ??? ??? ???? ?? ????? ??????.

????? ????? ??? ?? ??? ?????.

 const audiocontext = window.audiocontext || Window.webkitaudiocontext;
const context = ??? audiocontext ();

AudioContext ? ??? ??? ??????? ?? ?? ??? ??? ?? ???? ?? ??? ? ????. ? ??? ?? ? ???? ?? ?? ?? ??????.

????? ? : ??? ?? ?? (? ?? ??? ??)? ????? ?? ?? ???? ?? ??? ?????? ???? ???? ?? ?????. ??? ?? "??"?? ?? ??? ???? ?? ???????.

?? ? ????? ?? ??? ??

?? ? ???? ?? ??? ??? ?? ???? ???? ??? ??? ???? ??? ????? ????. PannerNode? ??? ????.

???? ?? 3D ??? ??? ???? ?? ???? ????? ? ? ????. ?? ?? ??? ????.

 const panner = context.createpanner ();
Panner.panningmodel = 'hrtf'; // ??? ???
Panner.distancemodel = '?';
Panner.refdistance = 1;
Panner.maxdistance = 10000;

const source = context.createbuffersource ();
Source.buffer = YourAudioBuffer;
source.connect (Panner);
Panner.connect (Context.destination);

source.start (0);

?? ?? ??? ?? ?? ?? ??? ???? Panner ??? ???? ???? ? ? ????. ?? ??, ????? VR? ?? ??? ???? ?? Deviceorientation ???? ???? ???? ??? ???? ? ????.

 window.addeventListener ( 'deviceorientation', (???) => {
    const alpha = event.alpha; // z ? ??? ??
    // ?? ?? ??? ??? ???????
});

?? ?? ???? ??? ?? ? ???? ???? ?? 3D ???? ???? ??? ??? ??????.

?? ? ??? ??? ??????

?? ? ???? ?? ?? ??? ? ?? ?? ??? ??? ?? ? ? ???? ?? ? ? ????. ??? ?? ???? ?????? ? ?? ????.

• ??? ?? MP3 ?? AAC? ?? ?? ??? ??? ?????? . ?? ??? ??? ? ?? ??? ?????.
• ?? ??? ?? ?? - ??? ? ???? ?? ??? ???? CPU? ?? ?? ? ? ????.
• ?? ??? ??? ?? Ajax Arraybuffer? ?? ??? ???? ?? ? ?? ??? .
• ???? ????/???? ???? ?????? - ????? ?? ?? ?? ???? ???? ?? ??? ????? ????.

?? ???? ?????? : ?? ??? ?? ? ???? ???? ??? ??? ?? ????. ?? ?? UI ???? ???? ???, ?? ??? ??????? ???? ???? ??????.

? ?? ??? ?? ?? : ?? ? ?? ??? ?? ?? ??? ?? ??? ????? ??????. ?? ????? ??? ?? ???? ???? ?? ??? ?? ?????.

 document.querySelector ( '#start-button'). addEventListener ( 'click', () => {
    if (context.state === 'spended') {
        context.resume ();
    }
});

? ??? API? ?? ?? ? ??? ??? ????? ?? ??? ???? ????. ???? ????? ??? ??? ?? ??? ?? ?? ? ? ??? ? ????. ???? ???? ??? ?? ????? H5 ??? ?? ??? ??? ? ??????.

??? ????? ??? ??? ???? ???? ?? ???? ??? ?? ??? ?? ???? ?????.

? ??? ? ??? API? ?? H5 ?? ? ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!