web-dev-qa-db-ja.com

HTML 5を使用してYoutubeビデオのオーディオのみを再生する方法

HTML 5とJavascriptを使用して、YouTubeビデオのオーディオのみを再生することは可能ですか？

javascripthtml5audioyoutube
28
user979830

ビデオプレーヤーを埋め込み、CSSを使用してビデオを非表示にします。適切に行うと、ビデオのみを非表示にして、その下のコントロールを非表示にできる場合もあります。

ただし、これはYouTube TOSの違反になるため、お勧めしません。オーディオのみを再生する場合は、代わりに独自のサーバーを使用してください。

14
Tom van der Woerdt

このリンクを使用して、この特定の動画IDで利用可能なすべてのストリームのYoutubeメタファイルを解析できます：https://www.youtube.com/get_video_info?video_id={VID}および音声のみのストリームを抽出します。

パブリックGoogle Imageプロキシの例を次に示します（ただし、無料または独自の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>

すべての動画で機能するわけではなく、収益化設定などに大きく依存します。

28
350D

これは古い投稿かもしれませんが、人々はまだこれを探している可能性があるので、ここに行きます：

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

答えは簡単です。jwplayerなどのサードパーティ製品を使用し、オーディオプレーヤーサイズである最小プレーヤーサイズに設定します（プレーヤーコントロールのみを表示します）。

出来上がり。

これを8年以上使用しています。

4
shindiggah

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>
1
MR.007X

JwplayerとTOS違反の可能性に関する言及に加えて、githubの次のリポジトリにリンクしたいと思います： YouTubeオーディオプレーヤー生成ライブラリ 、次の出力を生成できます

enter image description here

ライブラリは、プレイリストとPHPビデオURLと設定オプションを指定した自動レンダリングをサポートしています。

0
berezovskyi
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>
0
Valdermito dev. ValdeClickPlay

Tom van der Woerdtに同意します。 CSSを使用してビデオを非表示にすることもできます（高さで制限されたdivラッパーのvisibility：hiddenまたはoverflow：hidden）が、YouTubeのポリシーに違反する可能性があります。さらに、オーディオをどのように制御できますか（一時停止、停止、音量など）。

代わりに http://www.houndbite.com/ などのリソースを使用して音声を管理できます。

0
dangerChihuahua007