blocks|key|692766|text|这可能是一个旧帖子，但人们可能仍然在搜索它，所以你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|692767|<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>|code-block|syntax|javascript|692768|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This may be an old post but people could still be searching for this so here you go:</p>

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


blocks|key|692871|text|YouTube视频的实际ID的VIDEO_ID。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|692872|<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>|code-block|syntax|javascript|692873|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>VIDEO_ID with actual ID of your YouTube video.</p>

<pre><code>&lt;div data-video="VIDEO_ID"  
        data-autoplay="0"         
        data-loop="1"             
        id="youtube-audio"&gt;
 &lt;/div&gt;

 &lt;script src="https://www.youtube.com/iframe_api"&gt;&lt;/script&gt;
 &lt;script src="https://cdn.rawgit.com/labnol/files/master/yt.js"&gt;&lt;/script&gt;
</code></pre>


blocks|key|692712|text|答案很简单:使用第三方产品，如jwplayer或类似产品，然后将其设置为最小播放器大小，即音频播放器大小(仅显示播放器控件)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|692713|瞧。|692714|我已经用了8年多了。|692715|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>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).</p>

<p>Voila.</p>

<p>Been using this for over 8 years.</p>


blocks|key|476577|text|我同意汤姆·范德·沃特的观点。您可以使用CSS来隐藏视频(可见性:隐藏或溢出:隐藏在受高度约束的div包装器中)，但这可能会违反Youtube的策略。此外，您如何控制音频(暂停、停止、音量等)？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|476578|相反，您可以求助于http://www.houndbite.com/等资源来管理音频。|offset|length|476579|entityMap|0|LINK|mutability|MUTABLE|url|http://www.houndbite.com/^0|0|9|P|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>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.)?</p>

<p>You could instead turn to resources such as <a href="http://www.houndbite.com/" rel="nofollow">http://www.houndbite.com/</a> to manage audio.</p>


blocks|key|692854|text|除了提到jwplayer和可能的TOS违规之外，我还想链接到github上的以下存储库：YouTube+Audio+Player+Generation+Library，它允许生成以下输出：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|692855|​|692856|📷|atomic|692857|692858|库在给定视频URL和配置选项的情况下支持播放列表和PHP自动渲染。|692859|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/navarr/ytaudio/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/71937291fc6af60c8ad6e2072d6e4498.png|imageAlt^0|18|13|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|I|3|E|5|6|7|18|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|19|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|U|P|V|C|$W|X|Y|-4]]]]

<p>Adding to the mentions of jwplayer and possible TOS violations, I would like to to link to the following repository on github: <a href="https://github.com/navarr/ytaudio/" rel="nofollow noreferrer">YouTube Audio Player Generation Library</a>, that allows to generate the following output:</p>

<p><a href="http://navarr.me/ytaudio/?q=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dg8wj7AWZHLk&amp;s=on&amp;tc=on&amp;psize=l&amp;js=on&amp;hd=on&amp;theme=dark" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bJXMe.png" alt="enter image description here"></a></p>

<p>Library has the support for the playlists and PHP autorendering given the video URL and the configuration options.</p>


blocks|key|476781|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|476782|var+vid+=+"bpt84ceWAY0",
++++audio_streams+=+{},
++++audio_tag+=+document.getElementById('youtube');

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

++++++++++++var+data+=+parse_str(data),
++++++++++++++++streams+=+(data.url_encoded_fmt_stream_map+%2B+','+%2B+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('%2B',+'+'));
++++++++});
++++++++params[paramSplit[0]]+=+paramSplit[1];
++++++++return+params;
++++},+{});
}|code-block|syntax|javascript|476783|<audio+id="youtube"+autoplay+controls+loop></audio>|476784|476785|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var vid = "bpt84ceWAY0",
    audio_streams = {},
    audio_tag = document.getElementById('youtube');

fetch("https://"+vid+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&amp;url=https%3A%2F%2Fwww.youtube.com%2Fget_video_info%3Fvideo_id%3D" + vid).then(response =&gt; {
    if (response.ok) {
        response.text().then(data =&gt; {

            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('&amp;').reduce(function(params, param) {
        var paramSplit = param.split('=').map(function(value) {
            return decodeURIComponent(value.replace('+', ' '));
        });
        params[paramSplit[0]] = paramSplit[1];
        return params;
    }, {});
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;audio id="youtube" autoplay controls loop&gt;&lt;/audio&gt;</code></pre>
</div>
</div>
</p>


blocks|key|476822|text|您可以通过Youtube+iframe+API制作一个假音频播放器来切换Youtube+Iframe，也可以使用API来获取想要在音频播放器上显示的信息。下面是我的例子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|476823|index.html|476824|<!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>
++++
++++<div+id="player"+style="display:+none;+visibility:+hidden;"></div>
++++
++++
++++<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>|code-block|syntax|javascript|476825|player.js|476826|var+player;

function+onPlayerReady(event)+{
++++document.getElementById(ui.play).addEventListener('click',+togglePlay);
++++timeupdater+=+setInterval(initProgressBar,+100);
}

function+onPlayerStateChange(event)+{
++++if+(event.data+==+YT.PlayerState.ENDED)+{
++++++++document.getElementById(ui.play).classList.remove('pause');
++++++++document.getElementById(ui.percentage).style.width+=+0;
++++++++document.getElementById(ui.currentTime).innerHTML+=+'00:00';
++++++++player.seekTo(0,+true);
++++}
}

let+ui+=+{
++++play:+'playAudio',
++++audio:+'audio',
++++percentage:+'percentage',
++++seekObj:+'seekObj',
++++currentTime:+'currentTime'
};

function+togglePlay()+{
++++if+(player.getPlayerState()+===+1)+{
++++++++player.pauseVideo();
++++++++document.getElementById(ui.play).classList.remove('pause');
++++}+else+{
++++++++player.playVideo();
++++++++document.getElementById(ui.play).classList.add('pause');
++++}
}
++++++++
function+calculatePercentPlayed()+{
++++let+percentage+=+(player.getCurrentTime()+/+player.getDuration()).toFixed(2)+*+100;
++++document.getElementById(ui.percentage).style.width+=+`${percentage}%25`;
}

function+calculateCurrentValue(currentTime)+{
++++const+currentMinute+=+parseInt(currentTime+/+60)+%25+60;
++++const+currentSecondsLong+=+currentTime+%25+60;
++++const+currentSeconds+=+currentSecondsLong.toFixed();
++++const+currentTimeFormatted+=+`${currentMinute+<+10+?+`0${currentMinute}`+:+currentMinute}:${
++++currentSeconds+<+10+?+`0${currentSeconds}`+:+currentSeconds
++++}`;
++++
++++return+currentTimeFormatted;
}

function+initProgressBar()+{
++++const+currentTime+=+calculateCurrentValue(player.getCurrentTime());
++++document.getElementById(ui.currentTime).innerHTML+=+currentTime;
++++document.getElementById(ui.seekObj).addEventListener('click',+seek);

++++function+seek(e)+{
++++++++const+percent+=+e.offsetX+/+this.offsetWidth;
++++++++player.seekTo(percent+*+player.getDuration());
++++}
++++
++++calculatePercentPlayed();
}|476827|player.css|476828|*+{
++++box-sizing:+border-box;
}
body+{
++++background-size:+6px+6px+!important;
++++background-image:+linear-gradient(-45deg,+rgba(0,+0,+0,+0)+46%25,+coral+49%25,+coral+51%25,+rgba(0,+0,+0,+0)+55%25);
++++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%25;
++++height:+100%25;
++++background-color:+#e3e3e3;
++++border:+1px+solid+black;
}
.audio-player+#seekObjContainer+#seekObj+#percentage+{
++++position:+absolute;
++++left:+0;
++++top:+0;
++++height:+100%25;
++++background-color:+coral;
}|476829|音频播放器来自here。希望这能对你们有所帮助！|offset|length|476830|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/AliKlein/pen/MBNBEW^0|0|0|0|0|0|0|0|7|4|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$S|1A|T|1B|1|1C]]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>You can make a fake audio player to toggle the Youtube iframe through Youtube Iframe API,
and also use the API to get informations that you want to display on your audio player.
Here is my example.</p>
<h5>index.html</h5>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;player.css&quot;&gt;
    &lt;script src=&quot;https://www.youtube.com/iframe_api&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;player.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '360',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!--Youtube--&gt;
    &lt;div id=&quot;player&quot; style=&quot;display: none; visibility: hidden;&quot;&gt;&lt;/div&gt;
    
    &lt;!--Player--&gt;
    &lt;div class=&quot;audio-player&quot;&gt;
        &lt;div class=&quot;player-controls&quot;&gt;
            &lt;div id=&quot;radioIcon&quot;&gt;&lt;/div&gt;
            &lt;button id=&quot;playAudio&quot;&gt;&lt;/button&gt;
            &lt;div id=&quot;seekObjContainer&quot;&gt;
                &lt;div id=&quot;seekObj&quot;&gt;
                    &lt;div id=&quot;percentage&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;p&gt;&lt;small id=&quot;currentTime&quot;&gt;00:00&lt;/small&gt;&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h5>player.js</h5>
<pre class="lang-js prettyprint-override"><code>var player;

function onPlayerReady(event) {
    document.getElementById(ui.play).addEventListener('click', togglePlay);
    timeupdater = setInterval(initProgressBar, 100);
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        document.getElementById(ui.play).classList.remove('pause');
        document.getElementById(ui.percentage).style.width = 0;
        document.getElementById(ui.currentTime).innerHTML = '00:00';
        player.seekTo(0, true);
    }
}

let ui = {
    play: 'playAudio',
    audio: 'audio',
    percentage: 'percentage',
    seekObj: 'seekObj',
    currentTime: 'currentTime'
};

function togglePlay() {
    if (player.getPlayerState() === 1) {
        player.pauseVideo();
        document.getElementById(ui.play).classList.remove('pause');
    } else {
        player.playVideo();
        document.getElementById(ui.play).classList.add('pause');
    }
}
        
function calculatePercentPlayed() {
    let percentage = (player.getCurrentTime() / player.getDuration()).toFixed(2) * 100;
    document.getElementById(ui.percentage).style.width = `${percentage}%`;
}

function calculateCurrentValue(currentTime) {
    const currentMinute = parseInt(currentTime / 60) % 60;
    const currentSecondsLong = currentTime % 60;
    const currentSeconds = currentSecondsLong.toFixed();
    const currentTimeFormatted = `${currentMinute &lt; 10 ? `0${currentMinute}` : currentMinute}:${
    currentSeconds &lt; 10 ? `0${currentSeconds}` : currentSeconds
    }`;
    
    return currentTimeFormatted;
}

function initProgressBar() {
    const currentTime = calculateCurrentValue(player.getCurrentTime());
    document.getElementById(ui.currentTime).innerHTML = currentTime;
    document.getElementById(ui.seekObj).addEventListener('click', seek);

    function seek(e) {
        const percent = e.offsetX / this.offsetWidth;
        player.seekTo(percent * player.getDuration());
    }
    
    calculatePercentPlayed();
}
</code></pre>
<h5>player.css</h5>
<pre><code>* {
    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(&quot;https://img.icons8.com/ios/50/000000/microphone.png&quot;) no-repeat center;
    background-size: contain;
}
.audio-player #playAudio {
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    border: none;
    width: 30px;
    height: 30px;
    background: url(&quot;https://img.icons8.com/play&quot;) no-repeat center;
    background-size: contain;
}
.audio-player #playAudio.pause {
    background: url(&quot;https://img.icons8.com/pause&quot;) 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;
}
</code></pre>
<p>The audio player came from <a href="https://codepen.io/AliKlein/pen/MBNBEW" rel="nofollow noreferrer">here</a>.
Hope this could help you guys!!</p>


blocks|key|476795|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|476796|//+YouTube+video+ID
var+videoID+=+"CMNry4PE93Y";

//+Fetch+video+info+(using+a+proxy+to+avoid+CORS+errors)
fetch('https://cors-anywhere.herokuapp.com/'+%2B+"https://www.youtube.com/get_video_info?video_id="+%2B+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('%2B',+'+'));
++++});
++++params[paramSplit[0]]+=+paramSplit[1];
++++return+params;
++},+{});
}|code-block|syntax|javascript|476797|<audio+id="youtube"+controls></audio>|476798|476799|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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 =&gt; {
  if (response.ok) {
    response.text().then(ytData =&gt; {
      
      // 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 =&gt; obj.audioQuality);
      
      // get the URL for the audio file
      var audioURL = getAdaptiveFormats[findAudioInfo].url;
      
      // update the &lt;audio&gt; element src
      var youtubeAudio = document.getElementById('youtube');
      youtubeAudio.src = audioURL;
      
    });
  }
});

function parse_str(str) {
  return str.split('&amp;').reduce(function(params, param) {
    var paramSplit = param.split('=').map(function(value) {
      return decodeURIComponent(value.replace('+', ' '));
    });
    params[paramSplit[0]] = paramSplit[1];
    return params;
  }, {});
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;audio id="youtube" controls&gt;&lt;/audio&gt;</code></pre>
</div>
</div>
</p>


<p>Is it possible to play only the audio from a YouTube video using HTML 5 and Javascript?</p>


How to play only the audio of a Youtube video using HTML 5?

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

问如何使用HTML5只播放Youtube视频的音频？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用HTML5只播放Youtube视频的音频？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用HTML5只播放Youtube视频的音频？
EN