JavaScript - 如何选择音频播放？

我有这段代码，但我怎样才能选择音频播放/扬声器？（选择摄像机和麦克风选择工作，但我现在该如何选择音箱？有时有HDMI或USB声卡或内置声卡，我需要选择和测试音）JavaScript - 如何选择音频播放？

enter image description here

<!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>

来源

2014-09-04 YumYumYum

https://code.google.com/p/webrtc/issues/detail播放声音？id = 2243＃c36 - 如何使用这个？ – YumYumYum 2014-09-09 22:07:06

它可能需要在扩展中完成... – 2014-09-10 13:34:19

<!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: ", 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>

，这是为我工作

变化下拉音频的菜单，并从选择的音频流

来源

2014-09-15 07:26:18

它是如何正确的？请看我的音频输出只有一个，但是你的代码显示了两个音频1和音频2，当我点击每个音频时使用相同的扬声器http://i.imgur.com/aOPGRtV.png – YumYumYum 2014-09-18 17:13:02

JavaScript - 如何选择音频播放？

回答

相关问题