实现打开麦克风，并在页面捕获声音
- 初始化button. audio控件
- 绑定打开麦克风”响应事件onOpenMicrophone
- 如果要打开及克风则点击“打开及克风"按钮，以触发onOpenMlcrophone事件的调用
- 当触发onOpenCamera调用时
a、设置约束条件，即是getUserMedia函数的入参
b、getUserMedla有两种情况，一种是正常打开人 克风,使用handleSuccess处理，一 种是打开麦克风失败，使用handleError处理
c、当正常打开麦克风时，则将gelUserMedia返回的stream对象赋值给audio控件的srcObjec即可将声音播放出来
navigator.mediaDevices: navigator.mediaDevices官网学习地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打开麦克风</title>
</head>
<body>
<--controls：是否显示控件 -->
<audio id="local-audio" autoplay controls>播放麦克风捕获的声音</audio>
<button id="playAudio">打开麦克风</button>
<p>通过getUserMedia()获取音频</p>
</body>
<script type="text/javascript">
//约束条件
const constraints = {
audio: true,
video: false
}
//打开摄像头成功的处理
const handleSuccess = (stream => {
//处理打开摄像头成功
//获取video组件
const video = document.querySelector("#local-audio")
video.srcObject = stream
})
// 异常处理
const handleError = (err => {
console.error("getUserMedia error:" + err)
})
//点击按钮打开摄像头
const onOpenMicrophone = (e => {
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError)
})
document.getElementById("playAudio").addEventListener('click', onOpenMicrophone);
</script>
</html>
