是否可以使用 HTML 5 和 Javascript 仅播放来自 YouTube 视频的音频？
如何使用 HTML 5 仅播放 Youtube 视频的音频？
IT技术
javascript
html
audio
youtube
2021-02-24 19:41:05
6个回答
2021 年更新
您可以解析适用于此特定视频的所有流的 Youtube HTML 页面，并提取纯音频流。
这是一个使用公共 Google 图片代理的示例（但您可以使用任何免费或您自己的CORS代理）：
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;
}
if (quality) audio_streams[quality] = stream.url;
});
console.log(audio_streams);
audio_tag.src = audio_streams['128kbps'];
audio_tag.play();
})
}
});<audio id="youtube" autoplay controls loop></audio>不适用于所有视频，很大程度上取决于货币化设置或类似设置。
嵌入视频播放器并使用 CSS 隐藏视频。如果操作得当，您甚至可以仅隐藏视频而不隐藏其下方的控件。
但是，我建议不要这样做，因为它会违反YouTube TOS。如果您真的只想播放音频，请改用您自己的服务器。
2020 年更新
这似乎在Septeber 2019年，YouTube的更新的值由返回get_video_info。
而不是data.url_encoded_fmt_stream_mapand data.adaptive_fmts（如在其他旧示例中使用的那样），现在我们正在寻找data.formatsand data.adaptiveFormats。
无论如何，这就是将 YouTube 视频加载到<audio>元素中的一些代码。 在 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>这可能是一个旧帖子，但人们可能仍在寻找这个，所以你去吧：
<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>
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>
其它你可能感兴趣的问题