Question

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

Answer 1

您可以使用以下链接解析此特定视频ID可用的所有流的Youtube元文件：https://www.youtube.com/get_video_info?video_id={VID}并提取仅音频流。

以下是使用公开Google图片代理的示例（但您可以使用任何免费或您自己的CORS代理）：

var vid = "3r_Z5AYJJd4",
    audio_streams = {},
    audio_tag = document.getElementById('youtube');

fetch("https://"+vid+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget_video_info%3Fvideo_id%3D" + vid).then(response => {
    if (response.ok) {
        response.text().then(data => {

            var data = parse_str(data),
                streams = (data.url_encoded_fmt_stream_map + ',' + data.adaptive_fmts).split(',');

            streams.forEach(function(s, n) {
                var stream = parse_str(s),
                    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;
                }
                if (quality) audio_streams[quality] = stream.url;
            });

            console.log(audio_streams);

            audio_tag.src = audio_streams['128kbps'];
            audio_tag.play();
        })
    }
});

function parse_str(str) {
    return str.split('&').reduce(function(params, param) {
        var paramSplit = param.split('=').map(function(value) {
            return decodeURIComponent(value.replace('+', ' '));
        });
        params[paramSplit[0]] = paramSplit[1];
        return params;
    }, {});
}

<audio id="youtube" autoplay controls loop></audio>

不适用于所有视频，非常依赖于获利设置或类似内容。

Answer 2

嵌入视频播放器并使用CSS隐藏视频。如果你正确地做到了，你甚至可以只隐藏视频而不是它下面的控件。

但是，我建议不要这样做，因为它会违反YouTube TOS 。如果您真的只想播放音频，请使用您自己的服务器。

Answer 3

这可能是一个老帖子，但人们仍然可以搜索这个，所以在这里你去：

<div style="position:relative;width:267px;height:25px;overflow:hidden;">
<div style="position:absolute;top:-276px;left:-5px">
<iframe width="300" height="300" 
  src="https://www.youtube.com/embed/youtubeID?rel=0">
</iframe>
</div>
</div>

Answer 4

答案很简单：使用第三方产品，如jwplayer或类似产品，然后将其设置为最小播放器大小，即音频播放器大小（仅显示播放器控件）。

瞧。

使用它超过8年。

Answer 5

更新至2020

似乎在get_video_info返回的YouTube updated the values是2019年9月。

我们现在正在寻找data.url_encoded_fmt_stream_map和data.adaptive_fmts而不是data.formats和data.adaptiveFormats（在其他较早的示例中使用）。

无论如何，这里都是将YouTube视频加载到<audio>元素中的某些代码的全部内容。 Try it on CodePen

// YouTube video ID
var videoID = "CMNry4PE93Y";

// Fetch video info (using a proxy to avoid CORS errors)
fetch('https://cors-anywhere.herokuapp.com/' + "https://www.youtube.com/get_video_info?video_id=" + videoID).then(response => {
  if (response.ok) {
    response.text().then(ytData => {
      
      // parse response to find audio info
      var ytData = parse_str(ytData);
      var getAdaptiveFormats = JSON.parse(ytData.player_response).streamingData.adaptiveFormats;
      var findAudioInfo = getAdaptiveFormats.findIndex(obj => obj.audioQuality);
      
      // get the URL for the audio file
      var audioURL = getAdaptiveFormats[findAudioInfo].url;
      
      // update the <audio> element src
      var youtubeAudio = document.getElementById('youtube');
      youtubeAudio.src = audioURL;
      
    });
  }
});

function parse_str(str) {
  return str.split('&').reduce(function(params, param) {
    var paramSplit = param.split('=').map(function(value) {
      return decodeURIComponent(value.replace('+', ' '));
    });
    params[paramSplit[0]] = paramSplit[1];
    return params;
  }, {});
}

<audio id="youtube" controls></audio>

Answer 6

带有您的YouTube视频的实际ID的VIDEO_ID。

<div data-video="VIDEO_ID"  
        data-autoplay="0"         
        data-loop="1"             
        id="youtube-audio">
 </div>

 <script src="https://www.youtube.com/iframe_api"></script>
 <script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>

Answer 7

我同意Tom van der Woerdt的观点。您可以使用CSS来隐藏视频（可见性：隐藏或溢出：隐藏在受高度限制的div包装中），但这可能违反Youtube的策略。另外，你如何控制音频（暂停，停止，音量等）？

您可以转而使用http://www.houndbite.com/之类的资源来管理音频。

Answer 8

添加到jwplayer的提及和可能的TOS违规，我想链接到github上的以下存储库：YouTube Audio Player Generation Library，它允许生成以下输出：

图书馆根据视频网址和配置选项支持播放列表和PHP自动渲染。

Answer 9

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

fetch("https://"+vid+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget_video_info%3Fvideo_id%3D" + vid).then(response => {
    if (response.ok) {
        response.text().then(data => {

            var data = parse_str(data),
                streams = (data.url_encoded_fmt_stream_map + ',' + data.adaptive_fmts).split(',');

            streams.forEach(function(s, n) {
                var stream = parse_str(s),
                    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;
                }
                if (quality) audio_streams[quality] = stream.url;
            });

            console.log(audio_streams);

            audio_tag.src = audio_streams['128kbps'];
            audio_tag.play();
        })
    }
});

function parse_str(str) {
    return str.split('&').reduce(function(params, param) {
        var paramSplit = param.split('=').map(function(value) {
            return decodeURIComponent(value.replace('+', ' '));
        });
        params[paramSplit[0]] = paramSplit[1];
        return params;
    }, {});
}

<audio id="youtube" autoplay controls loop></audio>

Answer 10

作为替代答案，您可以将视频的亮度设置为零，视频区域将变为全黑，而控件保持可见...

通过 CSS...

 filter: brightness(0%);

通过JS...

 V.style.filter='brightness(0%)';

注意：亮度的正常默认值为 100%。

Answer 11

// YouTube video ID
var videoID = "CMNry4PE93Y";

// Fetch video info (using a proxy to avoid CORS errors)
fetch('https://cors-anywhere.herokuapp.com/' + "https://www.youtube.com/get_video_info?video_id=" + videoID).then(response => {
  if (response.ok) {
    response.text().then(ytData => {
      
      // parse response to find audio info
      var ytData = parse_str(ytData);
      var getAdaptiveFormats = JSON.parse(ytData.player_response).streamingData.adaptiveFormats;
      var findAudioInfo = getAdaptiveFormats.findIndex(obj => obj.audioQuality);
      
      // get the URL for the audio file
      var audioURL = getAdaptiveFormats[findAudioInfo].url;
      
      // update the <audio> element src
      var youtubeAudio = document.getElementById('youtube');
      youtubeAudio.src = audioURL;
      
    });
  }
});

function parse_str(str) {
  return str.split('&').reduce(function(params, param) {
    var paramSplit = param.split('=').map(function(value) {
      return decodeURIComponent(value.replace('+', ' '));
    });
    params[paramSplit[0]] = paramSplit[1];
    return params;
  }, {});
}

<audio id="youtube" controls></audio>

Answer 12

比这简单。

<iframe width="0" height="0" src="https://www.youtube.com/embed/youtubeID?rel=0" ></iframe>

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

12 个答案:

更新至2020