Як вбудувати лише аудіо з відео YouTube на веб-сайт
Вбудовування відео з YouTube є досить простим процесом. Платформа надає спеціальний HTML-код у параметрах “Поділитися”, що дозволяє легко інтегрувати відео на ваш веб-ресурс. YouTube пропонує різні варіанти поширення контенту, але всі вони орієнтовані саме на обмін відеоматеріалами. Це логічно, оскільки YouTube – це, насамперед, платформа для відеохостингу. Однак, велика кількість контенту на YouTube є аудіо з доданим нерелевантним відеорядом. На жаль, YouTube не надає можливості ділитися або вставляти лише аудіозапис з відео. Вам необхідно вбудовувати відео разом з аудіо. Але, якщо ви хочете обійти офіційні обмеження, існує простий метод вставки лише аудіо. Аміт Агарвал розробив невеликий фрагмент коду, який дозволяє це зробити. Цей метод базується на YouTube Javascript API, код якого доступний на Github. Розглянемо детальніше, як це працює.
Крок 1: Знайдіть відео, з якого ви хочете отримати лише аудіо. Скопіюйте ідентифікатор цього відео. Він розташований в URL-адресі після “v=” та виділений на зображенні нижче.
Крок 2: Додайте наведений нижче HTML-фрагмент на свою веб-сторінку, замінивши “VIDEO_ID” на ідентифікатор відео, який ви скопіювали раніше.
<div data-video="VIDEO_ID" data-autoplay="0" data-loop="1" id="youtube-audio"> </div> <noscript>Для відтворення аудіо потрібна підтримка JavaScript.</noscript> <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, щоб аудіо відтворювалося у циклі. Якщо ви плануєте використовувати цей метод на вашому сайті, очікуючи великий трафік, рекомендується розмістити скрипт на власному сервері. Посилання на цей скрипт ви знайдете нижче.
Оновлено: 8 грудня 2020 року о 4:30 ранку