• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Звук при нажатии переключателей страниц (Воспроизведение звука на JavaScript)
Звук при нажатии переключателей страниц
Angerfist
 		Понедельник, 05 Сентября 2016, 18:18 | Сообщение 1
Оффлайн
Vip
Сообщений:767
Награды: 21
« 253 »
Для желающих разнообразить свой сайт, а именно навигацию по сайту, предлагаю добавить звуки к кнопкам переключения страниц в модулях каталогов сайта.

Короче выглядит как прикол, но для серьёзности я выбрал короткий mp3 со звуком нажатия кнопки).



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

Устанавливаем функцию soundClick() на главной странице каталога внизу:
Код

<script>
function soundClick() {
var audio = new Audio(); // Создаём новый элемент Audio
audio.src = '/sound/sound.mp3'; // Указываем путь к звуку "клика"
audio.autoplay = true; // Автоматически запускаем
}
</script>


Также на главной странице находим оператор вывода нижних переключателей страниц, например такая конструкция:
Код

<?if($PAGE_SELECTOR1$)?><div style="text-align:center;">$PAGE_SELECTOR1$</div><?endif?>

Добавляем обработку клика мышью по переключателям:
Код

<?if($PAGE_SELECTOR1$)?><div style="text-align:center;" onclick="soundClick()">$PAGE_SELECTOR1$</div><?endif?>

Проверил на IE 11, EDGE и Firefox, на остальных браузерах не проверял, Источник материала.
В архиве файл mp3 - 1.22Кб
Прикрепления: sound.rar (0.8 Kb) · 6589974.png (117.9 Kb)

No regrets

Сообщение отредактировал
Angerfist - Понедельник, 05 Сентября 2016, 18:23
Страна: (RU)
Сопрано
 		Понедельник, 05 Сентября 2016, 18:22 | Сообщение 2
Оффлайн
Vip
Сообщений:461
Награды: 4
« 14 »
Для сайтов с тематикой связано с музыкой как раз подойдет.
Страна: (RU)
Kosten
 		Понедельник, 05 Сентября 2016, 18:26 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Как видно по скрипу, звук можно выставить свой, что отлично.
Страна: (RU)
Angerfist
 		Понедельник, 05 Сентября 2016, 18:28 | Сообщение 4
Оффлайн
Vip
Сообщений:767
Награды: 21
« 253 »
Kosten, да звук можно любой свой, забыл написать что файл mp3 заливаем на сайт и указываем в скрипте путь до него.
No regrets
Страна: (RU)
Kosten
 		Понедельник, 05 Сентября 2016, 18:29 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Angerfist, но в скрипте видно же. wink
Страна: (RU)
Angerfist
 		Понедельник, 05 Сентября 2016, 18:29 | Сообщение 6
Оффлайн
Vip
Сообщений:767
Награды: 21
« 253 »
И вообще к любой надписи или кнопке добавить звук вот таким образом:

Код

<p style="cursor:pointer" onclick="soundClick()">Ссылка или кнопка</p>
No regrets
Страна: (RU)
FeStemBer
 		Понедельник, 05 Сентября 2016, 19:16 | Сообщение 7
Оффлайн
Проверенные
Сообщений:355
Награды: 1
« 13 »
Раньше на одном сайте видел такой эффект, теперь сделал себе, Сп.
Страна: (RU)
Start
 		Четверг, 08 Сентября 2016, 11:34 | Сообщение 8
Оффлайн
Проверенные
Сообщений:116
Награды: 2
« 25 »
Цитата Angerfist ()
И вообще к любой надписи или кнопке добавить звук вот таким образом:
как сделать на увел. фотографии? как тут при нажатий на фото звук...
Тити*
Страна: (RU)
Angerfist
 		Четверг, 08 Сентября 2016, 12:58 | Сообщение 9
Оффлайн
Vip
Сообщений:767
Награды: 21
« 253 »
В комменте же написал что можно к любому обьекту прицепить... например для лайтбокс
Код

<img src="$IMG_URL1$" onclick="soundClick()" class="ulightbox" href="$IMG_URL1$" title="Увеличить">


и сам скрипт не надо выносить куда либо, оставить встроенным в страницу или вообще первый контейнер в низ.
No regrets

Сообщение отредактировал
Angerfist - Четверг, 08 Сентября 2016, 13:01
Страна: (RU)
Start
 		Четверг, 08 Сентября 2016, 16:18 | Сообщение 10
Оффлайн
Проверенные
Сообщений:116
Награды: 2
« 25 »
Цитата Angerfist ()

В комменте же написал что можно к любому обьекту прицепить... например для лайтбокс

Если используется onclick то как? вот код:
Код
<a href="$IMG_URL1$" class="highslide" onclick="return hs.expand(this)"> <img src="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>/Raznoe/ucoz/img/cats.jpg<?endif?>" width="460" height="200" alt="" /></a>
Тити*

Сообщение отредактировал
Start - Четверг, 08 Сентября 2016, 19:12
Страна: (RU)
Kosten
 		Четверг, 08 Сентября 2016, 20:12 | Сообщение 11
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Так это отлично, что можно закрепить еще к изображению, смотришь и на мини профиль можно будет его поставить, там то кнопок хватает.
Страна: (RU)
Start
 		Четверг, 08 Сентября 2016, 22:03 | Сообщение 12
Оффлайн
Проверенные
Сообщений:116
Награды: 2
« 25 »
Всё сделал. просто заменил это class="highslide" onclick="return hs.expand(this)" на onclick="soundClick()" class="ulightbox"
Тити*
Страна: (RU)
tsakonter
 		Пятница, 30 Сентября 2016, 23:16 | Сообщение 13
Оффлайн
Пользователи
Сообщений:220
Награды: 0
« 8 »
На одном сайте встречал, мини профиль со звуком, просто если делать звук на весь сайт, то думаю это не очень будет, а если к примеру для профиля, то нормально.
Страна: (RU)
JoniDen
 		Пятница, 07 Октября 2016, 00:29 | Сообщение 14
Оффлайн
Vip
Сообщений:23
Награды: 1
« 200 »
А вот это то что надо.
Страна: (KZ)
Сопрано
 		Пятница, 07 Октября 2016, 02:26 | Сообщение 15
Оффлайн
Vip
Сообщений:461
Награды: 4
« 14 »
JoniDen, если поставил, скинь ссылку здесь на сайт.

Сообщение отредактировал
Trantel - Пятница, 07 Октября 2016, 02:27
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Звук при нажатии переключателей страниц (Воспроизведение звука на JavaScript)
  • Страница 1 из 1
  • 1
Поиск: