多くのブラウザで、ユーザーからの動画入力と音声入力にアクセスできるようになりました。ただし、ブラウザによっては、完全な動的インライン エクスペリエンスになる場合もあれば、ユーザーのデバイス上の別のアプリに委任される場合もあります。
シンプルに始め、段階的に進める
最も簡単な方法は、事前に録音されたファイルをユーザーに依頼することです。これを行うには、シンプルなファイル入力要素を作成し、音声ファイルのみを受け入れることを示す 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 に渡してフィルタを適用する
音声データにアクセスする入力要素の方法はどこにでも見られますが、最も魅力的でない方法です。Google は、マイクにアクセスして、ページ内で快適なエクスペリエンスを提供したいと考えています。
マイクにインタラクティブにアクセスする
最新のブラウザはマイクと直接接続できるため、ウェブページと完全に統合されたエクスペリエンスを構築でき、ユーザーはブラウザを離れる必要がありません。
マイクへのアクセス権を取得する
WebRTC 仕様の getUserMedia() という API を使用して、マイクに直接アクセスできます。getUserMedia() は、接続されたマイクとカメラへのアクセスをユーザーに求めます。
成功すると、API はカメラまたはマイクのデータを含む Stream を返します。このデータを <audio> 要素に接続したり、WebRTC ストリームに接続したり、Web Audio AudioContext に接続したり、MediaRecorder API を使用して保存したりできます。
マイクからデータを取得するには、getUserMedia() API に渡される制約オブジェクトに 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 です。
接続できるノードの一つが AudioWorkletNode です。このノードを使用すると、カスタム オーディオ処理の低レベル機能を利用できます。実際の音声処理は、AudioWorkletProcessor の process() コールバック メソッドで行われます。この関数を呼び出して、入力とパラメータをフィードし、出力を取得します。
詳しくは、Enter Audio Worklet をご覧ください。
<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 に変換します。この 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 () {};
});