Categories

Новые шаблоны

JS Animated. Как добавить фоновую музыку используя HTML

Lana Greene Январь 26, 2015
Rating: 4.3/5. From 3 votes.
Please wait...

Из этого туториала Вы узнаете, как добавить фоновую музыку используя HTML 5.

JS Animated. Как добавить фоновую музыку используя HTML

В HLTM5, для того чтобы добавить музыку на сайт, используется аудио-тэг. Код, предложенный в данном туториале, будет работать на любой платформе. Сейчас Вы узнаете о музыкальном функционале HTML5.

В этом туториале мы добавим аудио-тэг HTML5, для того чтобы подгружать песню на сайте, а также отображать кнопки управления аудио, задавать автоматическое воспроизведение и повтор.

Код аудио-тэга выглядит следующим образом:

<audio controls autoplay preload loop>
  ...
</audio>

Мы добавим трэк как в mp3, так и в ogg формате, в результате обеспечив его совместимость с разными браузерами. Не все браузеры поддерживают mp3, и не все браузеры поддерживают ogg. На использование двух форматов обеспечит воспроизведение в большинстве браузеров.

Если у Вас есть аудиофайл в формате mp3, мы рекомендуем использовать один из инструментов с открытым кодом, например, Audacity, для того чтобы конвертировать этот файл в формат ogg. Теперь наш код выглядит следующим образом:

Измените «src», для того чтобы использовать ваши файлы.

Если Вы хотите получить точно такое же оформление, как в этом туториале, Вы можете использовать код, приведенный ниже:

<!--background audio--> 
  <style media="screen" type="text/css"> 
  #backgroundaudio { 
  display: block; 
  position: fixed; 
  bottom: -43px; 
  left: 5px; 
  -webkit-transition: all 1s ease-in-out; 
  -moz-transition: all 1s ease-in-out; 
  -ms-transition: all 1s ease-in-out; 
  -o-transition: all 1s ease-in-out; 
  transition: all 1s ease-in-out; 
  } 
  #backgroundaudio:hover { 
  bottom: 0; 
  -webkit-transition: all 1s ease-in-out; 
  -moz-transition: all 1s ease-in-out; 
  -ms-transition: all 1s ease-in-out; 
  -o-transition: all 1s ease-in-out; 
  transition: all 1s ease-in-out; 
  } 
  #backgroundaudio audio { 
  background: #ffffff; 
  padding: 5px; 
  display: table-cell; 
  vertical-align: middle; 
  height: 43px; 
  z-index: 9998; 
  } 
  #backgroundaudio i { 
  font-size: 40px; 
  display: block; 
  background: #ffffff; 
  padding: 5px; 
  width: 50px; 
  float: none; 
  margin-bottom: -1px; 
  z-index: 9999; 
  } 
  </style> 
  <div id="backgroundaudio"> 
	  <i class="fa fa-volume-up"></i> 
	  <audio autoplay="" controls="" loop="" preload=""> 
		  <source src="your_website_url/Sunrise.ogg" type="audio/ogg"></source> 
		  <source src="your_website_url/Sunrise.mp3" type="audio/mpeg"></source> 
		  Your browser does not support the audio element. 
	  </audio> 
  </div>

Для того чтобы добавить код, Вам необходимо выполнить следующее:

  1. Откройте html файл для редактирования и вставьте код в желаемое место в файле:

    JS_-Animated.How_to_add_a_background_music_using_HTML_5--1
  2. Сохраните изменения в файле.

  3. Загрузите аудиофалы в корневую папку вашего сайта:

    JS_-Animated.How_to_add_a_background_music_using_HTML_5--3
  4. Убедитесь, что Вы изменили путь к аудиофайлу в коде, который Вы скопировали:

    <source src="your_website_url/Sunrise.ogg" type="audio/ogg"></source> 
    <source src="your_website_url/Sunrise.mp3" type="audio/mpeg"></source> 
    	

Теперь у Вас на сайте появилась фоновая музыка:

JS_-Animated.How_to_add_a_background_music_using_HTML_5--2

Вы также можете воспользоваться детальным видео туториалом:

JS Animated. Как добавить фоновую музыку используя HTML
Эта запись была размещена в JS Animated туториалы и помечена как background, HTML, music. Добавьте в закладки постоянную ссылку.

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов