ユーザーの音声の録音

多くのブラウザで、ユーザーの映像と音声入力にアクセスできるようになりました。ただし、ブラウザによっては、完全に動的なインライン エクスペリエンスになる場合や、ユーザーのデバイス上の別のアプリに委任される場合があります。

シンプルかつ段階的に始める

最も簡単な方法は、事前に録音したファイルをユーザーに尋ねることです。これを行うには、シンプルなファイル入力要素を作成し、音声ファイルのみを受け入れることを示す accept フィルタと、マイクから直接取得する必要があることを示す capture 属性を追加します。

<input type="file" accept="audio/*" capture />

この方法はすべてのプラットフォームで機能します。パソコンの場合、ファイル システムからファイルをアップロードするように求められます(capture 属性は無視します)。iOS の Safari ではマイクアプリが開き、録音した音声をウェブページに送り返すことができます。Android の場合は、ウェブページに送り返す前に、どのアプリで録音するかを選択できるようになります。

ユーザーが録画を終了してウェブサイトに戻ったら、なんらかの方法でファイルデータを取得する必要があります。onchange イベントを入力要素にアタッチし、イベント オブジェクトの files プロパティを読み取ると、すばやくアクセスできます。

<input type="file" accept="audio/*" capture id="recorder" />
<audio id="player" controls></audio>
  <script>
    const recorder = document.getElementById('recorder');
    const player = document.getElementById('player');

    recorder.addEventListener('change', function (e) {
      const file = e.target.files[0];
      const url = URL.createObjectURL(file);
      // Do something with the audio file.
      player.src = url;
    });
  </script>
</audio>

ファイルにアクセスできるようになったら、そのファイルでさまざまな操作を行うことができます。たとえば、下記の設定が可能です。

  • <audio> 要素に直接アタッチして、再生できるようにします。
  • ユーザーのデバイスにダウンロードする
  • XMLHttpRequest にアタッチしてサーバーにアップロードします。
  • Web Audio API に渡してフィルタを適用します。

入力要素方式を使用して音声データにアクセスする方法は広く使用されていますが、この方法は最も魅力的ではありません。そこで、マイクにアクセスして、ページ上で直接快適に利用できるようにしたいと考えています。

マイクにインタラクティブにアクセスする

最新のブラウザではマイクに直接接続できるため、ウェブページと完全に統合されたエクスペリエンスを構築でき、ユーザーはブラウザから離れることはありません。

マイクへのアクセス権を取得する

マイクに直接アクセスするには、getUserMedia() という WebRTC 仕様の API を使用します。getUserMedia() は、接続されているマイクとカメラへのアクセス権をユーザーに求めます。

成功すると、API はカメラまたはマイクのデータを含む Stream を返します。これを <audio> 要素、WebRTC ストリーム、ウェブ オーディオ AudioContext にアタッチするか、MediaRecorder API を使用して保存できます。

マイクからデータを取得するには、getUserMedia() API に渡される constraints オブジェクトで audio: true を設定します。

<audio id="player" controls></audio>
<script>
  const player = document.getElementById('player');

  const handleSuccess = function (stream) {
    if (window.URL) {
      player.srcObject = stream;
    } else {
      player.src = stream;
    }
  };

  navigator.mediaDevices
    .getUserMedia({audio: true, video: false})
    .then(handleSuccess);
</script>

特定のマイクを選択する場合は、最初に利用可能なマイクを列挙できます。

navigator.mediaDevices.enumerateDevices().then((devices) => {
  devices = devices.filter((d) => d.kind === 'audioinput');
});

その後、getUserMedia を呼び出すときに使用する deviceId を渡すことができます。

navigator.mediaDevices.getUserMedia({
  audio: {
    deviceId: devices[0].deviceId,
  },
});

単独ではあまり役に立ちません。音声データを取得して再生することしかできません。

マイクの元データにアクセスする

マイクの元データにアクセスするには、getUserMedia() によって作成されたストリームを取得し、Web Audio API を使用してデータを処理する必要があります。Web Audio API は、入力ソースを受け取り、そのソースを、音声データの処理(ゲインの調整など)が可能なノードに接続し、最終的にはユーザーが聞けるようにスピーカーに接続するシンプルな API です。

接続できるノードの 1 つは AudioWorkletNode です。このノードは、カスタム音声処理の低レベルの機能を提供します。実際の音声処理は、AudioWorkletProcessorprocess() コールバック メソッドで行われます。この関数を呼び出して、入力とパラメータをフィードし、出力を取得します。

詳しくは、オーディオ ワークレットを入力するをご覧ください。

<script>
  const handleSuccess = async function(stream) {
    const context = new AudioContext();
    const source = context.createMediaStreamSource(stream);

    await context.audioWorklet.addModule("processor.js");
    const worklet = new AudioWorkletNode(context, "worklet-processor");

    source.connect(worklet);
    worklet.connect(context.destination);
  };

  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
      .then(handleSuccess);
</script>
// processor.js
class WorkletProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    // Do something with the data, e.g. convert it to WAV
    console.log(inputs);
    return true;
  }
}

registerProcessor("worklet-processor", WorkletProcessor);

バッファに保持されるデータはマイクの未加工データであり、このデータに対していくつかの方法があります。

  • サーバーに直接アップロードする
  • ローカルに保存する
  • WAV などの専用のファイル形式に変換してから、サーバーまたはローカルに保存します。

マイクのデータを保存する

マイクのデータを保存する最も簡単な方法は、MediaRecorder API を使用することです。

MediaRecorder API は、getUserMedia によって作成されたストリームを取得し、ストリーム上のデータを目的の宛先に段階的に保存します。

<a id="download">Download</a>
<button id="stop">Stop</button>
<script>
  const downloadLink = document.getElementById('download');
  const stopButton = document.getElementById('stop');


  const handleSuccess = function(stream) {
    const options = {mimeType: 'audio/webm'};
    const recordedChunks = [];
    const mediaRecorder = new MediaRecorder(stream, options);

    mediaRecorder.addEventListener('dataavailable', function(e) {
      if (e.data.size > 0) recordedChunks.push(e.data);
    });

    mediaRecorder.addEventListener('stop', function() {
      downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
      downloadLink.download = 'acetest.wav';
    });

    stopButton.addEventListener('click', function() {
      mediaRecorder.stop();
    });

    mediaRecorder.start();
  };

  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
      .then(handleSuccess);
</script>

この例では、データを配列に直接保存して、後で Blob に変換できます。この配列を使用して、データをウェブサーバーやユーザーのデバイスのストレージに直接保存できます。

マイクを責任を持って使用する許可を求める

ユーザーがサイトにマイクへのアクセスを許可していない場合は、getUserMedia を呼び出した瞬間に、サイトにマイクへのアクセスを許可するよう求められます。

ユーザーは、自分のマシン上の高機能なデバイスへのアクセスを要求されることを好まず、多くの場合、そのリクエストをブロックするか、プロンプトが作成されたコンテキストを理解していないと無視します。マイクへのアクセスを要求するのは、初めて必要になったときのみにすることをおすすめします。ユーザーがアクセス権を付与すると、再度リクエストされることはありませんが、ユーザーがアクセスを拒否した場合、再度ユーザーに権限をリクエストすることはできません。

権限 API を使用して、すでにアクセス権があるかどうかを確認する

getUserMedia API では、すでにマイクにアクセスできるかどうかを知ることはできません。この場合、問題が発生します。ユーザーにマイクへのアクセスを許可してもらうための適切な UI を提供するには、マイクへのアクセスを要求する必要があります。

一部のブラウザでは、Permission API を使用して問題を解決できます。navigator.permission API を使用すると、プロンプトを再度表示することなく、特定の API にアクセスできる状態をクエリできます。

ユーザーのマイクにアクセスできるかどうかを照会するには、{name: 'microphone'} をクエリメソッドに渡すと、次のいずれかが返されます。

  • granted - ユーザーが以前にマイクへのアクセスを許可しています。
  • prompt - ユーザーがアクセス権を付与していません。getUserMedia を呼び出すとメッセージが表示されます。
  • denied - システムまたはユーザーがマイクへのアクセスを明示的にブロックしているため、アクセスできません。

これで、ユーザーが行う必要があるアクションに対応するためにユーザー インターフェースを変更する必要があるかどうかを簡単に確認できます。

navigator.permissions.query({name: 'microphone'}).then(function (result) {
  if (result.state == 'granted') {
  } else if (result.state == 'prompt') {
  } else if (result.state == 'denied') {
  }
  result.onchange = function () {};
});

フィードバック