HTML5를 사용하여 유튜브 비디오의 오디오만 재생하는 방법은 무엇입니까?

HTML5와 Javascript를 사용하여 YouTube 동영상의 오디오만 재생할 수 있습니까?

nbro
편집된 질문5일 9월 2017 в 4:03
프로그래밍
html5 youtube javascript audio
31일 12월 2011 в 7:56
8 파운드
질문에 대한 의견 (1)

유튜브 비디오 파일을 사용할 수 있는 모든 스트리밍합니다 metalun 파싱할 수 있습니다 이 특정 id 를 이 링크: 비디오 및 오디오 추출 (https://www.youtube.com/get_video_info) = {} '만' video_id 스트리밍합니다.?

예를 들어보겠습니다 인터넷을 통해 구글 이미지 가상본 (단, 자신의 '또는' 가상본 고르 무료로 사용할 수 있습니다).

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

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;
    }, {});
}
<amp-audio id="youtube" autoplay controls loop></amp-audio>

끝 - &lt 스니핏 >;!

39, 모든 동영상, 매우 단순하게 작동하는 doesn& 따라 유료화 설정 또는 셈이에요.

350D
편집된 답변9일 4월 2019 в 2:41
해설 (5)
해결책

비디오 플레이어를 내장하고 CSS를 사용하여 비디오를 숨깁니다. 제대로 하면 비디오만 숨길 수 있고 아래 컨트롤은 숨길 수 없을 수도 있습니다.

그러나, 나는 그것에 반대할 것을 권고한다. 왜냐하면 그것은 *YouTube TOS의 위반이 될 것이기 때문이다. 오디오만 재생하려면 자신의 서버를 대신 사용하십시오.

Reinstate Monica
편집된 답변9일 1월 2013 в 6:22
해설 (3)

하지만 사람들은 여전히 검색할 수 있다 이 늙은 게시물로의 이렇게 다 왔다.

<div style="position:relative;width:267px;height:25px;overflow:hidden;">
<div style="position:absolute;top:-276px;left:-5px">


</div>
</div>
해설 (0)

답은 간단합니다. jwplayer와 같은 타사 제품을 사용하십시오. 그런 다음 오디오 플레이어 크기인 최소 플레이어 크기로 설정합니다(플레이어 컨트롤만 표시).

Voila.

이걸 8년 넘게 써왔어요

Alban
편집된 답변8일 10월 2012 в 9:20
해설 (4)

실제 사용자 ID 와 video_id 유튜브 (youtube) 동영상.

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

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. null - &gt.

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;
    }, {});
}
<amp-audio id="youtube" autoplay controls loop></amp-audio>

끝 - &lt 스니핏 >;!

해설 (0)

나는 톰 반 데르 워르트의 의견에 동의한다. CSS를 사용하여 비디오를 숨길 수 있지만(가시성:숨김 또는 오버플로: 높이에 의해 제한된 div 래퍼에 숨겨짐) Youtube' 또한 오디오(일시 중지, 중지, 볼륨 등)를 제어하는 방법?

대신 http://www.houndbite.com/과 같은 리소스를 사용하여 오디오를 관리할 수 있습니다.

해설 (1)

Tos 의 추가 언급은 제프 프라이어 위반 연결할 수 있으며, 깃허브 대한 다음 리포지토리를 싶다. 유튜브 (youtube) 오디오 플레이어 세대 라이브러리란, 다음과 같은 출력물을 생성할 수 있습니다.

[! 입력하십시오. 이미지 여기에 설명을] [3]

주어진 URL 및 비디오 재생 및 PHP 오토레네링 라이브러리마다 지지하는 구성내역 옵션.

[3]: http://navarr.me/ytaudio/? q = https% 3a% 2f% 2fwww.youtube.com% 2fwatch% 3fv% 3dg8wj7awzhlk&amp, s = = = = on&amp on&amp, tc = on&amp 싸이제 l&amp, js, 테마 = 어두운 hd on&;

해설 (2)

단순한 이상입니다.

해설 (3)