Для добавления фоновой музыки на страницу с ползунком громкости и возможностью включить или выключить ее можно использовать элемент <audio> и JavaScript.
Вот пример кода:
HTML:
```html
<audio id="bg-music" src="path_to_music_file.mp3" loop></audio>
<input type="range" id="volume-slider" min="0" max="100" value="50" step="1">
<button id="play-btn">Включить</button>
<button id="pause-btn">Выключить</button>
```
JavaScript:
```javascript
var bgMusic = document.getElementById("bg-music");
var volumeSlider = document.getElementById("volume-slider");
var playBtn = document.getElementById("play-btn");
var pauseBtn = document.getElementById("pause-btn");
// Установка громкости по положению ползунка
volumeSlider.addEventListener("input", function() {
bgMusic.volume = volumeSlider.value / 100;
});
// Включение фоновой музыки
playBtn.addEventListener("click", function() {
bgMusic.play();
});
// Выключение фоновой музыки
pauseBtn.addEventListener("click", function() {
bgMusic.pause();
});
```
В этом примере мы используем элемент <audio> с атрибутом loop для повторного воспроизведения музыки на протяжении всей загрузки страницы. Мы также добавляем ползунок громкости с помощью <input type="range">, чтобы позволить пользователю контролировать громкость.
JavaScript-код подключается элементы страницы к соответствующим переменным и устанавливает обработчики событий для ползунка громкости и кнопок включения/выключения музыки. При изменении положения ползунка громкости меняется и громкость фоновой музыки. Кнопки включения и выключения музыки просто вызывают методы play() и pause() объекта <audio> соответственно.