Javascript 如何使用 HTML 5 仅播放 Youtube 视频的音频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8690255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to play only the audio of a Youtube video using HTML 5?
提问by user979830
Is it possible to play only the audio from a YouTube video using HTML 5 and Javascript?
是否可以使用 HTML 5 和 Javascript 仅播放来自 YouTube 视频的音频？
采纳答案by Tom van der Woerdt
Embed the video player and use CSS to hide the video. If you do it properly you may even be able to hide only the video and not the controls below it.
嵌入视频播放器并使用 CSS 隐藏视频。如果操作得当，您甚至可以仅隐藏视频而不隐藏其下方的控件。
However, I'd recommend against it, because it will be a violation of YouTube TOS. Use your own server instead if you really want to play only audio.
但是，我建议不要这样做，因为它会违反YouTube TOS。如果您真的只想播放音频，请改用您自己的服务器。
回答by 350D
You can parse Youtube meta file for all streams available for this particular video id using this link: https://www.youtube.com/get_video_info?video_id={VID}and extract audio only streams.
您可以使用此链接解析适用于此特定视频 ID 的所有流的 Youtube 元文件：https://www.youtube.com/get_video_info?video_id={VID}并仅提取音频流。
Here is an example with public Google Image proxy (but you can use any free or your own CORSproxy):
这是一个使用公共 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>Doesn't work for all videos, very depends on monetization settings or something like that.
不适用于所有视频，很大程度上取决于货币化设置或类似设置。
回答by Richard Waterworth
This may be an old post but people could still be searching for this so here you go:
这可能是一个旧帖子，但人们可能仍在寻找这个，所以你去吧：
<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>
回答by shindiggah
The answer is simple: Use a 3rd party product like jwplayer or similar, then set it to the minimal player size which is the audio player size (only shows player controls).
答案很简单：使用 jwplayer 或类似的 3rd 方产品，然后将其设置为最小播放器大小，即音频播放器大小（仅显示播放器控件）。
Voila.
瞧。
Been using this for over 8 years.
使用这个已经超过 8 年了。
回答by MR.007X
VIDEO_ID with actual ID of your YouTube video.
VIDEO_ID 与您的 YouTube 视频的实际 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>
回答by Valdermito dev. ValdeClickPlay
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>回答by berezovskyi
Adding to the mentions of jwplayer and possible TOS violations, I would like to to link to the following repository on github: YouTube Audio Player Generation Library, that allows to generate the following output:
除了提到 jwplayer 和可能的 TOS 违规之外，我想链接到 github上的以下存储库：YouTube 音频播放器生成库，它允许生成以下输出：
Library has the support for the playlists and PHP autorendering given the video URL and the configuration options.
给定视频 URL 和配置选项，库支持播放列表和 PHP 自动呈现。
回答by dangerChihuahua007
I agree with Tom van der Woerdt. You could use CSS to hide the video (visibility:hidden or overflow:hidden in a div wrapper constrained by height), but that may violate Youtube's policies. Additionally, how could you control the audio (pause, stop, volume, etc.)?
我同意 Tom van der Woerdt 的观点。您可以使用 CSS 来隐藏视频（可见性：隐藏或溢出：隐藏在受高度限制的 div 包装器中），但这可能会违反 Youtube 的政策。此外，您如何控制音频（暂停、停止、音量等）？
You could instead turn to resources such as http://www.houndbite.com/to manage audio.
您可以转而使用诸如http://www.houndbite.com/ 之类的资源来管理音频。
