JavaScript - 如何选择音频播放？

Posted 2023-02-25

技术标签:

【中文标题】JavaScript - 如何选择音频播放？【英文标题】：JavaScript - How can i select the audio playback? 【发布时间】：2014-09-04 10:39:39 【问题描述】：

我有此代码，但如何选择音频播放/扬声器？（相机选择和麦克风选择正在工作，但我现在如何选择扬声器？有时有 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>

【问题讨论】：

code.google.com/p/webrtc/issues/detail?id=2243#c36 - 这个怎么用？它可能必须在扩展中完成... 【参考方案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>

这对我有用

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

【讨论】：

如何正确？请查看我的音频输出只有一个，但您的代码显示两个音频 1 和音频 2，当我单击每个其发出的声音与相同的扬声器 i.imgur.com/aOPGRtV.png

以上是关于JavaScript - 如何选择音频播放？的主要内容，如果未能解决你的问题，请参考以下文章

如何使 UIButton 从 UITable 中的选择中播放相应的音频剪辑？

Javascript：如何暂停/停止当前播放的音频？

如何使用 Javascript 从按钮值中选择音频文件

如何在 JavaScript 中为视频播放不同的音频？

如何通过javascript删除html5音频播放器中的源音频文件

如何将两个音频文件合并为一个并在javascript中合并后播放