JavaScriptによるページ録音機能の実現

18494 ワード

ページに録音を実現するには、ブラウザが提供するMedia Recorder APIを使用する必要があるため、MediaStream Recording関連の機能をブラウザがサポートする必要があることを前提としています.次のコードはChrome環境でデフォルトで動作します.準備ページはまず1ページを用意し、その内容は簡単で、1つの録音ボタン、1つの再生用ラベルです.


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>audio recordtitle>
head>
<body>
    <div class="app">
        <button class="record-btn">recordbutton>
        <audio controls class="audio-player">audio>
    div>
    <script src="./recorder.js">script>
body>
html>

録音権限を取得するには装置のマイクを使用する必要があるので,第一歩はユーザに録音権限を要求することである.これはMedia Devicesを通じてです.get User Media()を使用して、次のように使用します.

var promise = navigator.mediaDevices.getUserMedia(constraints);

このうちconstraints取得する権限のリストは、ここではオーディオを指定するだけaudioでよい.ユーザーがいつ権限を付与するかは不明であるため、Promiseが返されます.Promiseのコールバックで承認の成功または失敗の処理を行います.使用前に、ブラウザが対応するAPIをサポートしているかどうかを判断する必要があります.この場合、次のコードが得られます.

if (navigator.mediaDevices.getUserMedia) {
  const constraints = { audio: true };
  navigator.mediaDevices.getUserMedia(constraints).then(
    stream => {
      console.log("    ！");
    },
    () => {
      console.error("    ！");
    }
  );
} else {
  console.error("       getUserMedia");
}

このうち成功コールで得られた入参streamはMediaStream対象である.実行すると、ブラウザにマイクの使用を許可するプロンプトが表示されます.前のステップで取得したMediaStreamMedia Recorderに転送されたコンストラクタは、マイク使用権限をユーザに要求して、レコーダインスタンスを作成する.

var mediaRecorder = new MediaRecorder(stream);

起動録音は、ページの録音ボタンのクリックを傍受して録音を開始します.

const recordBtn = document.querySelector(".record-btn");
const mediaRecorder = new MediaRecorder(stream);
recordBtn.onclick = () => {
  mediaRecorder.start();
  console.log("   ...");
};

MediaRecorder実例にはstate現在のレコーダーの活動状態を判断するための状態があり、合計3つの値がある.

inactive:休憩中であるか、開始していないか、開始後に停止しているか.

recording:レコーディング中

paused:すでに始まっていますが、一時停止されており、停止ではなく回復されていません.

この状態で、ボタンを再度クリックしたときに録音を終了することができます.

recordBtn.onclick = () => {
  if (mediaRecorder.state === "recording") {
    mediaRecorder.stop();
    recordBtn.textContent = "record";
    console.log("    ");
  } else {
    mediaRecorder.start();
    console.log("   ...");
    recordBtn.textContent = "stop";
  }
  console.log("     ：", mediaRecorder.state);
};

オーディオデータの取得上のボタンは,ユーザからのインタラクションを処理し,録音の開始または停止のみを担当する.オーディオのデータは、Media Recorderインスタンスから対応するイベントをリスニングすることによって達成される.録音が開始されると、そのMediaRecorder.ondataavailableイベントがトリガーされます.このイベントからコールバックされる入力はBlobEventで、その体からevent.dataが必要なオーディオデータです.データはセグメントごとに生成されるため、1つの配列に一時的に保存する必要があります.

const chunks = [];
mediaRecorder.ondataavailable = function(e) {
  chunks.push(e.data);
};

これまでに完了したコードは次のとおりです:recorder.js

const recordBtn = document.querySelector(".record-btn");
const playBtn = document.querySelector(".play-btn");

if (navigator.mediaDevices.getUserMedia) {
  var chunks = [];
  const constraints = { audio: true };
  navigator.mediaDevices.getUserMedia(constraints).then(
    stream => {
      console.log("    ！");

      const mediaRecorder = new MediaRecorder(stream);

      recordBtn.onclick = () => {
        if (mediaRecorder.state === "recording") {
          mediaRecorder.stop();
          recordBtn.textContent = "record";
          console.log("    ");
        } else {
          mediaRecorder.start();
          console.log("   ...");
          recordBtn.textContent = "stop";
        }
        console.log("     ：", mediaRecorder.state);
      };

      mediaRecorder.ondataavailable = function(e) {
        chunks.push(e.data);
      };
    },
    () => {
      console.error("    ！");
    }
  );
} else {
  console.error("       getUserMedia");
}

録音状態の閲覧録音終了および音声の再生は、傍受MediaRecorder.onstopイベントにより収集した音声データをBlobオブジェクトとして作成し、URL.createObjectURLHTML中ラベルで使用可能なリソースリンクとして作成する.

mediaRecorder.onstop = e => {
  var blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
  chunks = [];
  var audioURL = window.URL.createObjectURL(blob);
  audio.src = audioURL;
};

このうち、受信したオーディオデータを使用した後、chunks次回の録音時に使用しやすいように空にします.これまでに完了したコードは次のとおりです:recorder.js

const recordBtn = document.querySelector(".record-btn");
const player = document.querySelector(".audio-player");

if (navigator.mediaDevices.getUserMedia) {
  var chunks = [];
  const constraints = { audio: true };
  navigator.mediaDevices.getUserMedia(constraints).then(
    stream => {
      console.log("    ！");

      const mediaRecorder = new MediaRecorder(stream);

      recordBtn.onclick = () => {
        if (mediaRecorder.state === "recording") {
          mediaRecorder.stop();
          recordBtn.textContent = "record";
          console.log("    ");
        } else {
          mediaRecorder.start();
          console.log("   ...");
          recordBtn.textContent = "stop";
        }
        console.log("     ：", mediaRecorder.state);
      };

      mediaRecorder.ondataavailable = e => {
        chunks.push(e.data);
      };

      mediaRecorder.onstop = e => {
        var blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
        chunks = [];
        var audioURL = window.URL.createObjectURL(blob);
        player.src = audioURL;
      };
    },
    () => {
      console.error("    ！");
    }
  );
} else {
  console.error("       getUserMedia");
}

上記の手順を実行すると、簡単な録音機能が実現され、このアドレスでオンラインで体験できます.完全なコードは、倉庫wayou/audio-recorderで取得できます.関連リソース

MediaRecorder

MediaRecorder.onstop

URL.createObjectURL

転載先:https://www.cnblogs.com/Wayou/p/js_audio_recorder.html

h2oのmrubyハンドラで`/robots.txt`を出し分ける

yamanekko版mruby-ev3rtのAPIリファレンス