форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
09-01-2018 в 13:25 526

Проигрывание звука при нажатии на кнопку - ссылку


Проигрывание звука при нажатии на кнопку - ссылку
Здравствуйте! сегодня делал человеку сайт и он попросил реализовать звуковое сопровождение по нажатию на кнопку или ссылку на сайте но не на все а на те что ему нужно и что бы мелодии были разными

Задача была ясна, и не была сложной я приступил к её реализации, но так как вариантов для воспроизведении звука по клику много я сидел и думал как сделать так что бы заказчику было удобно менять мелодию и добавлять новые кнопки с другими звуками и пришел к такому решению о котором решил поделится с вами!

Для работы данного решение не нужно не каких посторонних плагинов и больших скриптов
Редактирование и добавление кнопок на сайт очень просто и не потребует больших знай в программирование

Установка

Просто скопируйте код кнопки ниже и вставьте его в нужное место

Код
<a href="#" onclick="new Audio('ТУТ ССЫЛКА НА АУДИО ФАЙЛ').play();">НАЗВАНИЕ ССЫЛКИ</a>


Как можно видеть в коде выше нам по сути нужна только вот эта часть
Код
onclick="new Audio('ТУТ ССЫЛКА НА АУДИО ФАЙЛ').play();"

она и отвечает за проигрывание мелодии

Для того что бы сделать запрет на переход по ссылки если вдруг вы используете этот пример для всплывающих окошек или ещё чего-то вам просто нужно добавить к функции onclick вот эту строчку return false; что бы получилось вот так
Код
onclick="new Audio('ТУТ ССЫЛКА НА АУДИО ФАЙЛ').play(); return false;"


Полная версия ссылки без перехода на другую страницу
Код
<a href="#" onclick="new Audio('http://talantlev.ucoz.ru/uvok.mp3').play(); return false;">ССЫЛКА</a>

Демо ССЫЛКА

Полная версия ссылки c перехода на другую страницу
Код
<a href="http://talantlev.ucoz.ru/" onclick="new Audio('http://talantlev.ucoz.ru/uvok.mp3').play();">ССЫЛКА</a>

Демо http://talantlev.ucoz.ru

Для изменения звукового сигнала нам нужно просто поменять ссылку http://talantlev.ucoz.ru/uvoF.mp3 на вашу ссылку на аудио файл

Думаю что всё очень просто и понятно но если есть вопросы пишите их в комментариях

9

Комментарии

Бармен 09-07-2018 в 01:56
Не плохо спасибо)
waak 27-07-2018 в 00:42
Пожалуйста!
Добавлять комментарии могут только зарегистрированные пользователи.

[ Регистрация | Вход ]

Автор


Похожие материалы

Реклама



Дополнение

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

Установка скриптов – иногда не быстрый процесс. На страницах с описаниями всегда указывается место, куда нужно вставить приложенный код. Если требуется редактирование настроек в Панели управления, то об этом тоже пишется. Если никакой информации об установке нет, значит, код можно ставить в любом месте на сайте, преимущественно в сайдбаре. Прежде чем редактировать страницы, настоятельно рекомендуем делать резервное копирование шаблонов. Этот совет по большей части для новичков.

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru