AudioBufferSourceNode: свойство playbackRate

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с апреля 2021 года.

Свойство playbackRate интерфейса AudioBufferSourceNode — это параметр k-rate AudioParam, определяющий скорость воспроизведения аудио-актива.

Значение 1.0 указывает на воспроизведение с той же скоростью, что и частота дискретизации; значения меньше 1.0 приводят к более медленному воспроизведению звука, а значения больше 1.0 — к более быстрому воспроизведению звука. Значение по умолчанию — 1.0. При изменении значения AudioBufferSourceNode передискретизирует аудио перед отправкой на выход.

Значение

Параметр AudioParam, значение которого — число с плавающей запятой, указывающее на скорость воспроизведения аудио как десятичную долю исходной частоты дискретизации.

Рассмотрим звуковой буфер, содержащий аудио, дискретизированное с частотой 44,1 кГц (44 100 выборок в секунду). Посмотрим, что делают несколько значений playbackRate:

Значение playbackRate 1.0 воспроизводит аудио с полной скоростью, или 44 100 Гц.
Значение playbackRate 0,5 воспроизводит аудио с половинной скоростью, или 22 050 Гц.
Значение playbackRate 2.0 удваивает скорость воспроизведения аудио до 88 200 Гц.

Примеры

Установка `playbackRate`

В этом примере при нажатии пользователем «Воспроизвести» мы загружаем аудиодорожку, декодируем её и помещаем в AudioBufferSourceNode.

Затем в примере свойство loop устанавливается на true, поэтому дорожка циклически воспроизводится.

Пользователь может установить свойство playbackRate с помощью элемента управления ползунком.

Примечание: Вы можете запустить полный пример онлайн (или посмотреть исходный код.)

let audioCtx;
let buffer;
let source;

const play = document.getElementById("play");
const stop = document.getElementById("stop");

const playbackControl = document.getElementById("playback-rate-control");
const playbackValue = document.getElementById("playback-rate-value");

async function loadAudio() {
  try {
    // Load an audio file
    const response = await fetch("rnb-lofi-melody-loop.wav");
    // Decode it
    buffer = await audioCtx.decodeAudioData(await response.arrayBuffer());
  } catch (err) {
    console.error(`Unable to fetch the audio file. Error: ${err.message}`);
  }
}

play.addEventListener("click", async () => {
  if (!audioCtx) {
    audioCtx = new AudioContext();
    await loadAudio();
  }
  source = audioCtx.createBufferSource();
  source.buffer = buffer;
  source.connect(audioCtx.destination);
  source.loop = true;
  source.playbackRate.value = playbackControl.value;
  source.start();
  play.disabled = true;
  stop.disabled = false;
  playbackControl.disabled = false;
});

stop.addEventListener("click", () => {
  source.stop();
  play.disabled = false;
  stop.disabled = true;
  playbackControl.disabled = true;
});

playbackControl.oninput = () => {
  source.playbackRate.value = playbackControl.value;
  playbackValue.textContent = playbackControl.value;
};

Спецификации

Спецификация
Web Audio API # dom-audiobuffersourcenode-playbackrate

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`playbackRate`	14	12	25	15	6	18	25	14	6	1.0	4.4.3

См. также