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

Question

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

use*_*830 27 javascript youtube audio html5

是否可以使用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;
    }, {});
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

不适用于所有视频,非常依赖于获利设置或类似的东西.

Answer 2

Tom*_*rdt 15

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

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

这确实违反了YouTube TOS.据我了解,TOS仅讨论其API.嵌入视频播放器并使用css隐藏视频不会使用YouTube API.所以我认为它不违反YouTube TOS. (16认同)
这违反了服务条款:"[禁止]分离,隔离或修改通过YouTube API提供的任何YouTube视听内容的音频或视频组件;`http://code.google.com/apis/youtube/terms. HTML (7认同)
那么..我只需上传带有黑色图像的视频并使用黑色背景:D (3认同)

Answer 3

Jos*_*all 9

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;
  }, {});
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 4

Max*_*eng 9

您可以制作一个假音频播放器，通过 Youtube Iframe API 来切换 Youtube iframe，还可以使用该 API 来获取您想要在音频播放器上显示的信息。这是我的例子。

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="player.css">
    <script src="https://www.youtube.com/iframe_api"></script>
    <script src="player.js"></script>
    <script>
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '360',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
    </script>
</head>
<body>
    <!--Youtube-->
    <div id="player" style="display: none; visibility: hidden;"></div>
    
    <!--Player-->
    <div class="audio-player">
        <div class="player-controls">
            <div id="radioIcon"></div>
            <button id="playAudio"></button>
            <div id="seekObjContainer">
                <div id="seekObj">
                    <div id="percentage"></div>
                </div>
            </div>
            <p><small id="currentTime">00:00</small></p>
        </div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

播放器.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="player.css">
    <script src="https://www.youtube.com/iframe_api"></script>
    <script src="player.js"></script>
    <script>
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '360',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
    </script>
</head>
<body>
    <!--Youtube-->
    <div id="player" style="display: none; visibility: hidden;"></div>
    
    <!--Player-->
    <div class="audio-player">
        <div class="player-controls">
            <div id="radioIcon"></div>
            <button id="playAudio"></button>
            <div id="seekObjContainer">
                <div id="seekObj">
                    <div id="percentage"></div>
                </div>
            </div>
            <p><small id="currentTime">00:00</small></p>
        </div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

播放器.css

* {
    box-sizing: border-box;
}
body {
    background-size: 6px 6px !important;
    background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0) 46%, coral 49%, coral 51%, rgba(0, 0, 0, 0) 55%);
    background-color: white;
    padding-top: 60px;
}
.audio-player {
    width: 470px;
    padding: 35px 20px;
    margin: auto;
    background-color: white;
    border: 1px solid black;
}
.audio-player .player-controls {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.audio-player #radioIcon {
    width: 30px;
    height: 30px;
    background: url("https://img.icons8.com/ios/50/000000/microphone.png") no-repeat center;
    background-size: contain;
}
.audio-player #playAudio {
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    border: none;
    width: 30px;
    height: 30px;
    background: url("https://img.icons8.com/play") no-repeat center;
    background-size: contain;
}
.audio-player #playAudio.pause {
    background: url("https://img.icons8.com/pause") no-repeat center;
    background-size: contain;
}
.audio-player p {
    margin: 0 0 0 5px;
    line-height: 1;
    display: inline-flex;
}
.audio-player p small {
    font-size: 10px;
}
.audio-player #seekObjContainer {
    position: relative;
    width: 300px;
    margin: 0 5px;
    height: 5px;
}
.audio-player #seekObjContainer #seekObj {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #e3e3e3;
    border: 1px solid black;
}
.audio-player #seekObjContainer #seekObj #percentage {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: coral;
}

Run Code Online (Sandbox Code Playgroud)

音频播放器就是从这里来的。希望这可以帮助你们！

Answer 5

小智 8

这可能是一个旧帖子,但人们仍然可以搜索这个,所以在这里你去:

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 6

小智 5

VIDEO_ID with actual ID of your YouTube video.

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，4 月前
查看次数：	78109 次
最近记录：	6 年，9 月前