Не волнуйся, это здесь! API, который не только отбелит зубы и улучшит осанку, но и чудесным образом добавит звук на ваш сайт *. Это API Web Audio ! Никогда об этом не слышал? Не беспокойся Этот урок поможет вам быстро приступить к работе.
Web Audio API — это высокоуровневый способ создания и управления звуком непосредственно в браузере через JavaScript. Это позволяет вам генерировать аудио с нуля или загружать и манипулировать любым существующим аудио файлом, который у вас может быть. Он чрезвычайно мощный, даже имея собственную систему синхронизации, обеспечивающую воспроизведение за доли секунды.
«Разве я не могу просто использовать элемент <audio> ?». Хорошо, да, но это действительно зависит от вашего варианта использования. Элемент <audio> идеально подходит для встраивания и воспроизведения аудиоклипов, таких как музыка или подкасты, но если вам требуется немного больше средств управления, таких как программное управление громкостью или добавление эффектов, то Web Audio API будет прямо на вашей Tin Pan Alley ,
Сделать звук
Давайте углубимся в это. Чтобы начать играть с Web Audio API, нам нужно убедиться, что мы используем браузер, который его поддерживает. Давайте проверим caniuse.com . Похоже, поддержка браузера довольно хорошая — только Internet Explorer не поддерживает API на данный момент, но это скоро изменится, так как в настоящее время он внедряется для включения в следующий основной выпуск.
Давайте сделаем все просто, создав базовую HTML-страницу с элементом <script> и следующим содержимым.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<!doctype html>
<html>
<head>
<title>Web Audio API</title>
</head>
<body>
<h1>Welcome to the Web Audio API</h1>
<script>
// Create the audio context
var audioContext = new AudioContext();
// If you’re using Safari, you’ll need to use this line instead
var audioContext = new webkitAudioContext();
</script>
</body>
</html>
|
AudioContext — это небольшой контейнер, в котором будет жить весь наш звук. Он предоставляет доступ к API Web Audio, что, в свою очередь, дает нам доступ к некоторым очень мощным функциям. Однако прежде чем продолжить, важно понять важную концепцию Web Audio API: узлы.
Вершины
Давайте возьмем в качестве курчавого астрофизика и гитариста Queen Брайана Мэя . Когда Брайан хочет играть на своей гитаре, он берет на себя инициативу со своей гитары и подключает ее к педали эффектов, как педаль искажения. Затем он подключает другой провод от своей педали искажения к другому эффекту или к своему усилителю. Это позволяет звуку исходить из его гитары, манипулировать им, а затем выводиться на динамик, чтобы люди могли слышать его рок-риффы. Именно так работает API Web Audio. Звук передается от одного узла к другому, им манипулируют, пока он не будет, наконец, выведен на ваши динамики.
Вот основной пример. Добавьте следующее в ваш <script> .
|
1
2
3
4
5
|
var context = new AudioContext(),
oscillator = context.createOscillator();
// Connect the oscillator to our speakers
oscillator.connect(context.destination);
|
Здесь мы создали генератор . Осциллятор — это тип генератора звука, который даст нам простой тон. Мы взяли на себя инициативу генератора и подключили его к нашим динамикам, иначе известным в веб-аудио мире как context.destination .
Теперь, когда все связано, нам просто нужно запустить генератор, чтобы мы могли его услышать. Убедитесь, что ваши динамики не слишком громкие!
|
1
2
|
// Start the oscillator now
oscillator.start(context.currentTime);
|
Теперь вы должны услышать что-то, когда ваша страница загружается. Чтобы остановить воспроизведение осциллятора через несколько секунд, просто добавьте следующее.
|
1
2
|
// Stop the oscillator 3 seconds from now
oscillator.stop(context.currentTime + 3);
|
Слышать что-то? Отлично, ты только что сделал звук в браузере!
Аудио файлы
Теперь вы можете думать: «Осцилляторы ?! У меня нет на это времени, я важный деловой человек, у которого много деловых встреч и деловых обедов! », Что совершенно нормально. Делать звук таким образом не для всех. К счастью, есть другой способ.
Допустим, вместо этого вы хотите воспроизвести обычный mp3-файл. Web Audio API может сделать это тоже. Сначала мы должны загрузить аудиофайл через нашего старого друга XMLHttpRequest . Помните, что при загрузке файлов с использованием этого метода ваша страница должна обслуживаться через сервер, а не просто загружаться из локальной файловой системы. Чтобы избежать каких-либо осложнений, убедитесь, что ваш mp3-файл подается таким же образом и из того же места.
|
01
02
03
04
05
06
07
08
09
10
|
var request = new XMLHttpRequest();
request.open(‘GET’, ‘my.mp3’, true);
request.responseType = ‘arraybuffer’;
request.onload = function () {
var undecodedAudio = request.response;
};
request.send();
|
Когда аудиофайл полностью загружен браузером, событие onload запускается и возвращает аудиоданные в атрибуте response. На данный момент он сохраняется как ArrayBuffer, но для того, чтобы извлечь из него аудиоданные, мы должны преобразовать его в AudioBuffer. Представьте себе AudioBuffer как небольшой контейнер, который хранит наши аудиоданные в памяти для нас. Для этого мы используем функцию decodeAudioData .
|
1
2
3
4
5
6
7
8
|
request.onload = function () {
var undecodedAudio = request.response;
context.decodeAudioData(undecodedAudio, function (buffer) {
// The contents of our mp3 is now an AudioBuffer
console.log(buffer);
});
};
|
Как только у нас есть AudioBuffer, содержащий наши аудиоданные, нам нужно найти способ их воспроизведения. Вы не можете воспроизводить AudioBuffer напрямую — его нужно загрузить в специальный AudioBufferSourceNode . Этот узел похож на проигрыватель, а буфер представляет собой виниловую пластинку с музыкой. Или, чтобы привести мою аналогию в актуальное состояние, узел похож на магнитофон, а буфер — на кассету …
|
01
02
03
04
05
06
07
08
09
10
11
|
request.onload = function () {
var undecodedAudio = request.response;
context.decodeAudioData(undecodedAudio, function (buffer) {
// Create the AudioBufferSourceNode
var sourceBuffer = context.createBufferSource();
// Tell the AudioBufferSourceNode to use this AudioBuffer.
sourceBuffer.buffer = buffer;
});
};
|
Теперь запись на проигрывателе готова к воспроизведению. Но помните, мы используем API Web Audio, а API Web Audio требует, чтобы мы связывали узлы вместе, чтобы передавать звук нашим колонкам. Так что давайте просто сделаем то, что мы делали ранее с нашим генератором, и подключим наш исходный узел к нашим динамикам ( context.destination ).
|
01
02
03
04
05
06
07
08
09
10
|
request.onload = function () {
var undecodedAudio = request.response;
context.decodeAudioData(undecodedAudio, function (buffer) {
var sourceBuffer = context.createBufferSource();
sourceBuffer.buffer = buffer;
sourceBuffer.connect(context.destination);
});
};
|
Опять же, теперь, когда все подключено, мы можем легко начать воспроизведение содержимого mp3, сказав AudioBufferSourceNode для воспроизведения в этот самый момент времени.
|
1
|
sourceBuffer.start(context.currentTime);
|
Прекрасный!
Резюме
В этом уроке мы узнали, как использовать API-интерфейс Web Audio для создания звука в браузере, а также как загружать и воспроизводить mp3-файлы. API способен на гораздо большее, и я с нетерпением жду возможности продемонстрировать его потенциал в будущих уроках.
Весь код из этого урока доступен на GitHub .
* К сожалению, API Web Audio в настоящее время не поддерживает отбеливание зубов или улучшение осанки.