AudioContext: метод createMediaStreamDestination()

Базовая Широко доступная

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

Метод createMediaStreamDestination() интерфейса AudioContext используется для создания нового объекта MediaStreamAudioDestinationNode, связанного с потоком WebRTC MediaStream, представляющим аудиопоток, который может храниться в локальном файле или отправляться на другой компьютер.

Поток MediaStream создаётся при создании узла и доступен через атрибут MediaStreamAudioDestinationNode's stream. Этот поток можно использовать аналогично потоку MediaStream, полученному через navigator.getUserMedia — например, его можно отправить удалённому участнику с помощью метода addStream() объекта RTCPeerConnection.

Дополнительную информацию об узлах назначения потока медиа см. на странице справки MediaStreamAudioDestinationNode.

Синтаксис

createMediaStreamDestination()

Параметры

Нет.

Возвращаемое значение

Объект MediaStreamAudioDestinationNode.

Примеры

В следующем простом примере мы создаём MediaStreamAudioDestinationNode, OscillatorNode и MediaRecorder (поэтому пример в настоящее время будет работать только в Firefox и Chrome). MediaRecorder настроен для записи информации из MediaStreamDestinationNode.

При нажатии на кнопку генератор синусоиды начинает работу, и MediaRecorder запускается. При остановке кнопки и генератор синусоиды, и MediaRecorder останавливаются. Остановка записи MediaRecorder вызывает срабатывание события dataavailable, и данные события добавляются в массив chunks. После этого срабатывает событие stop, создается новый объект blob типа opus, содержащий данные из массива chunks, и открывается новая вкладка (окно), указывающая на созданный URL из Blob.

Затем вы можете воспроизвести и сохранить файл opus.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>createMediaStreamDestination() demo</title>
  </head>
  <body>
    <h1>createMediaStreamDestination() demo</h1>

    <p>Encoding a pure sine wave to an Opus file</p>
    <button>Make sine wave</button>
    <audio controls></audio>
    <script>
      const b = document.querySelector("button");
      let clicked = false;
      const chunks = [];
      const ac = new AudioContext();
      const osc = ac.createOscillator();
      const dest = ac.createMediaStreamDestination();
      const mediaRecorder = new MediaRecorder(dest.stream);
      osc.connect(dest);

      b.addEventListener("click", (e) => {
        if (!clicked) {
          mediaRecorder.start();
          osc.start(0);
          e.target.textContent = "Stop recording";
          clicked = true;
        } else {
          mediaRecorder.stop();
          osc.stop(0);
          e.target.disabled = true;
        }
      });

      mediaRecorder.ondataavailable = (evt) => {
        // Push each chunk (blobs) in an array
        chunks.push(evt.data);
      };

      mediaRecorder.onstop = (evt) => {
        // Make blob out of our blobs, and open it.
        const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
        document.querySelector("audio").src = URL.createObjectURL(blob);
      };
    </script>
  </body>
</html>

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

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

Спецификация
Web Audio API # dom-audiocontext-createmediastreamdestination

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`createMediaStreamDestination`	25	79	25	15	11	25	25	14	11	1.5	≤37

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaStreamDestination