Как сделать фоновую музыку в 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/

Comments

[ArtyomOchkin]

Здравствуйте. Да, интересно. При переадресации на https://sekretymastera.ru/zdorovie/pyiltsa-sosnyi/ с вашей ссылки действительно запускается автопроигрывание. Хотя это и плохой тон, и это не одобряется спецификацией, но это работает:). Тоже воспользуюсь для проекта. Спасибо за дополнение

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

Вот этот момент "Хотя это и плохой тон, и это не одобряется спецификацией, но это работает:). ", сам по себе очень интересен. Наш случай - простенькое приложение сайт. Пойдёт. Ведь сплошь и рядом. А если, что подходит под Искусственный Интеллект? Тоже прокатывает. Как-то само напрашивается , что получается Моральный Урод. Внедряется в нашу жизнь с бешенной скоростью. Во все сферы.