title: JavaScript - How can i select the audio playback?
body: <p>I have this code but how can i select the Audio Playback/Speaker? (Camera selection and Microphone selection is working but how do i now select the speaker? sometimes there are hdmi or usb sound or built in sound cards i need to select that and test a sound)</p>
  
  <p><img src="https://i.stack.imgur.com/5FCAX.png" alt="enter image description here"></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
      img {
        width: 12px;
        height: 12px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="select_media" style="padding:2px;background-color: black;color:white;
       width: 470px;"&gt;
    &lt;table&gt;
      &lt;tr&gt;
  
        &lt;td valign="top"&gt;
                  &lt;div class='select'&gt;
  
  
          &lt;table&gt;
            &lt;tr&gt;
              &lt;td&gt;
                &lt;img src="/images/camera.png" /&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;select id='videoSource' style="width: 208px;"&gt;&lt;/select&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr&gt;
              &lt;td&gt;
               &lt;img src="/images/microphone.png" /&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;select id='audioSource' style="width: 208px;"&gt;&lt;/select&gt;
              &lt;/td&gt;            
            &lt;/tr&gt;
  
            &lt;tr&gt;
              &lt;td&gt;
                &lt;img src="/images/speaker.png" /&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;select id='audioSink' style="width: 208px;"&gt;&lt;/select&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr&gt;
              &lt;td&gt;
                &lt;img src="/images/PlaySoundWithSpeakerSelected.png" /&gt;
              &lt;/td&gt;
              &lt;td&gt;
                Play sound - With the Selected Speaker
              &lt;/td&gt;            
            &lt;/tr&gt;
          &lt;/table&gt;
  
  
  
  
  
          &lt;/div&gt;
        &lt;/td&gt;
  
        &lt;td&gt;
          &lt;video muted autoplay style="width: 208px;height: 117px;"&gt;&lt;/video&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  
    &lt;/table&gt;
  
  &lt;/div&gt;  
  
  &lt;/body&gt;
  
    &lt;script type="text/javascript"&gt;
      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();
    &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>