Воспроизведение звука на JavaScript
Я долго думал, куда отнести эту статью, то ли к HTML5, то ли к JavaScript. В конце концов, я решил отнести именно ко второму разделу, так как звуки чаще всего делают при возникновении какого-то события, а это уже относится к скриптам. Таким образом, в этой статье Вы узнаете, как воспроизвести звук на JavaScript.
Для начала базовая теория. Для добавления аудио на страницу служит тег audio:
<audio src="sound.mp3" autoplay="autoplay"></audio>
Таким образом, можно добавить какую-нибудь фоновую музыку на сайт. Атрибут src отвечает за путь к воспроизводимому файлу, а атрибут autoplay отвечает за автоматическое воспроизведение файла при загрузке страницы. Теперь разберём, как сделать звуковую обработку события на JavaScript. Допустим, будем обрабатывать клик мышью по тексту:
<p onclick="soundClick()">Кликни по этому тексту</p>
Осталось лишь сделать функцию soundClick():
function soundClick() {
var audio = new Audio(); // Создаём новый элемент Audio
audio.src = 'click.mp3'; // Указываем путь к звуку "клика"
audio.autoplay = true; // Автоматически запускаем
}
Таким образом, можно обработать звуком любое возникающее событие на странице. Единственное, что Вы должны чётко понимать - работать это всё будет только в современных браузерах, где есть поддержка HTML5. Впрочем, все используемые на данный момент браузеры (за очень редким исключением), его поддерживают в достаточно высокой степени, поэтому с воспроизведением звуков и музыки через тег audio проблем не возникнет.
-
Создано 02.12.2013 12:58:51
-
Михаил Русаков
Комментарии (14):
Здравствуйте , Уважаемый Русаков Михаил. Не подскажите как сделать , чтобы на сайте был не видимый контент , а при клике он появлялся и еще раз при клике опять закрывался. P.S.Поискал на сайте не нашел.???
Ответить
Здравствуйте, Андрей. Делается это с помощью jQuery.
Ответить
Я не знаю толком jQuery. Можете написать?
Ответить
Зачем использовать библиотеку для двух строчек кода, который можно написать на ванильном JS?
Ответить
На вкус и цвет.
Ответить
Не на вкус и цвет, а оптимизация. Зачем ради такой лёгкой задачи подключать тяжеловесную библиотеку JQuery?
Ответить
Как Вам угодно.
Ответить
Здравствуйте Михаил, не желаете ли вы зайти на фри ланс и вспомнить о конкурсе который создавали, и должны были объявить победителя 4 дня назад?
Ответить
Михаил, есть одно замечание по доработке Вашего сайта, дело в том, что я забыл пароль, попытался восстановить его по почте. Но я и логин забыл тоже, но в почте не приходит логин, только имя, по которому зайти нельзя, логин можно посмотреть только тогда, когда заходишь на сайт. И нельзи ли сделать перенос караток в комментариях, а то иногда неудобно читать тот код, что присылают у вас на сайте в комментариях. И еще вопрос, нету у вас на сайте php - java скрипта новогодней елки, типо чтобы тикали часики сколько осталось до нового года, только опиралось на серверное время сервера. Ну можно еще каких-нибудь плюшек. Заранее спасибо.
Ответить
Здраствуйте, как можно сделать на сайте отдельную категорию для музыки.
Ответить
Здравствуйте! К сожалению следующий код у меня не работает: function soundClick() { var audio = new Audio(); // Создаём новый элемент Audio audio.src = 'click.mp3'; // Указываем путь к звуку "клика" (путь указала правильно) audio.autoplay = true; // Автоматически запускаем }
Ответить
У меня все работает
Ответить
Здравствуйте, Михаил! А у меня вот такой вопрос - как сделать, что бы музыка воспроизводилась в фоновом режиме при клике на картинку. Без отображения аудиоплейера. Пусть это сработает не во всех браузерах, но это уже вторая беда.
Ответить
Спасибо!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.