在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

MediaStreamConstraints dictionary's audio property is used to indicate what kind of audio track, if any, should be included in the MediaStream returned by a call to getUserMedia() .

To learn more about how constraints work, see Capabilities, constraints, and settings .

句法

var audioConstraints = true | false | MediaTrackConstraints;
					

值

值对于 audio property can be specified as either of two types:

布尔

If a Boolean value is specified, it simply indicates whether or not an audio track should be included in the returned stream; if it's true , an audio track is included; if no audio source is available or if permission is not given to use the audio source, the call to getUserMedia() will fail. If false , no audio track is included.

MediaTrackConstraints

A constraints dictionary detailing the preferable and/or required values or ranges of values for the track's constrainable properties. If you specify constraints, an audio track meeting the constraints is required.

范例

For browsers with Feature Policy enabled, the samples below need the microphone feature enabled. See 安全性 in MediaDevices.getUserMedia() for details and examples on how to configure this.

Using a Boolean value

In this example, we provide a simple value of true 为 audio property. This tells getUserMedia() that we require an audio track, but we don't care about any specifics beyond that.

HTML 内容

<p>Click the start button below to begin the demonstration.</p>
<div id="startButton" class="button">
  开始
</div>
<audio id="audio" autoplay controls></audio><br>
<div id="log"></div>
					

CSS content

body {
  font: 14px "Open Sans", "Arial", sans-serif;
}
audio {
  margin-top: 20px;
  border: 1px solid black;
  width: 160px;
}
.button {
  cursor: pointer;
  width: 160px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
}
					

JavaScript 内容

let audioElement = document.getElementById("audio");
let logElement = document.getElementById("log");
function log(msg) {
 logElement.innerHTML += msg + "<br>";
}
					

document.getElementById("startButton").addEventListener("click", function() {
  navigator.mediaDevices.getUserMedia({
    audio: true
  }).then(stream => audioElement.srcObject = stream)
    .catch(err => log(err.name + ": " + err.message));
}, false);
					

Here we see an event handler for a click event which uses getUserMedia() to obtain an audio-only stream with no specific constraints, then attaches the resulting stream to an <audio> element once the stream is returned.

结果

Using a MediaTrackConstraints object

Now let's look at a similar example that uses a set of constraints based on the MediaTrackConstraints dictionary:

HTML 内容

<p>Click the start button below to begin the demonstration.</p>
<div id="startButton" class="button">
  开始
</div>
<audio id="audio" autoplay controls></audio><br>
<div id="log"></div>
					

CSS content

body {
  font: 14px "Open Sans", "Arial", sans-serif;
}
audio {
  margin-top: 20px;
  border: 1px solid black;
  width: 160px;
}
.button {
  cursor: pointer;
  width: 160px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
}
					

JavaScript 内容

let audioElement = document.getElementById("audio");
let logElement = document.getElementById("log");
function log(msg) {
 logElement.innerHTML += msg + "<br>";
}
					

document.getElementById("startButton").addEventListener("click", function() {
  navigator.mediaDevices.getUserMedia({
    audio: {
      sampleSize: 8,
      echoCancellation: true
    }
  }).then(stream => audioElement.srcObject = stream)
    .catch(err => log(err.name + ": " + err.message));
}, false);
					

Here we see an event handler for a click event which calls getUserMedia() , specifying a set of audio constraints requesting that echo cancellation be enabled and that, if possible, the sample rate be 8 bits per sample instead of the more common 16 bits (possibly as a bandwidth saving measure). As long as an audio input device is available and the user allows it to be used, an audio track will be included in the resulting stream, and it will match the specified constraints as well as possible.

结果

规范

规范	状态	注释
媒体捕获和流 The definition of 'MediaStreamConstraints.audio' in that specification.	候选推荐	最初的规范。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
audio	Chrome Yes	Edge ≤79	Firefox 38	IE No	Opera Yes	Safari ?	WebView Android Yes	Chrome Android Yes	Firefox Android 38	Opera Android Yes	Safari iOS ?	Samsung Internet Android Yes

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

另请参阅

• Media Capture and Streams API
• Capabilities, constraints, and settings
• MediaDevices.getUserMedia()
• MediaDevices.getSupportedConstraints()
• MediaTrackSupportedConstraints
• MediaTrackConstraints

元数据

• 最后修改： 2020 年 1 月 22 日

相关话题

1. Media Streams API
2. MediaStreamConstraints
3. Related pages for Media Capture and Streams

   1. AudioStreamTrack
   2. BlobEvent
   3. CanvasCaptureMediaStream
   4. ConstrainBoolean
   5. ConstrainDOMString
   6. ConstrainDouble
   7. ConstrainLong
   8. DoubleRange
   9. HTMLCanvasElement.captureStream()
   10. LongRange
   11. MediaDevices
   12. MediaStream
   13. MediaStreamTrack
   14. MediaStreamTrackEvent
   15. MediaTrackCapabilities
   16. MediaTrackConstraints
   17. MediaTrackSettings
   18. MediaTrackSupportedConstraints
   19. Navigator.mediaDevices
   20. NavigatorUserMedia
   21. NavigatorUserMediaError
   22. VideoStreamTrack
   23. navigator.mediaDevices.getUserMedia()