Создайте приложение для записи голоса, используя только JavaScript и HTML

Современные браузеры предоставляют API для доступа к входу микрофона/камеры и записи их непосредственно в браузере. Для этого не требуются внешние библиотеки или пакеты. Чтобы создать диктофон в браузере, мы обратимся к двум API-интерфейсам JavaScript, чтобы получить доступ к микрофонному входу пользователя и записать их.

MediaRecorder API — это API JavaScript, который позволяет записывать аудио и видео в браузере. Он является частью стандарта WebRTC (Web Real-Time Communications), который предоставляет веб-браузерам поддержку связи в реальном времени, такой как голосовые и видеозвонки, без необходимости использования плагинов или другого внешнего программного обеспечения.

MediaRecorder API предоставляет способ записи аудио- и видеоданных из объекта MediaStream, который представляет собой поток аудио- и/или видеоданных из одного или нескольких источников мультимедиа (например, микрофона или камеры устройства). MediaRecorder API позволяет управлять процессом записи, включая запуск и остановку записи, а также обработку записанных данных по мере их появления.

Вы можете узнать больше об MediaRecorder API и о том, как его использовать, на веб-сайте Mozilla Developer Network:

Давайте создадим приложение "Диктофон":

Чтобы создать диктофон с помощью JavaScript и HTML, вы можете использовать метод navigator.mediaDevices.getUserMedia() для доступа к микрофону устройства и API MediaRecorder для записи звука. Давайте перейдем к примеру.

<!-- HTML for the page -->
<h1>Voice Recorder</h1>
<p>Click the "Start Recording" button to start recording audio from your microphone.</p>

<button id="start-button">Start Recording</button>
<button id="stop-button" disabled>Stop Recording</button>

<p>Recordings:</p>
<ol id="recordings-list"></ol>
// JavaScript for the page
const startButton = document.getElementById('start-button');
const stopButton = document.getElementById('stop-button');
const recordingsList = document.getElementById('recordings-list');

let mediaRecorder;
let audioChunks = [];

// Helper function to add a new recording to the page
function addRecording(blob) {
  // Create a new audio element
  const audio = document.createElement('audio');
  // Set its source to the recorded blob
  audio.src = URL.createObjectURL(blob);
  audio.controls = true;
  // Add it to the page
  recordingsList.appendChild(audio);
}

// Function to handle the "start recording" button click
function startRecording() {
  // Request access to the microphone
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      // Create a new MediaRecorder instance to record the audio
      mediaRecorder = new MediaRecorder(stream);
      // Add an event listener to be notified when a new chunk of audio is available
      mediaRecorder.addEventListener('dataavailable', event => {
        // Push the new chunk of audio to the array
        audioChunks.push(event.data);
      });
      // Add an event listener to be notified when the recording is finished
      mediaRecorder.addEventListener('stop', () => {
        // Create a new blob from the recorded audio
        const audioBlob = new Blob(audioChunks);
        // Add the recorded audio to the page
        addRecording(audioBlob);
      });
      // Start recording the audio
      mediaRecorder.start();
      // Update the UI
      startButton.disabled = true;
      stopButton.disabled = false;
    })
    .catch(error => {
      // Handle any errors that occurred
      console.error(error);
    });
}

// Function to handle the "stop recording" button click
function stopRecording() {
  // Stop the media recorder
  mediaRecorder.stop();
  // Update the UI
  startButton.disabled = false;
  stopButton.disabled = true;
}

// Add event listeners for the start and stop buttons
startButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);

В этом примере создается простая страница с двумя кнопками: «Начать запись» и «Остановить запись». Когда пользователь нажимает кнопку «Начать запись», код запрашивает доступ к микрофону устройства с помощью метода navigator.mediaDevices.getUserMedia() и начинает запись звука с помощью MediaRecorder API. Когда пользователь нажимает кнопку «Остановить запись», код останавливает запись и добавляет записанный звук на страницу в виде нового элемента <audio>.

Это всего лишь один из способов создать простой диктофон с помощью JavaScript и HTML. Вы можете изменить и расширить этот пример в соответствии с вашими конкретными потребностями и требованиями.

Посмотрите мой профиль GitHub. Подпишитесь на меня в Twitter, LinkedIn, YouTube и Facebook.