我有这个代码,但我如何选择音频播放/扬声器？ (相机选择和麦克风选择正在工作,但我现在如何选择扬声器？有时会有hdmi或usb声音或内置声卡我需要选择并测试声音)
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 12px;
height: 12px;
}
</style>
</head>
<body>
<div id="select_media" style="padding:2px;background-color: black;color:white;
width: 470px;">
<table>
<tr>
<td valign="top">
<div class='select'>
<table>
<tr>
<td>
<img src="/images/camera.png" />
</td>
<td>
<select id='videoSource' style="width: 208px;"></select>
</td>
</tr>
<tr>
<td>
<img src="/images/microphone.png" />
</td>
<td>
<select id='audioSource' style="width: 208px;"></select>
</td>
</tr>
<tr>
<td>
<img src="/images/speaker.png" />
</td>
<td>
<select id='audioSink' style="width: 208px;"></select>
</td>
</tr>
<tr>
<td>
<img src="/images/PlaySoundWithSpeakerSelected.png" />
</td>
<td>
Play sound - With the Selected Speaker
</td>
</tr>
</table>
</div>
</td>
<td>
<video muted autoplay style="width: 208px;height: 117px;"></video>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
var videoElement = document.querySelector("video");
var audioSelect = document.querySelector("select#audioSource");
var videoSelect = document.querySelector("select#videoSource");
var startButton = document.querySelector("button#start");
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
function gotSources(sourceInfos) {
for (var i = 0; i != sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
var option = document.createElement("option");
option.value = sourceInfo.id;
if (sourceInfo.kind === 'audio') {
option.text = sourceInfo.label || 'microphone ' + (audioSelect.length + 1);
audioSelect.appendChild(option);
} else if (sourceInfo.kind === 'video') {
option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
videoSelect.appendChild(option);
} else {
console.log('Some other kind of source: ',sourceInfo);
}
}
}
if (typeof MediaStreamTrack === 'undefined'){
alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
} else {
MediaStreamTrack.getSources(gotSources);
}
function successCallback(stream) {
window.stream = stream; // make stream available to console
videoElement.src = window.URL.createObjectURL(stream);
videoElement.play();
}
function errorCallback(error){
console.log("navigator.getUserMedia error: ",error);
}
function start(){
if (!!window.stream) {
videoElement.src = null;
window.stream.stop();
}
var audioSource = audioSelect.value;
var videoSource = videoSelect.value;
var constraints = {
audio: {
optional: [{sourceId: audioSource}]
},video: {
optional: [{sourceId: videoSource}]
}
};
navigator.getUserMedia(constraints,successCallback,errorCallback);
}
audioSelect.onchange = start;
videoSelect.onchange = start;
start();
</script>
</html>
解决方法
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 12px;
height: 12px;
}
</style>
</head>
<body>
<div id="select_media" style="padding:2px;background-color: black;color:white;
width: 470px;">
<table>
<tr>
<td valign="top">
<div class='select'>
<table>
<tr>
<td>
<img src="/images/camera.png" />
</td>
<td>
<select id='videoSource' style="width: 208px;"></select>
</td>
</tr>
<tr>
<td>
<img src="/images/microphone.png" />
</td>
<td>
<select id='audioSource' style="width: 208px;"></select>
</td>
</tr>
<tr>
<td>
<img src="/images/speaker.png" />
</td>
<td>
<select id='audioSink' style="width: 208px;" onchange="playStream(this.value)"><option>Select</option></select>
</td>
</tr>
<tr>
<td>
<img src="/images/PlaySoundWithSpeakerSelected.png" />
</td>
<td>
Play sound - With the Selected Speaker
</td>
</tr>
</table>
</div>
</td>
<td>
<video muted autoplay style="width: 208px;height: 117px;"></video>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
var videoElement = document.querySelector("video");
var audioSelect = document.querySelector("select#audioSource");
var videoSelect = document.querySelector("select#videoSource");
var startButton = document.querySelector("button#start");
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
function gotSources(sourceInfos) {
for (var i = 0; i != sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
var option = document.createElement("option");
option.value = sourceInfo.id;
if (sourceInfo.kind === 'audio') {
option.text = sourceInfo.label || 'microphone ' + (audioSelect.length + 1);
audioSelect.appendChild(option);
} else if (sourceInfo.kind === 'video') {
option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
videoSelect.appendChild(option);
} else {
console.log('Some other kind of source: ',sourceInfo);
}
}
audioSource();
}
function audioSource(){
var audioSelect = document.querySelector("select#audioSink");
var audioControl = new (window.audioContext || window.webkitaudiocontext);
var osx = audioControl.createOscillator();
var speaker = osx && osx.channelCount;
var i=0;
for(;i<speaker;i++){
var option = document.createElement("option");
option.text = ' audio '+(i+1);
option.value = i;
console.log(option);
audioSelect.appendChild(option);
}
}
if (typeof MediaStreamTrack === 'undefined'){
alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
} else {
MediaStreamTrack.getSources(gotSources);
}
function playStream(stream){
var audioControl = new (window.audioContext || window.webkitaudiocontext);
var osx = audioControl.createOscillator();
osx.connect(audioControl.destination);
osx.noteOn(stream);
setTimeout(function(){osx.noteOff(stream)},3000);
}
function successCallback(stream) {
window.stream = stream; // make stream available to console
videoElement.src = window.URL.createObjectURL(stream);
videoElement.play();
}
function errorCallback(error){
console.log("navigator.getUserMedia error: ",errorCallback);
}
audioSelect.onchange = start;
videoSelect.onchange = start;
start();
</script>
</html>
这对我有用
更改音频下拉菜单并播放所选音频流中的声音
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
