Мультимедиа. Аудио. Синтез и разпознавание речи.

Завьялов Александр, Яндекс

Мультимедиа. Аудио. Синтез и разпознавание речи.

Завьялов Александр

Руководитель группы разработки КЛ

Обсудим

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

История

<audio>

Возможности

Проверка

			if (document.createElement('audio').canPlayType) {
			  // ...
			} else {
			  alert('<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>

Внешний вид

Firefox

Chrome

Yandex Browser

Safari

Поддержка форматов/контейнеров

Supported audio coding formats (Wikiperdia), Media formats for HTML audio and video (MDN)

Методы

			<audio src="sound.mp3" id="player" controls></audio>
			  
			<script>
			  const player = document.getElementById('player');
			  
			  player.play();
			  player.pause();
			  player.canPlayType('audio/mp3'); // 'probably', 'maybe', ''
			  player.src = 'new_sound.mp3';
			  player.load();
			</script>

Свойства

HTML Audio Properties

События

HTML Audio Events

Лимиты iOS

It’s almost 2017, and HTML5 audio is still broken on iOS

Web Audio API

Возможности

Web Audio API

MDN Web Audio API

Web Audio API: Workflow

Web Audio API: Context

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

Web Audio Sources

Web Audio Modules

Web Audio Modules: Gain

			const gainNode = context.createGain();
			gainNode.gain.value = 0.5;
			source.connect(gainNode);
			gainNode.connect(destination);

Web Audio Modules: Gain

Web Audio Modules: Delay

			const delayNode = context.delayNode();
			delayNode.delayTime.value = 0.5;  // пол секунды
			source.connect(delayNode);
			delayNode.connect(destination);

Web Audio Modules: Gain + Delay

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

BufferLoader

Web Audio Modules: Gain + Delay

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

Web Audio Modules: Gain + Delay

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

Web Audio Modules: Gain + Delay

Web Audio Playground

Web Audio Modules: Convolution

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

Web Audio Modules: Convolution

Скачать готовые свертки

Web Audio Modules: Filter

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

Web Audio Modules: Filter

Web Audio Modules: Panner

Web Audio Modules: Panner

			const pannerNode = context.createPanner();
			 
			pannerNode.setPosition(pos.x, pos.y, pos.z);
			pannerNode.setOrientation(vec.x, vec.y, vec.z);
			pannerNode.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 Modules: Analyser

Web Audio API на примере написания визуализатора

Web Audio Destinations

Демо

Speech Synthesis API

Speech Synthesis API

Проверка

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

Воспроизводим фразу

			// Создаем фразу и воспроизводим ее
			const msg = new SpeechSynthesisUtterance('Is Yandex the best?');
			window.speechSynthesis.speak(msg);
			// Меняем голос
			const voices = window.speechSynthesis.getVoices();
			msg.voice = voices[10];
			msg.rate = 1; // Скорость от 0 до 10
			msg.pitch = 2; // Высота от 0 до 2
			msg.text = 'Yes, of course';
			msg.lang = 'en-US';

Speech Synthesis Voice

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

Speech Synthesis Events

SSML

Speech Synthesis API

Speech Recognition API

Speech Recognition API

Проверка

			const SpeechRecognition = 
				window.SpeechRecognition || window.webkitSpeechRecognition;
			 
			if (SpeechRecognition) {
			  // ...
			} else {
			  alert('Speech Recognition API не поддерживается');
			}

Использование

			const recognition = new SpeechRecognition();
			 
			recognition.lang = 'ru-RU';
			recognition.continuous = false;
			recognition.interimResults = false;
			recognition.maxAlternatives = 1;
			 
			recognition.start();
			recognition.stop();

Использование

			recognition.onstart = function() {  }
			recognition.onend = function() {  }
			 
			recognition.onerror = function(event) {
				console.error(event);
			};
			 
			recognition.onresult = function(event) {
				const result = event.results[0][0].transcript;
			 
				//...
			}

Speech Recognition API

Speech Recognition API

Яндекс.SpeechKit

Яндекс.SpeechKit

Демо

Спасибо за внимание