Как вы вставляете звуковую часть любого видео YouTube на свой веб-сайт? Простым вариантом было бы преобразовать видео YouTube в файл MP3 и загрузить его на сайт аудиохостинга, например Soundcloud. Это будет работать, но у YouTube, скорее всего, возникнут проблемы с вашим подходом из-за проблем с авторским правом.
Существует также более простой подход, использующий официальный API YouTube и не требующий преобразования файлов.
Вы можете встроить любое видео YouTube на свои веб-страницы, и посетители вашего сайта смогут воспроизводить и приостанавливать аудио-видео простым щелчком. С помощью этой техники вы также можете использовать видео YouTube в качестве фонового звука, который воспроизводится в цикле.
Посмотрите эту живую демонстрацию . Он может напоминать встроенный аудиоплеер, но на самом деле это видео YouTube воспроизводится в фоновом режиме.
Как встроить аудио с YouTube
Чтобы встроить аудио YouTube, достаточно всего одного шага. Откройте любое видео YouTube и запишите идентификатор видео YouTube (строка из 11 символов).
Затем скопируйте приведенный ниже код в любое место на своем веб-сайте и замените 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>
Есть несколько других параметров конфигурации, которые вы можете изменить в зависимости от требований. Например, если вы установите для параметра data-autoplay значение 1, звук начнется сразу же при загрузке страницы. Аналогичным образом установите для data-loop значение 1, и звук будет воспроизводиться непрерывно в бесконечном цикле, пока не будет остановлен вручную.
Это внутренне отображает видео YouTube с помощью проигрывателя IFRAME и, таким образом, будет работать как в настольных, так и в мобильных браузерах.
Файлы JavaScript размещены на Github, а изображения — на Imgur. Рекомендуется скопировать активы на свой собственный сервер перед развертыванием на веб-сайте с интенсивным трафиком.
YouTube Audio — Технические подробности
Мы используем API YouTube JavaScript, которая отображает обычный проигрыватель YouTube, но с шириной и высотой, установленной на 0 пикселей. Когда пользователь нажимает кнопку аудио, он переключает существующее состояние проигрывателя YouTube, и видео начинает играть или паузы.
Вот аннотированная версия исходного кода. Его можно расширить для встраивания плейлистов YouTube, изменить громкость воспроизведения по умолчанию или даже встроить часть видео.
