Hobo
В некоторых ситуациях не помешает фоновая музыка на сайте. Сейчас посмотрим, как можно реализовать возможность проигрывания приятной музыки для посетителя сайта.
В правом нижнем углу сайта должна быть иконка в виде перечеркнутого динамика — музыку не слышно, а если посетитель нажмёт на эту иконку, то перечёркивание исчезает и начинает играть музычка.
Внедрять функционал воспроизведения музыки на сайте будем с помощью HTML, CSS и JavaScript. Вот пошаговая инструкция, как это сделать:
Музыка на HTML-сайте
Шаг 1: Подготовьте аудиофайл
Сначала вам нужно иметь .mp3 или другой аудиофайл, который вы хотите воспроизвести. Загрузите его на ваш сервер или используйте ссылку на публичный ресурс.
Шаг 2: HTML-разметка
Создайте кнопку в виде иконки, использующей символ динамика или изображение, и добавьте аудиофайл. Вот пример разметки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Музыка на сайте</title> <link rel="stylesheet" href="styles.css"> <!-- Подключите ваш CSS файл --> </head> <body> <!-- Переключатель музыки --> <div id="music-button" class="music-control"> <img src="mute-icon.png" alt="mute" id="icon" /> <!-- Иконка "перечеркнутый динамик", замените на свой путь --> </div> <!-- Аудиофайл --> <audio id="background-music" loop> <source src="your-audio-file.mp3" type="audio/mpeg"> <!-- Замените на путь к вашему аудиофайлу --> Ваш браузер не поддерживает элемент audio. </audio> <script src="script.js"></script> <!-- Подключите ваш JS файл --> </body> </html> |
Шаг 3: CSS для оформления кнопки
Создайте стиль для вашей кнопки, чтобы она была в правом нижнем углу экрана:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* styles.css */ body { margin: 0; padding: 0; } .music-control { position: fixed; right: 20px; /* Отступ от правого края */ bottom: 20px; /* Отступ от нижнего края */ cursor: pointer; /* Изменяем указатель на курсор */ } #icon { width: 50px; /* Размер иконки, можно изменить */ height: 50px; /* Размер иконки, можно изменить */ } |
Шаг 4: JavaScript для управления воспроизведением
Напишите JavaScript, который будет управлять воспроизведением музыки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// script.js const musicButton = document.getElementById('music-button'); const backgroundMusic = document.getElementById('background-music'); const icon = document.getElementById('icon'); let isMuted = true; // Статус звука musicButton.addEventListener('click', () => { if (isMuted) { backgroundMusic.play(); // Начинаем воспроизведение музыки icon.src = 'unmute-icon.png'; // Замените на свою иконку "нормальный динамик" } else { backgroundMusic.pause(); // Останавливаем воспроизведение музыки icon.src = 'mute-icon.png'; // Замените на свою иконку "перечеркнутый динамик" } isMuted = !isMuted; // Меняем статус звука }); |
Шаг 5: Проверьте работу на сайте
После того, как вы создали HTML, CSS и JavaScript, загрузите их на ваш сервер и откройте сайт. Вы должны увидеть иконку в правом нижнем углу. При нажатии на неё музыка будет начинать играть или останавливаться.
Дополнительные советы
- Совместимость: Убедитесь, что ваш аудиофайл поддерживается браузерами. Для лучшей совместимости можно добавить несколько форматов в тег audio.
- Мобильные устройства: На некоторых мобильных устройствах автоматическое воспроизведение музыки может быть заблокировано. Убедитесь, что пользователь активирует воспроизведение, нажав на кнопку.
- Кроссбраузерность: Проверьте работу на разных устройствах и браузерах.
Теперь у вас есть функциональность для воспроизведения приятной музыки на сайте с управлением через иконку!
____________________
Музыка на WordPress-сайте
Давайте будем использовать шрифт Font Awesome для иконки динамика. Скрипт разместим в папке js рабочей темы сайта на WordPress.
Вот обновленный код, учитывающий использование шрифта Font Awesome для иконки динамика, а также указания, где разместить коды в структуре сайта WordPress.
Шаг 1: Подключите Font Awesome
Сначала убедитесь, что Font Awesome подключен к вашему сайту. Это можно сделать, добавив следующий код в файл header.php вашей темы, перед закрывающим тегом /head:
|
1 2 |
<!-- В файле header.php --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
Шаг 2: HTML-разметка
Разместите HTML-код в файле, который отвечает за разметку вашего сайта. Если вы хотите, чтобы кнопка отображалась на всех страницах, лучше добавить его в файл footer.php, чтобы не загромождать основной контент. Вот пример кода:
|
1 2 3 4 5 6 7 8 9 |
<!-- В файле footer.php --> <div id="music-button" class="music-control"> <i class="fas fa-volume-up" id="icon"></i> <!-- Используем иконку динамика от Font Awesome --> </div> <audio id="background-music" loop> <source src="<?php echo get_template_directory_uri(); ?>/your-audio-file.mp3" type="audio/mpeg"> <!-- Убедитесь, что файл находится в вашей папке темы --> Ваш браузер не поддерживает элемент audio. </audio> |
Не забудьте заменить your-audio-file.mp3 на имя вашего аудиофайла, который вы загрузите в папку вашей темы.
Шаг 3: Добавьте CSS
Добавьте CSS для оформления кнопки в файл style.css вашей темы. Вот пример CSS-кода:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* В файле style.css */ body { margin: 0; padding: 0; } .music-control { position: fixed; right: 20px; /* Отступ от правого края */ bottom: 20px; /* Отступ от нижнего края */ cursor: pointer; /* Изменяем указатель на курсор */ font-size: 24px; /* Размер иконки */ color: #fff; /* Цвет иконки */ background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */ border-radius: 5px; /* Скругленные углы */ padding: 10px; /* Отступы для кнопки */ } .music-control:hover { background-color: rgba(0, 0, 0, 0.8); /* Изменение фона при наведении */ } |
Шаг 4: JavaScript для управления воспроизведением
Создайте файл script.js в папке js вашей темы и добавьте следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// В файле js/script.js document.addEventListener('DOMContentLoaded', function() { const musicButton = document.getElementById('music-button'); const audio = document.getElementById('background-music'); const icon = document.getElementById('icon'); let isPlaying = false; musicButton.addEventListener('click', function() { if (isPlaying) { audio.pause(); icon.classList.remove('fa-volume-up'); icon.classList.add('fa-volume-mute'); } else { audio.play(); icon.classList.remove('fa-volume-mute'); icon.classList.add('fa-volume-up'); } isPlaying = !isPlaying; }); }); |
Итоговая структура
- header.php: добавьте код для подключения Font Awesome.
- footer.php: добавьте HTML-код для кнопки и аудиофайла.
- style.css: добавьте CSS-код для стилей кнопки.
- js/script.js: создайте JavaScript-файл с кодом управления воспроизведением музыки.
Сделав все эти шаги, вы сможете воспроизводить музыку на вашем сайте WordPress с кнопкой управления в правом нижнем углу.
Как подключить файл script.js
Чтобы код, который управляет воспроизведением музыки, работал, вам нужно создать файл script.js и подключить его к вашей теме WordPress. Вот пошаговая инструкция по подключению JavaScript файла.
Шаг 1: Создайте файл script.js
1. В папке вашей темы (например, wp-content/themes/your-theme/) создайте новый файл с именем script.js.
2. Откройте файл script.js в текстовом редакторе и добавьте следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// В файле script.js document.addEventListener("DOMContentLoaded", function() { const musicButton = document.getElementById("music-button"); const backgroundMusic = document.getElementById("background-music"); const icon = document.getElementById("icon"); let isPlaying = false; musicButton.addEventListener("click", function() { if (isPlaying) { backgroundMusic.pause(); icon.classList.remove("fa-volume-up"); icon.classList.add("fa-volume-mute"); } else { backgroundMusic.play(); icon.classList.remove("fa-volume-mute"); icon.classList.add("fa-volume-up"); } isPlaying = !isPlaying; }); }); |
Шаг 2: Подключите script.js к вашей теме
Теперь вам нужно подключить этот файл JavaScript к вашей теме. Для этого откройте файл functions.php вашей темы и добавьте следующий код:
|
1 2 3 4 5 |
// В файле functions.php function enqueue_custom_scripts() { wp_enqueue_script('custom-script', get_template_directory_uri() . '/script.js', array(), null, true); } add_action('wp_enqueue_scripts', 'enqueue_custom_scripts'); |
Этот код делает следующее:
- Использует функцию wp_enqueue_script() для подключения вашего script.js файла.
- Указывает путь к файлу, который вы создали в предыдущем шаге.
- Указывает, что скрипт должен быть загружен внизу страницы (значение true).
Шаг 3: Очистка кеша
Если вы используете кэширование на своем сайте, не забудьте очистить кеш, чтобы изменения вступили в силу.
Заключение
Теперь ваш сайт должен иметь кнопку музыкального управления, которая будет использовать иконки Font Awesome и воспроизводить или останавливать музыку по щелчку. Проверьте работоспособность всего кода и убедитесь, что аудиофайл доступен и находится в правильной папке.
