Как воспроизводить только аудио видео Youtube с помощью HTML 5?

Ответ 1

Вставьте видеопроигрыватель и используйте CSS, чтобы скрыть видео. Если вы сделаете это правильно, вы даже сможете скрыть только видео, а не элементы управления под ним.

Однако я бы рекомендовал против этого, потому что это будет нарушение YouTube TOS. Вместо этого используйте свой собственный сервер, если вы действительно хотите воспроизводить только аудио.

Ответ 2

Вы можете проанализировать метафайл 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>

Ответ 3

Это может быть старый пост, но люди все еще могут найти это, поэтому здесь вы идете:

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

Ответ 4

Ответ прост: Используйте сторонний продукт, например, jwplayer или аналогичный, затем установите его на минимальный размер проигрывателя, который является размером аудиоплеера (отображаются только элементы управления проигрывателем).

Voila.

Используется это более 8 лет.

Ответ 5

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>

Ответ 6

Я согласен с Томом ван дер Вёрдтом. Вы можете использовать CSS, чтобы скрыть видео (видимость: скрытый или переполненный: скрытый в обертке div, ограниченный высотой), но это может нарушить политики Youtube. Кроме того, как вы можете управлять аудио (пауза, остановка, громкость и т.д.)?

Вместо этого вы можете обращаться к ресурсам, таким как http://www.houndbite.com/ для управления аудио.

Ответ 7

Добавляя к упоминаниям jwplayer и возможных нарушений TOS, я хотел бы ссылаться на следующий репозиторий на github: Библиотека генерации аудио файлов YouTube, который позволяет сгенерировать следующий вывод:

Библиотека поддерживает плейлисты и авториндинг PHP с учетом URL-адреса видео и параметров конфигурации.

Ответ 8

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>

Ответ 9

Более просто.

<iframe width="0" height="0" src="https://www.youtube.com/embed/youtubeID?rel=0" ></iframe>