Главная / Верстка / Веб решения / Воспроизведение музыки на странице - html5 тег audio

Воспроизведение музыки на странице - html5 тег audio


30.06.2013 10:519412

Появление тега audio в html5 дает нам возможность воспроизводить звук , использовать события , делать страницы более "живыми" , добавляя им интерактивности. Это , в свою очередь, обязывает каждого уважающего себя вебмастера быть как минимум в курсе последних тенденций в развивающемся с огромной скоростью мире html-нововведений.

Вот на одном из таких html5-новшеств мы и сосредоточимся в данной теме.  Исходный код мы будем располагать между тегами <body></body> и никак не иначе. Рассмотрим несколько вариантов подачи аудио на сайт:


Вариант первый : Это классический вариант , когда пишется тег audio , внутри которого назначается атрибут controls , отвечающий за показ панели управления воспроизведением , между открывающим и закрывающим тегом audio прописывается путь к музыкальному файлу с помощью тега sourse . Разные браузеры воспроизводят разные форматы , поэтому желательно аудиофайл использовать в двух расширениях : mp3 и ogg. 
 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Воспроизведение звука в html5</title>
</head>
<body>
<audio controls="controls">
<source src="../audio.ogg">
<source src="../audio.mp3">Тег audio не поддерживается вашим браузером.</audio>
</body>
</html> 

 Вариант второй: Отличается тем , что музыка будет играть сразу при открытии страницы , в этом нам поможет атрибут autoplay , также будет выводиться панель управления , и для наглядности добавим туда проигрывание по кругу с помощью атрибута loop , т.е. после окончания проигрывания аудио будет идти повтор , и так постоянно:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Воспроизведение звука в html5</title>
</head>
<body>
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="../audio.ogg">
<source src="../audio.ogg">Тег audio не поддерживается вашим браузером.</audio>
</body>
</html> 


Вариант третий: иногда бывает так что нужно воспроизвести звук , музыку и тд таким образом , чтобы не было видно панели управления , для этого нужно убрать из исходного кода атрибут controls , который отвечает за вывод панели управления воспроизведением звука , а вот атрибут autoplay в данном примере будет обязательный , иначе как мы нажмем на кнопку воспроизведения если ее не будет ?

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Воспроизведение звука в html5</title>
</head>
<body>
<audio autoplay="autoplay" loop="loop">
<!--параметр loop на ваш выбор в данном примере-->
<source src="../audio.ogg">
<source src="../audio.ogg">Тег audio не поддерживается вашим браузером.</audio>
</body>
</html>

По просьбе посетителей, добавляю в данный урок кнопки для редактирования:
Для этого нужно строке   <audio autoplay="autoplay" loop="loop">  добавить id , например :

 <audio autoplay="autoplay" loop="loop" id="player">
Если вы хотите воздействовать на такие параметры как громкость , пауза и +- , то нужно в существующий код добавить следующее:

<button onclick="document.getElementById('player').play()">Воспроизведение</button>
<button onclick="document.getElementById('player').pause()">Пауза</button>
<button onclick="document.getElementById('player').volume+=0.1">Громкость +</button>
<button onclick="document.getElementById('player').volume-=0.1">Громкость -</button>
<script>
document.getElementById("player").volume = 0.1;
</script>


После этих манипуляций , ваш плеер будет иметь кнопки + - для громкости и паузу, плюс воспроизводить изначально с указанной вами громкости

 



Вы не можете скачивать прикрепленные файлы.
Пожалуйста, включите JavaScript!

Audio , Звук На Странице





«Воспроизведение музыки на странице - html5 тег audio» - Похожие страницы

audio тег html audio тег html Тег audio в html используется для того чтобы  воспроизводить различные фоновые звуки либо музыку  . С помощью тега <аудио> можно создать и задать необходимые параметры  воспроизведения и манипулировани...

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям