Как сделать фоновую музыку в html?

Question

[logan baby]

у меня есть такой кусок кода:
цель - сделать автопроигрывание музыки на фоне нажатием кнопки. но ниче не получается

<div class align="center">
		<input type="submit"
			   class="buttonSwagee"
		       value="Послушать трэк свэгги"
		       onclick='<audio controls autoplay>
    					<source src="радуга.mp3" type="audio/mpg">
    					</audio>'>
	</div>

Comments

[Дмитрий Кузнецов]

Ээээ...а что же должен сделать onlick? Тем более, который повесили на инпут с типо submit!?

[logan baby]

Дмитрий Кузнецов, запускать музыку в фоне
я короче хз как это реализовать, я не понимаю

[logan baby]

Дмитрий Кузнецов, как завернуть включение трэка в oncklick?

[Дмитрий Кузнецов]

в html сделайте отдельную кнопку с type="button", добавьте отдельно в код ваш audio-html тег с каким-либо идентификатором (для js). И дальше, через JS, запускайте audio.
И да, уберите autoplay, иначе он будет сам включаться (хотя вроде бы браузеры блокируют такую возможность).

[Дмитрий Кузнецов]

logan baby, прочтите про html5 audio. в onclick запускаете метод, который получает id audio-тега и через js запускай audio.

[logan baby]

Дмитрий Кузнецов,

<div class align="center">
		<audio src="радуга.mp3" autoplay="autoplay"></audio>
		<script type="text/javascript">
			function soundClick() {
  			var audio = new Audio(); 
  			audio.src = 'радуга.mp3'; 
  			audio.autoplay = true; 
		}
		</script>
		<input type="button"
			   class="buttonSwagee"
		       value="Послушать трэк свэгги"
		       onclick="soundClick()">
	</div>

что то типо того? только не работает

[Дмитрий Кузнецов]

<div class align="center">
    <audio src="радуга.mp3" id="audio"></audio>
    
    <script type="text/javascript">
      function soundClick() {
  	var audio = document.getElementById('audio');
        audio.play();
    }
    </script>
    
    <input type="button"
         class="buttonSwagee"
           value="Послушать трэк свэгги"
           onclick="soundClick()">
  </div>

Примерно так. Попробуйте, не проверял

[Дмитрий Кузнецов]

logan baby, И всё таки лучше используйте button вместа input.
UPD: У вас могут быть проблемы с тем, что путь к файлу неверный. Тогда придётся работать с путями.

[logan baby]

Дмитрий Кузнецов, жесть у меня и прошлый код заработал))) причина - было расширение файла .wav а не mp3, я кринге
но вам спасибо

[Дмитрий Кузнецов]

logan baby, не за что

[Дмитрий Кузнецов]

logan baby, ваш прошлый вариант мог действительно заработать. Но он создавался с нуля, а не использовался тот, который указан в html коде.

Answer 1

[Дмитрий Кузнецов]

в конце тэга body:

<script type="text/javascript">
      function soundClick() {
  	var audio = document.getElementById('audio');
        audio.play();
    }
    </script>
</body>

<div class align="center">
    <audio src="радуга.mp3" id="audio"></audio>
    
    <button type="button" class="buttonSwagee" onclick="soundClick()">Послушать трэк свэгги</button>
  </div>

Answer 2

[Сергей Кутузов]

Вот тут подробненько с кодом, с примерами и без заморочек: https://starper55plys.ru/html/mysik-site/

Answer 3

[Владимир Яковлев]

если на сайте появляется звук, который я не включал, сразу закрываю.
очень раздражает.