如何使用 HTML 5 只播放 Youtube 视频的音频?

2023-12-20

是否可以使用 HTML 5 和 Javascript 仅播放 YouTube 视频中的音频?


2022 年更新

添加了用于演示的 webm 格式。您可以随时检查控制台日志并添加所需的所有格式。

2021 年更新

您可以解析 Youtube HTML 页面以获取该特定视频可用的所有流,并仅提取音频流。

这是一个公共 Google 图片代理的示例(但您可以使用任何免费或您自己的代理)CORS proxy):

var vid = "3r_Z5AYJJd4",
  audio_streams = {},
  audio_tag = document.getElementById('youtube');

fetch("https://images" + ~~(Math.random() * 33) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" + encodeURIComponent("https://www.youtube.com/watch?hl=en&v=" + vid)).then(response => {
  if (response.ok) {
    response.text().then(data => {

      var regex = /(?:ytplayer\.config\s*=\s*|ytInitialPlayerResponse\s?=\s?)(.+?)(?:;var|;\(function|\)?;\s*if|;\s*if|;\s*ytplayer\.|;\s*<\/script)/gmsu;

      data = data.split('window.getPageData')[0];
      data = data.replace('ytInitialPlayerResponse = null', '');
      data = data.replace('ytInitialPlayerResponse=window.ytInitialPlayerResponse', '');
      data = data.replace('ytplayer.config={args:{raw_player_response:ytInitialPlayerResponse}};', '');


      var matches = regex.exec(data);
      var data = matches && matches.length > 1 ? JSON.parse(matches[1]) : false;

      console.log(data);

      var streams = [],
        result = {};

      if (data.streamingData) {

        if (data.streamingData.adaptiveFormats) {
          streams = streams.concat(data.streamingData.adaptiveFormats);
        }

        if (data.streamingData.formats) {
          streams = streams.concat(data.streamingData.formats);
        }

      } else {
        return false;
      }

      streams.forEach(function(stream, n) {
        var itag = stream.itag * 1,
          quality = false;
        console.log(stream);
        switch (itag) {
          case 139:
            quality = "48kbps";
            break;
          case 140:
            quality = "128kbps";
            break;
          case 141:
            quality = "256kbps";
            break;
          case 249:
            quality = "webm_l";
            break;
          case 250:
            quality = "webm_m";
            break;
          case 251:
            quality = "webm_h";
            break;
        }
        if (quality) audio_streams[quality] = stream.url;
      });

      console.log(audio_streams);

      audio_tag.src = audio_streams['256kbps'] || audio_streams['128kbps'] || audio_streams['48kbps'];
      audio_tag.play();
    })
  }
});
<audio id="youtube" autoplay controls loop></audio>

不适用于所有视频,很大程度上取决于获利设置或类似的设置。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 HTML 5 只播放 Youtube 视频的音频? 的相关文章

  • 在javascript中将.wav文件转换为.ogg

    我正在尝试从浏览器捕获用户的音频输入 我已经用WAV 完成了 但是文件很大 我的一个朋友告诉我 OGG 文件要小得多 有谁知道如何将WAV转换为OGG 我也有原始数据缓冲区 我真的不需要转换 但我只需要 OGG 编码器 这是来自的 WAV
  • 从提交的表单中转义字符串中的字符

    每次发布帖子时 我都会得到转义字符 gt gt gt 我有一个多步骤表单 它将数据从一种表单传输到另一种表单 我将这些值与准备好的语句一起保存在数据库中 数据库中的值当前看起来像Paul s House 用户应该可以在字符串中使用单引号和双
  • 在java中将DataURL图像转换为图像文件

    我在我的 java servlet 中接收图像 DataURL 它看起来像 data image jpeg base64 9j 4AAQSkZJRgABAQAAAQABAA 我需要将其另存为图像文件 我该怎么做 The simplest w
  • 使用 ffmpeg 在一个音频文件中实现多个淡入/淡出效果

    我在向一个音频文件添加多种淡入淡出效果时遇到一些问题 当我尝试使用这样的命令时 ffmpeg y i home user video test sound mp3 af afade t in ss 0 d 3 afade t out st
  • jQuery 选择器在控制台中不起作用

    我一辈子都无法解决这个问题 我正在运行 js 容器状态 是页面上正在运行的 js 的控制台日志 它显示一个选择器 但如果我想在控制台中执行任何操作 它只会返回 null 我假设我在某个地方过度编写了 jQuery 函数 就好像我调用了 jQ
  • 如何反转音量滑块的音量数学?

    我正在构建一个视频播放器 但有点卡在音量滑块部分 这是一个 YouTube 风格的垂直滑块 这意味着如果滑块位于顶部位置 音量应该为 100 如果滑块拖动到底部位置 声音应该为 0 目前它的做法与我想要的相反 向下拖动滑块将使声音变大 向上
  • Jquery 关注下一个带有类的元素

    我正在尝试创建一个函数 当按下 Enter 键时 会选择带有类的下一个输入 我已经设法 focus 同一行中的下一个元素 但是 如果我需要选择下一行的下一个输入 它将无法继续 下一行中的第一个 quantity 文本框需要获得焦点 控制台没
  • 如何创建环境变量来保护我的网站的 Google 地图 API 密钥(或任何其他秘密值)?

    我正在学习使用 Bootstrap 编写自己的网站 并使用 Google 地图 API 密钥和 Google Developers 的脚本轻松地将地图放置在我的页面上 理想情况下 我会有类似的东西 即我已经尝试过这个 Html PHP
  • 输入元素可滚动并启用文本溢出省略号

    当我添加text overflow ellipsis对于输入元素 该元素是可滚动的 当我将光标放在元素上时 我可以左右滚动 就好像文本是全宽并且没有被截断一样 尽管后面没有文本 我该如何阻止这种行为 input width 180px te
  • 在 JavaScript/ActionScript 中重新定义 Math.constructor 有任何实际用途吗?

    Math 对象没有原型属性 但有构造函数属性 在任何情况下重新定义构造函数会有用吗 The Math对象 准确地说 由初始值引用的对象MathECMAScript 全局对象的属性 not have a constructor属性 请参阅EC
  • 解析 PHP 响应:未捕获的语法错误:意外的标记 <

    我正在使用 AJAX 来调用 PHP 脚本 我唯一需要从响应中解析的是脚本生成的随机 ID 问题是 PHP 脚本会引发许多错误 这些错误实际上很好 不会妨碍程序功能 唯一的问题是当我跑步时 parseJSON response I get
  • 为什么 "asdf".replace(/.*/g, "x") == "xx" ?

    我偶然发现了一个令人惊讶的 对我来说 事实 console log asdf replace g x Why two替代品 似乎任何没有换行符的非空字符串都会产生此模式的两个替换 使用替换函数 我可以看到第一个替换是整个字符串 第二个替换是
  • 带有子节点的拖放区域

    我有一个带有多个子节点的拖放区域 主要元素有dropenter and dropleave事件 但是 如果您将文件拖动到主元素内部和子节点上方 则dropleave被触发 如何处理 以便dropleave仅当拖动的元素和鼠标位于主元素之外时
  • 禁用 iframe 中的滚动

    有没有办法在 iframe 中禁用所有滚动 我有一个 iframe 其中内容超出了 iframe 尺寸 设置scrolling no 只会删除滚动条 但不会禁用滚动 我无法控制 iframe html 的头部 所以我无法设计它的样式 有任何
  • JavaScript 匿名函数语法

    下面两个块有什么区别 block 1 console log anonymous block block 2 function anon console log anonymous block 2 我在 Netbeans 中运行了这个 使用
  • android - 如何让按钮每次按下时单击播放声音文件?

    我打开了一个新项目 现在我想做的是 通过按下按钮 我想要播放一个 mp3 文件 而且每次按下按钮时 声音文件都会再次从头开始播放 所以假设 mp3 长 10 秒 我按下按钮 它正在播放 4 秒后我再次按下按钮 声音将再次播放 现在我想知道的
  • 验证单个单选按钮在可用的 javascript 验证脚本中不起作用

    我随机生成了单选按钮系列 例如
  • CSS交付优化:如何推迟CSS加载?

    我在尝试着优化 CSS 交付遵循针对开发人员的谷歌文档https developers google com speed docs insights OptimizeCSSDelivery example https developers
  • jQuery可排序发布数据,但没有数据

    谁能告诉我我在这里缺少什么 我的数据似乎总是空的 我做错了什么 document ready function nav sortable connectWith nav axis y update function event ui var
  • 如何防止IE11弹出(您确定要离开此页面)

    我正在处理一个页面 除了一个下拉菜单可供选择外 我无需输入任何内容 但在 IE11 中 当我尝试转到下一页时 它会弹出该消息 我想阻止这种弹出的发生 所以我只是想知道 IE11 中弹出窗口的默认行为是什么 因为它不会出现在 Chrome 或

随机推荐