- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
JS Animated. Как добавить фоновую музыку используя HTML
Январь 26, 2015
Из этого туториала Вы узнаете, как добавить фоновую музыку используя 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>
Для того чтобы добавить код, Вам необходимо выполнить следующее:
-
Откройте html файл для редактирования и вставьте код в желаемое место в файле:
Сохраните изменения в файле.
Загрузите аудиофалы в корневую папку вашего сайта:
-
Убедитесь, что Вы изменили путь к аудиофайлу в коде, который Вы скопировали:
<source src="your_website_url/Sunrise.ogg" type="audio/ogg"></source> <source src="your_website_url/Sunrise.mp3" type="audio/mpeg"></source>
Теперь у Вас на сайте появилась фоновая музыка:
Вы также можете воспользоваться детальным видео туториалом:
JS Animated. Как добавить фоновую музыку используя HTML