H5录音效果 html录音 html5麦克风权限

HTML5提供了一个名为getUserMedia的API，可以用来获取设备的麦克风音频数据。以下是一个简单的例子，展示了如何使用HTML5获取用户的麦克风权限，并进行录音，然后将录音转换为音频效果。




<!DOCTYPE html>
<html>
<body>
 
<button onclick="startRecording()">开始录音</button>
<button onclick="stopRecording()" disabled>停止录音</button>
<button onclick="playRecording()" disabled>播放录音</button>
<br>
<audio id="recording" controls></audio>
 
<script>
var onSuccess = function(stream) {
  var mediaRecorder = new MediaRecorder(stream);
 
  function startRecording() {
    mediaRecorder.start();
    document.getElementById('stopRecording').disabled = false;
    document.getElementById('startRecording').disabled = true;
  }
 
  function stopRecording() {
    mediaRecorder.stop();
    document.getElementById('startRecording').disabled = false;
    document.getElementById('stopRecording').disabled = true;
  }
 
  function playRecording() {
    var audio = document.getElementById('recording');
    audio.src = URL.createObjectURL(new Blob(recordedBlobs));
    audio.play();
  }
 
  var recordedBlobs;
  mediaRecorder.ondataavailable = function(event) {
    if (!recordedBlobs) {
      recordedBlobs = [];
    }
    recordedBlobs.push(event.data);
  };
 
  mediaRecorder.onstop = function() {
    document.getElementById('playRecording').disabled = false;
  };
};
 
var onError = function(error) {
  console.log('navigator.getUserMedia error: ', error);
};
 
navigator.mediaDevices.getUserMedia({ audio: true }).then(onSuccess).catch(onError);
</script>
 
</body>
</html>

这段代码首先尝试通过navigator.mediaDevices.getUserMedia获取麦克风的使用权限。如果获取成功，会创建一个MediaRecorder实例来处理音频流。用户可以点击“开始录音”按钮来开始录音，录音结束后可以点击“停止录音”按钮停止，然后点击“播放录音”按钮来播放录制的音频。这个例子展示了基本的录音、停止和播放功能。

H5录音效果 html录音 html5麦克风权限

评论已关闭

推荐阅读