JavaScript - 如何选择音频播放？-6ren

JavaScript - 如何选择音频播放？

转载作者：塔克拉玛干更新时间：2023-11-02 21:32:01

我有此代码，但如何选择音频播放/扬声器？ (摄像头选择和麦克风选择正常，但我现在如何选择扬声器？有时有 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>

最佳答案

<!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 - 如何选择音频播放？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25663337/

文章推荐： javascript - 如何为未知数量的条件编写多个 AND 子句

文章推荐： javascript - Traceur + browserify + uglyify in gulp

javascript - Web 音频/ radio 流客户端 : use Howler. js、 native 音频、其他库？
我一直在为实时流和静态文件(HTTP 上的 MP3)构建网络广播播放器。我选了Howler.js作为规范化 quirks 的后端的 HTML5 Audio (思考:自动播放、淡入/淡出、进度事件)。
vue实现移动端input上传视频、音频
vue移动端input上传视频、音频，供大家参考，具体内容如下 html部分 ?
PHP转换图像+音频=视频
关闭。这个问题需要更多 focused .它目前不接受答案。想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 7年前关闭。 Improve this questi
iphone - 音频/视频编程
我想在我的程序中访问音频和视频。 MAC里面可以吗？我们的程序在 Windows 上运行，我使用 directshow 进行音频/视频编程。但我想在 MAC 中开发相同的东西。有没有像direct
iOS 音频/声音不会在后台模式处于事件状态时在后台播放
我的应用程序(使用 Flutter 制作，但这应该无关紧要)具有类似于计时器的功能，可以定期(10 秒到 3 分钟)发出滴答声。我在我的 Info.plist 中激活了背景模式 Audio、AirPl
javascript - 音频 JavaScript
我是 ionic 2 的初学者我使用了音频文件。 import { Component } from '@angular/core'; import {NavController, Alert
java - 插入声音/音频
我有一个包含ListView和图片的数据库，我想在每个语音数据中包含它们。我已经尝试过，但是有很多错误。以下是我的java和xml。数据库.java package com.example.data
php - 音频/音乐社交网站托管服务
我在zend framework 2上建立了一个音乐社交网络。您可以想象它与SoundCloud相同，用户上传歌曲，其他用户播放它们，这些是网站上的基本操作。我知道将要托管该页面的服务器将需要大量带
android - 音频-Android
我正在尝试在android应用中播放音频，但是在代码中AssetFileDescriptor asset1及其下一行存在错误。这是代码: MediaPlayer mp; @Override prote
wordpress - [音频] WordPress短代码中的网址错误
我对 WordPress Audio Shortcode有问题。我这样使用它: 但是在前面，在HTML代码中我得到了: document.createElement('audio');
matlab - 音频.wav文件的SNR和评估过滤技术的客观措施
我正在做一项关于降低噪音的滤波技术的实验。我在数据集中的样本是音频文件(.wav)，因此，我有:原始录制的音频文件，我将它们与噪声混合，因此变得混合(噪声信号)，我将这些噪声信号通过滤波算法传递，输出
audio - 音频/声音增强的神经网络
一个人会使用哪种类型的神经网络架构将声音映射到其他声音？神经网络擅长学习从序列到其他序列，因此声音增强/生成似乎是它们的一种非常流行的应用(但不幸的是，事实并非如此-我只能找到一个(相当古老的)洋红色
windows - 音频:如何设置默认麦克风的电平？
这个让我抓狂: 在专用于此声音播放/录制应用程序的 Vista+ 计算机上，我需要我的应用程序确保(默认)麦克风电平被推到最大。我该怎么做？我找到了 Core Audio lib ，找到了如何将 I
html - Chrome扩展程序和流式传输<音频>
{ "manifest_version": 2, "name": "Kitten Radio Extension", "description": "Listen while browsi
c# - 音频，FFT不起作用
class Main { WaveFileReader reader; short[] sample; Complex[] tmpComplexArray; publi
android - 音频，平衡2种来源的声音
我正在使用电话录音软件(android)，该软件可以记录2个人在电话中的通话。每个电话的输出是一个音频文件，其中包含来自 call 者和被 call 者的声音。但是，大多数情况下，运行此软件的电话发
javascript - 音频/语音比较和getUserMedia
我正在构建一个需要语音激活命令的Web应用程序。我正在使用getUserMedia作为音频输入。对于语音激活命令，该过程是用户将需要通过记录其语音来“校准”命令。例如，对于“停止”命令，用户将说出“
cordova - 在PouchDB中存储视频/音频
我正在开发一个Cordova应用程序，并将PouchDB用作数据库，当连接可用时，它将所有信息复制到CouchDB。我成功存储了简单的文本和图像。我一直在尝试存储视频和音频，但是没有运气。我存储
audio - 音频.MP3在Safari浏览器中不起作用
我正在开发web application，我必须在其中使用.MP3的地方使用播放声音，但是会发生问题。声音为play good in chrome, Firefox，但为safari its not
audio - 音频:软件中的位深度减少
如何减少音频文件的位深？是否忽略了MSB或LSB？两者混合吗？ (旁问:这叫什么？) 最佳答案 TL / DR:将音频曲线高度变量右移至较低位深度可以将音频视为幅度(Y轴)随时间(X轴)的模拟曲线。

塔克拉玛干

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

JavaScript - 如何选择音频播放？