Question

我有这段代码但是如何选择音频播放/扬声器？（相机选择和麦克风选择正在工作，但我现在如何选择扬声器？有时会有hdmi或usb声音或内置声卡我需要选择并测试声音）

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>

Answer 1

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

这对我有用

更改音频下拉菜单并播放所选音频流中的声音

JavaScript - 如何选择音频播放？

1 个答案: