Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Звук при нажатии переключателей страниц (Воспроизведение звука на JavaScript)
Звук при нажатии переключателей страниц
Angerfist
Дата: Понедельник, 05.09.2016, 18:18 | Сообщение # 1
Vip
Сообщений:616
Награды: 18


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

Короче выглядит как прикол, но для серьёзности я выбрал короткий 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(1Kb) · 6589974.png(118Kb)


No regrets

Сообщение отредактировал Angerfist - Понедельник, 05.09.2016, 18:23
Сопрано
Дата: Понедельник, 05.09.2016, 18:22 | Сообщение # 2
Пользователи
Сообщений:265
Награды: 2


Для сайтов с тематикой связано с музыкой как раз подойдет.
Kosten
Дата: Понедельник, 05.09.2016, 18:26 | Сообщение # 3
Администраторы
Сообщений:12668
Награды: 39


Как видно по скрипу, звук можно выставить свой, что отлично.

Angerfist
Дата: Понедельник, 05.09.2016, 18:28 | Сообщение # 4
Vip
Сообщений:616
Награды: 18


Kosten, да звук можно любой свой, забыл написать что файл mp3 заливаем на сайт и указываем в скрипте путь до него.

No regrets
Kosten
Дата: Понедельник, 05.09.2016, 18:29 | Сообщение # 5
Администраторы
Сообщений:12668
Награды: 39


Angerfist, но в скрипте видно же. wink

Angerfist
Дата: Понедельник, 05.09.2016, 18:29 | Сообщение # 6
Vip
Сообщений:616
Награды: 18


И вообще к любой надписи или кнопке добавить звук вот таким образом:

Код

<p style="cursor:pointer" onclick="soundClick()">Ссылка или кнопка</p>


No regrets
FeStemBer
Дата: Понедельник, 05.09.2016, 19:16 | Сообщение # 7
Проверенные
Сообщений:294
Награды: 1


Раньше на одном сайте видел такой эффект, теперь сделал себе, Сп.
Start
Дата: Четверг, 08.09.2016, 11:34 | Сообщение # 8
Пользователи
Сообщений:50
Награды: 0


Цитата Angerfist ()
И вообще к любой надписи или кнопке добавить звук вот таким образом:
как сделать на увел. фотографии? как тут при нажатий на фото звук...


Тити*
Angerfist
Дата: Четверг, 08.09.2016, 12:58 | Сообщение # 9
Vip
Сообщений:616
Награды: 18


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

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


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


No regrets

Сообщение отредактировал Angerfist - Четверг, 08.09.2016, 13:01
Start
Дата: Четверг, 08.09.2016, 16:18 | Сообщение # 10
Пользователи
Сообщений:50
Награды: 0


Цитата 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.09.2016, 19:12
Kosten
Дата: Четверг, 08.09.2016, 20:12 | Сообщение # 11
Администраторы
Сообщений:12668
Награды: 39


Так это отлично, что можно закрепить еще к изображению, смотришь и на мини профиль можно будет его поставить, там то кнопок хватает.

Start
Дата: Четверг, 08.09.2016, 22:03 | Сообщение # 12
Пользователи
Сообщений:50
Награды: 0


Всё сделал. просто заменил это class="highslide" onclick="return hs.expand(this)" на onclick="soundClick()" class="ulightbox"

Тити*
tsakonter
Дата: Пятница, 30.09.2016, 23:16 | Сообщение # 13
Пользователи
Сообщений:151
Награды: 0


На одном сайте встречал, мини профиль со звуком, просто если делать звук на весь сайт, то думаю это не очень будет, а если к примеру для профиля, то нормально.
JoniDen
Дата: Пятница, 07.10.2016, 00:29 | Сообщение # 14
Vip
Сообщений:22
Награды: 1


А вот это то что надо.
Сопрано
Дата: Пятница, 07.10.2016, 02:26 | Сообщение # 15
Пользователи
Сообщений:265
Награды: 2


JoniDen, если поставил, скинь ссылку здесь на сайт.

Сообщение отредактировал Trantel - Пятница, 07.10.2016, 02:27
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Звук при нажатии переключателей страниц (Воспроизведение звука на JavaScript)
Страница 1 из 11
Поиск: