Geolocation API

Geolocation API

if (navigator.geolocation) {
  // ...
} else {
  alert('Geolocation API не поддерживается');
}

Geolocation API

navigator.geolocation.getCurrentPosition(
                function (position) { ... },
                function (error) { ... },
                options
);

var options = {
    enableHighAccuracy: true,
    maximumAge: 50000,
    timeout: 10000
};
            

var id = navigator.geolocation.watchPosition(...);
navigator.geolocation.clearWatch(id);

Coordinates

{
    coords: {
        accuracy: 45,
        altitude: null,
        altitudeAccuracy: null,
        heading: null,
        latitude: 56.783005499999994,
        longitude: 60.54139849999999,
        speed: null
    },
    timestamp: 1459788138892
}

Geolocation API

• GPS - Global Positioning System
• Google's Geolocation Service Chrome, Firefox, Opera
• skyhookwireless.com Safari
• Microsoft Location Service Internet Explorer, Edge

Аудио в браузере

Немного истории

• <bgsound>, <embed>
• Flash, Silverlight, QuickTime ...
• <audio>
• Web Audio API

HTML5 Audio

• Простой аудио плеер
• Однопоточное фоновое аудио
• Аудио подсказки, капчи и т.п.

HTML5 Audio

if (document.createElement('audio').canPlayType) {
    // ...
} else {
    alert('<audio> не поддерживается!');
}

HTML5 Audio

<audio src="sound.mp3" autoplay></audio>

<audio src="sound.mp3" autoplay loop></audio>

<audio src="sound.mp3" controls></audio>

<audio src="sound.mp3" controls preload="none"></audio>

<audio src="sound.mp3" controls preload="auto"></audio>

<audio src="sound.mp3" controls preload="metadata"></audio>

<audio controls>
    <source src="sound.ogg" type="audio/ogg">
    <source src="sound.mp3" type="audio/mp3">
    <a href="sound.mp3" download>Скачать!</a>
</audio>

HTML5 Audio Methods

<audio id="player" src="sound.mp3" controls></audio>

var player = document.getElementById('player');

player.play();
player.pause();

player.canPlayType('audio/mp3'); // 'probably', 'maybe', ''

player.src = "new_sound.mp3"
player.load();

player.addTextTrack(kind, label, language);

HTML5 Audio Properties

1. buffered, ended, muted, paused, played ...

2. duration, audioTracks, readyState ...

3. playbackRate, volume, currentTime ...

HTML5 Audio Events

1. canplay, canplaythrough ...

2. error, play, pause, ended ...

3. volumechange, ratechange ...

Web Audio API

Web Audio API

• Объемный звук для игр и интерактивных веб приложений
• Приложения для обработки звука
• Аудио синтез
• Визуализация аудио
• ...

Web Audio API

Web Audio API Context

var AudioContext = window.AudioContext ||
                   window.webkitAudioContext;

if (AudioContext) {
    var context = new AudioContext();
    // ...
} else {
    alert('Ваш браузер не поддерживает Web Audio API');
}

Web Audio Sources

1. Аудио буфер
2. <audio> или <video>
3. Внешний аудио поток

Gain

var gainNode = context.createGain();
gainNode.gain.value = 0.5;

Delay

var delayNode = context.delayNode();
delayNode.delayTime.value = 0.5;

Convolution

var convolverNode = context.createConvolver();
var impulseResponse = ... ;
convolverNode.buffer = impulseResponse;

Filter

var filterNode = context.createBiquadFilter();
filterNode.type = 'lowpass';
filterNode.frequency.value = 1000;
filterNode.Q.value = 1;
filterNode.gain.value = 300;

Panner

var pannerNode = context.createPanner();

panner.setPosition(pos.x, pos.y, pos.z);
panner.setOrientation(vec.x, vec.y, vec.z);
panner.setVelocity(dx/dt, dy/dt, dz/dt);

context.listener.setPosition(pos.x, pos.y, pos.z);
context.listener.setOrientation(vec.x, vec.y, vec.z);
context.listener.setVelocity(dx/dt, dy/dt, dz/dt);

Web Audio Destinations

1. Стандартный аудио выход
2. Аудио поток

Web Audio API

// Создаем контекст, источник и приемник
var context = new AudioContext();
var source = context.createBufferSource();
source.buffer = getBufferFromUrl(someUrl);
var destination = context.destination;

// Создаем модули и конфигурируем их
var gainNode = context.createGain();
var delayNode = context.createDelay();
gainNode.gain.value = 0.5;
delayNode.delayTime.value = 0.75;
                

// Описываем необходимую нам схему и воспроизводим
source.connect(gainNode);
gainNode.connect(delayNode);
delayNode.connect(gainNode);
gainNode.connect(destination);
source.start(0);
                

audio.js
buzz.js
howler.js
SoundJS
     ...

Speech Synthesis API

Speech Synthesis API

if (window.speechSynthesis) {
    // ...
} else {
    alert('Speech Synthesis API не поддерживается');
}

Speech Synthesis API

// Создаем фразу и воспроизводим ее
var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);

// Меняем голос
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10];

msg.rate = 1; // Скорость от 0 до 10

msg.pitch = 2; // Высота от 0 до 2

msg.text = 'Hello World';

msg.lang = 'en-US';

Speech Synthesis Voice

SpeechSynthesisVoice {
    voiceURI: "Milena",
    name: "Milena",
    lang: "ru-RU",
    localService: true,
    default: true
}

Speech Synthesis Events

play, pause, resume, end, error

soundstart, soundend, speechstart, speechend

boundary // Достижение границ слова или предложения

mark // Достижение именованой метки в SSML разметке

Яндекс.SpeechKit

Яндекс.SpeechKit

// Создаем экземпляр класса `Text to speech`
// и передаем настройки синтеза
var tts = new ya.speechkit.Tts({
        apikey: 'abcd..',
        emotion: 'good',
        speed: 1.5,
        speaker: 'jane'
});
// Озвучиваем текст передавая его в метод speak()
tts.speak('Вы используете технологию SpeechKit', {
        speaker: 'omazh',
        emotion: 'neutral',
        stopCallback: function () {
            console.log("Озвучивание текста завершено.");
        }
});