首页 > 其他分享 >Audio Output Devices API

Audio Output Devices API

时间:2024-04-30 23:57:55浏览次数:28  
标签:play audio Devices API Output Audio

Audio Output Devices API: 音频输出设备API允许Web应用程序提示用户应使用什么输出设备进行音频播放。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Audio Output Devices API</title>
  </head>
  <body>
    <strong>Audio Output Devices API</strong>
    <hr />
    <button type="button" class="btn-select">play</button>

    <script>
      // Audio Output Devices API
      // 音频输出设备API允许Web应用程序提示用户应使用什么输出设备进行音频播放。

      const selectBtn = document.querySelector('.btn-select');

      const audio = new Audio('./tts.mp3');
      let played = false;
      selectBtn.addEventListener('click', async () => {
        if (played) {
          audio.paused ? audio.play() : audio.pause();
          selectBtn.textContent = !audio.paused ? 'pause' : 'play';
          return;
        }

        const audioDevice = await navigator.mediaDevices.selectAudioOutput();
        console.log('audioDevice => ', audioDevice);

        await audio.setSinkId(audioDevice.deviceId);
        audio.play();
        played = true;
        selectBtn.textContent = 'pause';
      });
      audio.addEventListener('ended', () => {
        played = false;
        selectBtn.textContent = 'play';
      });
    </script>
  </body>
</html>

标签:play,audio,Devices,API,Output,Audio
From: https://www.cnblogs.com/chlai/p/18168901

相关文章

  • Prioritized Task Scheduling API
    PrioritizedTaskSchedulingAPI一种标准化的方法来优先处理属于应用程序的所有任务,无论它们是在网站开发人员的代码中定义的,还是在第三方库和框架中定义的任务优先级是非常粗粒度的,并且基于任务是否阻止用户交互或以其他方式影响用户体验,或者可以在后台运行基于Promise的,......
  • Trusted Types API
    TrustedTypesAPI:锁定DOMAPI的不安全部分,以防止客户端跨站脚本(XSS)攻击untrusted<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width......
  • THUSC2024 & APIO2024 游记
    第二次联赛以上的比赛。Day-nlxs突然通知:从五月七日开始要去镇海中学集训......
  • Python调用Graylog APi 分析401错误登录日志
    ret_lst处理完成后是一个list,内容如下:[{'c_ip':'10.10.202.139','uname':'ee'},{'c_ip':'10.10.202.139','uname':'tt'},{'c_ip':'192.168.195.131','uname......
  • Web Audio API 第6章 高级主题
    高级主题这一章涵盖了非常重要的主题,但比本书的其他部分稍微复杂一些。我们会深入对声音添加音效,完全不通过任何音频缓冲来计算合成音效,模拟不同声音环境的效果,还有关于空3D空间音频。重要理论:双二阶滤波器一个滤波可以增强或减弱声音频谱的某些部分。直观地,在频域上它可......
  • Barcode Detection API
    BarcodeDetectionAPI:用于检测图像中的条形码和二维码//创建新检测器constbarcodeDetector=newBarcodeDetector({formats:["qr_code"],});//检查支持的类型BarcodeDetector?.getSupportedFormats().then((supportedFormats)=>{supportedFormats.forEach(......
  • simpread-课程 21:API 项目重构
    项目结构重构1.1Electric.DbMigrator存在的问题我们先来看下,后台API项目的目录结构。其中Electric.DbMigrator,这个项目作用是用来做数据库迁移的,但是同时也会被其他项目引用,还有这个项目类型还是WebAPI类型的。所以存在以下的几个问题:1、项目功能重合:数据库迁移和数......
  • URL Pattern API
    URLPatternAPI创建URL模式匹配器。这些模式能够与完整的URL或URL的各个组成部分进行匹配模式语法基于path-to-regexp库。模式可包含:将被精确匹配的文字字符串。匹配任何字符的通配符(/posts/*)。命名组(/books/:id),提取匹配URL的一部分。非捕获组(/books{......
  • Popover API
    PopoverAPI:内置的弹框能力popover具有auto状态的弹窗可以通过在弹窗之外的区域进行选择,以达到“轻触关闭”的目的,并且通常一次仅允许屏幕上显示一个弹窗manual弹窗必须始终明确隐藏,但可以用于菜单中嵌套弹窗等使用情况。<buttontype="button"popovertarget="popov......
  • Chromium 提示:缺少 Google API 密钥,因此 Chromium 的部分功能将无法使用
    打开下载好的 chrome.exe,提示缺少GoogleAPI密钥,因此Chromium的部分功能将无法使用。1.将chrome.exe发送到桌面,右键--属性--目标加入参数"--test-type=webdriver"。 2.设置环境变量,屏蔽提示打开windows的cmd命令提示符,依次输入以下命令:setxGOOGLE_API_KEY"n......