时间戳

首页 > 解决方案 > 浏览器的音频记录或麦克风对按钮单击而不是页面加载的权限

javascript - 浏览器的音频记录或麦克风对按钮单击而不是页面加载的权限

问题描述

我有用户使用 MediaStream Recording API 使用麦克风录制音频，录制效果很好，但如果不允许浏览器录制语音，然后单击录制按钮，它不会显示任何错误，

我想要的是如果用户不允许语音并且仍然再次单击录制按钮浏览器以获得录音权限。

我已经尝试了以下代码的几个选项，但不幸的是，它不起作用，有人可以帮我解决这个问题吗？

在初始拒绝后使用 getUserMedia() 重新提示权限时提出了相同的问题或类似问题，但仍然没有解决该问题，希望找到最合适的答案，以在初始化页面后解决重新提示权限弹出窗口。

<body>
  <div class="wrapper">
    <section class="main-controls">
      <canvas class="visualizer" height="60px" style="display:none"></canvas>
      <div id="buttons" style="margin-bottom:20px;">
        <button class="record">Record</button>
        <button class="stop">Stop</button>
      </div>
    </section>
    <section class="sound-clips"></section>
  </div>
  <script>
    const record = document.querySelector('.record');
    const stop = document.querySelector('.stop');
    const soundClips = document.querySelector('.sound-clips');
    const mainSection = document.querySelector('.main-controls');

    stop.disabled = true;
    let audioCtx;

    if (navigator.mediaDevices.getUserMedia) {
      const constraints = {
        audio: true
      };
      let chunks = [];

      let onSuccess = function(stream) {
        const mediaRecorder = new MediaRecorder(stream);

        visualize(stream);

        record.onclick = function() {
          //ask for browser's audio record or microphone permission here
          if (navigator.mediaDevices.getUserMedia) {
            mediaRecorder.start();
            console.log("recorder started");
            record.style.background = "red";
            stop.disabled = false;
            record.disabled = true;
          }
        }

        stop.onclick = function() {
          mediaRecorder.stop();
          console.log(mediaRecorder.state);
          console.log("recorder stopped");
          record.style.background = "";
          record.style.color = "";
          stop.disabled = true;
          record.disabled = false;
        }

        mediaRecorder.onstop = function(e) {
          const clipContainer = document.createElement('article');
          const clipLabel = document.createElement('p');
          const audio = document.createElement('audio');
          clipContainer.classList.add('clip');
          audio.setAttribute('controls', '');
          clipContainer.appendChild(audio);
          clipContainer.appendChild(clipLabel);
          soundClips.appendChild(clipContainer);

          audio.controls = true;
          const blob = new Blob(chunks, {
            'type': 'audio/ogg; codecs=opus'
          });
          chunks = [];
          const audioURL = window.URL.createObjectURL(blob);
          audio.src = audioURL;
          console.log("recorder stopped");


          clipLabel.onclick = function() {
            const existingName = clipLabel.textContent;
            const newClipName = prompt('Enter a new name for your sound clip?');
            if (newClipName === null) {
              clipLabel.textContent = existingName;
            } else {
              clipLabel.textContent = newClipName;
            }
          }
        }

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

      let onError = function(err) {
        console.log('The following error occured: ' + err);
      }

      navigator.mediaDevices.getUserMedia(constraints).then(onSuccess, onError);

    } else {
      console.log('getUserMedia not supported on your browser!');
    }

    function visualize(stream) {
      if (!audioCtx) {
        audioCtx = new AudioContext();
      }

      const source = audioCtx.createMediaStreamSource(stream);

      const analyser = audioCtx.createAnalyser();
      analyser.fftSize = 2048;
      const bufferLength = analyser.frequencyBinCount;
      const dataArray = new Uint8Array(bufferLength);

      source.connect(analyser);
    }
  </script>
</body>

标签： javascriptpermissionsgetusermediaweb-mediarecorder

解决方案

推荐阅读