- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
CherryFramework 3. Как добавить автоматически воспроизводимый фоновый аудиотрэк, используя HTML5
Сентябрь 4, 2015
Из этого туториала Вы узнаете, как добавить аудиотрэк HTML5, который будет автоматически воспроизводиться, когда пользователи посещают ваш сайт WordPress.
CherryFramework 3. Как добавить автоматически воспроизводимый фоновый аудиотрэк, используя HTML5
Для того чтобы вставить HTML5 аудиотрэк в шаблон WordPress, следуйте таким инструкциям:
-
Загрузите аудиофайл в папку wp-content/themes/themeXXXXX/audio. Если такой папки ещё не существует, создайте её. Мы советуем Вам использовать аудиофайл в формате MP3, так как этот формат поддерживается всеми современными браузерами.
-
Скопируйте файл header.php из папки wp-content/themes/CherryFramework в папку wp-content/themes/themeXXXXX, если файл отсутствует в этой папке.
-
Откройте файл wp-content/themes/themeXXXXX/header.php в любом редакторе кода.
-
Вставьте следующий код перед закрывающим тэгом шапки (head):
<script type="text/javascript"> (function($) { $(document).ready(function() { var audio = new Audio(); audio.src = "<?php echo get_stylesheet_directory_uri(); ?>/audio/file_name.mp3"; audio.loop = true; audio.play(); }); })(jQuery); </script> </head>
Где file_name.mp3 — это название фонового аудиофайла.
Если Вы добавите строку
audio.loop = true;
— аудиофайл будет снова воспроизведён, когда его воспроизведение завершится: -
Сохраните изменения в файле header.php и загрузите его на сервер. Теперь, когда Вы обновите ваш сайт, Вы услышите фоновый аудиотрэк.
Вы можете также ознакомиться с детальным видео-туториалом ниже:
CherryFramework 3. Как добавить автоматически воспроизводимый фоновый аудиотрэк, используя HTML5