Знакомство с API веб-аудио HTML5

JavaScript

предисловие

с прошлого разаВеселый разговор CDNПосле того, как я рассказал историю о «Чуан Дуннай», я больше никогда не писал в блоге. Может быть, некоторые друзья думали, что нас поймали, хахаха~

Давным-давно г-н Чжао Чжунсян сказал нам, что сезон дождей — хорошее время. Наступил сезон дождей, цветут весенние цветы, все восстанавливается, и это сезон программистов в прериях XX. Ну, подальше. Ведь младшие братья и сестры в команде слишком заняты, чтобы влюбляться, и им некогда писать блоги.

Получить продолжительность аудио

Есть такая необходимость загрузить аудиофайл и получить его размер и длину одновременно.

нормальный метод

Использовать эти воспоминания очень просто, напишите следующий код:

function getAudioDuration(url) {
  const audio = document.createElement('audio');
  audio.src = url;
  audio.addEventListener("canplay", function () {
		console.log(audio.duration);
  });
}

const file = document.getElementById('file');
file.addEventListener('change', (e) => {
  const file = e.target.files[0];
  console.log(file.size);
  getAudioDuration(URL.createObjectURL(file));
})

Когда я закончил приведенный выше код, я вспомнил критику главного инженера: Это решение слишком простое. Как только хризантема натянулась, я так испугалась, что быстро стала искать другие решения.

ArrayBuffer

На компьютере, когда мы выбираем файл MP3, мы обычно видим некоторую метаинформацию, такую ​​как продолжительность воспроизведения, частота дискретизации и т. д. Можем ли мы в этом случае получить соответствующую информацию, прочитав бинарные данные?

После запроса соответствующей информации мы обнаружили, что API decodeAudioData может удовлетворить наши потребности, поэтому у нас есть следующее решение.

function getAudioDurationByAudioApi(file) {
    const fileReader = new FileReader();
    const audioContext = new AudioContext();
    fileReader.readAsArrayBuffer(file);
    fileReader.onload = () => {
        audioContext.decodeAudioData(fileReader.result, (result) => {
            console.log(result);
        });
    }
}

const file = document.getElementById('file');
file.addEventListener('change', (e) => {
    const file = e.target.files[0];
    console.log(file.size);
    getAudioDurationByAudioApi(file);
})

Игнорируемый API веб-аудио

В ходе вышеупомянутого исследования я обнаружил, что пренебрегалWeb Audio API. В прошлом, когда речь шла о аудиозаписях, было очень просто воспроизвести фрагмент аудио с помощью тега audio. Поэтому я не обратил внимания на уже существующий Audio API.

взять каштан

Для практического применения возьмем простой пример воспроизведения аудио:

function playAudio(file) {
    const fileReader = new FileReader();
    const audioContext = new AudioContext();
    fileReader.readAsArrayBuffer(file);
    fileReader.onload = () => {
        audioContext.decodeAudioData(fileReader.result, (result) => {
          //创建播放源
          const source = audioContext.createBufferSource();
          source.buffer = result;
          //连接输出终端
          source.connect(audioContext.destination);
          //开始播放
          source.start();
        });
    }
};

const file = document.getElementById('file');
file.addEventListener('change', (e) => {
    playAudio(e.target.files[0]);
});

В приведенном выше примере просто используется соответствующий API для воспроизведения звука и анализа кода клавиши.

AudioContext

Прямой перевод - «аудиоконтент». Подобно контексту в холсте. Он содержит ряд API для управления звуком.

В приведенном выше коде объект AudioContext создается с помощью const audioContext = new AudioContext();, поэтому мы можем выполнять различные операции.

Создайте источник воспроизведения

В приведенном выше примере мы создали источник воспроизведения с помощью AudioContext.createBufferSource(). Кроме того, мы также можем использовать другие данные в качестве источника воспроизведения:

Чтобы узнать подробности, нажмите на ссылку.

Подключить вход и выход

Мы видим, что после установки источника воспроизведения выполняется операция подключения. Эта операция предназначена для привязки источника воспроизведения к терминалу воспроизведения.

AudioContextСвойство назначения возвращаетAudioDestinationNodeПредставляет конечный узел назначения всех аудио (узлов) в контексте, обычно это устройство воспроизведения звука, например динамик.

весело играть

В процессе изучения API, связанных с AudioContext, я нашел метод createAnalyser.

Способ Createanalyser может создатьAnalyserNode, который можно использовать для получения данных о времени и частоте звука, а также для визуализации данных.

Посмотрим на эффект.demo

Раньше, чтобы определить, что воспроизводится звук, мы часто помещали подпрыгивающий gif. Например:

Да это вообще не круто. Не могу не вспомнить слова главного инженера: этот план слишком прост.

В будущем, когда мы снова будем делать подобные запросы, мы сможем создать анимационный эффект, который будет следовать частоте музыки.

Суммировать

Мистер Лу сказал: «Никогда так, тогда не ты?»

Да, нам следует больше думать о существующих решениях.

Вышеизложенное — лишь верхушка айсберга API веб-аудио, и есть более продвинутые способы воспроизведения.Если вам интересно, вы можете проверить соответствующие документы.

Статьи по Теме

@Автор:TDGarden

Категории